Angular ChartsCreate/Update

import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
  AgAreaSeriesOptions,
  AgChartLegendPosition,
  AgChartOptions,
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";

function buildSeries(name: string): AgAreaSeriesOptions {
  return {
    type: "area",
    xKey: "year",
    yKey: name.toLowerCase(),
    yName: name,
    fillOpacity: 0.5,
  };
}
const series = [
  buildSeries("IE"),
  buildSeries("Chrome"),
  buildSeries("Firefox"),
  buildSeries("Safari"),
];
const positions: AgChartLegendPosition[] = ["left", "top", "right", "bottom"];
const legend = {
  position: positions[1],
};
ModuleRegistry.registerModules([
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgCharts],
  template: `<div class="example-controls">
    <div class="controls-row">
        <button (click)="reverseSeries()">Reverse Series</button>
        <button (click)="swapTitles()">Swap Titles</button>
        <button (click)="rotateLegend()">Rotate Legend</button>
    </div>
</div>
<ag-charts
        [options]="options"
    ></ag-charts>
`,
})
export class AppComponent {
  public options;

  constructor() {
    this.options = {
      title: {
        text: "Browser Usage Statistics",
      },
      subtitle: {
        text: "2009-2019",
      },
      data: getData(),
      series,
      legend,
    };
  }

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

    options.series = series.reverse();

    this.options = options;
  };

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

    const oldTitle = options.title;
    options.title = options.subtitle;
    options.subtitle = oldTitle;

    this.options = options;
  };

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

    const currentIdx = positions.indexOf(legend.position ?? "top");
    legend.position = positions[(currentIdx + 1) % positions.length];
    options.legend = legend;

    this.options = options;
  };
}

export function getData(): any[] {
  return [
    {
      year: "2009",
      ie: 64.97,
      firefox: 26.85,
      safari: 2.79,
      chrome: 1.37,
    },
    {
      year: "2010",
      ie: 54.39,
      firefox: 31.15,
      safari: 4.22,
      chrome: 5.94,
    },
    {
      year: "2011",
      ie: 44.03,
      firefox: 29.36,
      safari: 5.94,
      chrome: 15.01,
    },
    {
      year: "2012",
      ie: 34.27,
      firefox: 22.69,
      safari: 8.09,
      chrome: 25.99,
    },
    {
      year: "2013",
      ie: 26.55,
      firefox: 18.55,
      safari: 10.66,
      chrome: 31.71,
    },
    {
      year: "2014",
      ie: 17.75,
      firefox: 14.77,
      safari: 12.63,
      chrome: 35.85,
    },
    {
      year: "2015",
      ie: 13.3,
      firefox: 11.82,
      safari: 13.79,
      chrome: 42.27,
    },
    {
      year: "2016",
      ie: 8.94,
      firefox: 8.97,
      safari: 12.9,
      chrome: 47.79,
    },
    {
      year: "2017",
      ie: 4.77,
      firefox: 6.75,
      safari: 14.54,
      chrome: 51.76,
    },
    {
      year: "2018",
      ie: 3.2,
      firefox: 5.66,
      safari: 14.44,
      chrome: 56.31,
    },
    {
      year: "2019",
      ie: 2.7,
      firefox: 4.66,
      safari: 15.23,
      chrome: 61.72,
    },
  ];
}

// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);