---
title: "Download"
framework: react
version: "14.1.0"
---

# Download

Saving chart images by API call.

## Download API

We expose the APIs for triggering download via the `AgCharts` class:

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| download | Function |  | Starts a browser-based image download for the given `AgChartInstance`.  Returns a `Promise` that resolves once the download has been initiated. |
| getImageDataURL | Function |  | Returns a base64-encoded image data URL for the given `AgChartInstance`. |

The `AgChartInstance` can be obtained using a React `Ref` to our `<AgCharts />` tag, which exposes a `chart` property.

This example demonstrates:

- How to obtain a reference to an `AgChartInstance`.
- How to use `AgChartInstance.download()` to start a chart image download.
- How to use `AgChartInstance.getImageDataURL()` to create a base64-encoded image URL, and then open it in a new tab.

#### Download via AgChartInstance API

```tsx
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 />);
```

[Live example: Download via AgChartInstance API](https://www.ag-grid.com/charts/reactFunctionalTs/api-download/examples/download)