Vue ChartsBackground

import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  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 = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <button v-on:click="randomColor()">🍭 Random color</button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgPolarChartOptions>({
      data: getData(),
      series: [
        {
          type: "pie",
          angleKey: "value",
        },
      ],
      background: {
        fill: "aliceblue",
      },
    });

    const randomColor = () => {
      const optionsCopy = clone(options.value);

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

      options.value = optionsCopy;
    };

    return {
      options,
      randomColor,
    };
  },
});

createApp(ChartExample).mount("#app");

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