React ChartsBackground

import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgPolarChartOptions,
  LegendModule,
  ModuleRegistry,
  PieSeriesModule,
} from "ag-charts-community";
import { getData } from "./data";
import { random } from "./seededRandom";
import clone from "clone";

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

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

  const randomColor = () => {
    const nextOptions = clone(options);

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

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={randomColor}>🍭 Random color</button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);

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();