React ChartsDownload

import React, { useState, useRef, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgAreaSeriesOptions,
  AgChartOptions,
  AgChartsInstance,
  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,
  };
}
ModuleRegistry.registerModules([
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const chartRef = useRef<AgChartsInstance>(null);
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Browser Usage Statistics",
    },
    subtitle: {
      text: "2009-2019",
    },
    data: getData(),
    series: [
      buildSeries("IE"),
      buildSeries("Chrome"),
      buildSeries("Firefox"),
      buildSeries("Safari"),
    ],
    legend: { position: "top" },
  });

  const download = () => {
    chartRef.current!.download();
  };

  const downloadFixedSize = () => {
    chartRef.current!.download({ width: 600, height: 300 });
  };

  const openImage = () => {
    chartRef
      .current!.getImageDataURL({ width: 600, height: 300 })
      .then((imageDataURL) => {
        const image = new Image();
        image.src = imageDataURL;
        const tab = window.open(imageDataURL);
        if (tab) {
          tab.document.write(image.outerHTML);
          tab.document.close();
        }
      });
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={download}>Download</button>
          <button onClick={downloadFixedSize}>Download at 600x300</button>
          <button onClick={openImage}>Open</button>
        </div>
      </div>
      <AgCharts ref={chartRef} options={options} />
    </Fragment>
  );
};

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

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,
    },
  ];
}