JavaScript ChartsBackground

import {
  AgCharts,
  AgPolarChartOptions,
  LegendModule,
  ModuleRegistry,
  PieSeriesModule,
} from "ag-charts-community";
import { getData } from "./data";
import { random } from "./seededRandom";

function randomChannel() {
  return Math.floor(random() * 256);
}
ModuleRegistry.registerModules([LegendModule, PieSeriesModule]);

const options: AgPolarChartOptions = {
  data: getData(),
  series: [
    {
      type: "pie",
      angleKey: "value",
    },
  ],
  background: {
    fill: "aliceblue",
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function randomColor() {
  const color = `rgb(${randomChannel()}, ${randomChannel()}, ${randomChannel()})`;
  options.background = {
    fill: color,
  };

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).randomColor = randomColor;
}

export function getData() {
  return [
    { value: 56.9 },
    { value: 22.5 },
    { value: 6.8 },
    { value: 8.5 },
    { value: 2.6 },
    { value: 1.9 },
  ];
}

export function createSeededRandom(seed = 42): () => number {
  let state = seed;
  return () => {
    state = (state * 16807) % 2147483647;
    return (state - 1) / 2147483646;
  };
}

export const random = createSeededRandom();