---
title: "Download"
framework: javascript
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`. |

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

```ts
import {
  AgAreaSeriesOptions,
  AgChartOptions,
  AgCharts,
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

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 options: AgChartOptions = {
  title: {
    text: "Browser Usage Statistics",
  },
  subtitle: {
    text: "2009-2019",
  },
  data: getData(),
  series: [
    buildSeries("IE"),
    buildSeries("Chrome"),
    buildSeries("Firefox"),
    buildSeries("Safari"),
  ],
  legend: { position: "top" },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function download() {
  chart.download();
}

function downloadFixedSize() {
  chart.download({ width: 600, height: 300 });
}

function openImage() {
  chart.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();
    }
  });
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).download = download;
  (<any>window).downloadFixedSize = downloadFixedSize;
  (<any>window).openImage = openImage;
}
```

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