Angular ChartsBackground

import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
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]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgCharts],
  template: `<div class="example-controls">
    <div class="controls-row">
        <button (click)="randomColor()">🍭 Random color</button>
    </div>
</div>
<ag-charts
        [options]="options"
    ></ag-charts>
`,
})
export class AppComponent {
  public options;

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

  randomColor = () => {
    const options = clone(this.options);

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

    this.options = options;
  };
}