---
title: "Chart Image Export"
enterprise: true
framework: javascript
version: "36.1.0"
---

# Chart Image Export

This section shows how to export charts via the Chart Toolbar and Grid API.

## Export Charts via Chart Toolbar

Users can use the 'Download Chart' [Chart Menu](https://www.ag-grid.com/javascript-data-grid/integrated-charts-menu/) item to download the rendered chart in the browser.

![Side Bar](https://www.ag-grid.com/_astro/chart-toolbar-download.RUoyY_JX.png)

Note that the downloaded chart image will be in a `PNG` format.

## Export Charts via Grid API

There are two ways to download the chart image using the Grid API as shown below:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `getChartImageDataURL` | `Function` |  |  | Returns a base64-encoded image data URL for the referenced chartId. Module: [`IntegratedChartsModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |
| `downloadChart` | `Function` |  |  | Starts a browser-based image download for the referenced chartId. Module: [`IntegratedChartsModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |

You can use the `downloadChart(params)` API to download the chart image in the browser.

Alternatively for programmatic use-cases, the `getChartImageDataURL(params)` API returns the chart image as string (base64 encoded); this is ideal for persisting to a back-end, or opening/presenting the chart image statically.

The example below demonstrates how you can retrieve images rendered from the chart in multiple formats.

- Click **Download Chart Image (PNG)** to download a PNG format image via `getChartImageDataURL()`
- Click **Download Chart Image (JPG 800x500)** to download a custom size image via `downloadChart()`
- Click **Open Chart Image (JPG)** to open a JPEG format image in a new window via `getChartImageDataURL()`

#### Downloading Chart Image

```ts
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  ChartCreatedEvent,
  ClientSideRowModelModule,
  CreateRangeChartParams,
  FirstDataRenderedEvent,
  GetChartImageDataUrlParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  TextEditorModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  TextFilterModule,
  NumberEditorModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let gridApi: GridApi;
let chartId: string | undefined;

const gridOptions: GridOptions = {
  columnDefs: [
    { field: "country", chartDataType: "category" },
    { field: "sugar", chartDataType: "series" },
    { field: "fat", chartDataType: "series" },
    { field: "weight", chartDataType: "series" },
  ],
  defaultColDef: {
    editable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
  },
  cellSelection: true,
  popupParent: document.body,
  enableCharts: true,
  chartThemeOverrides: {
    bar: {
      axes: {
        category: {
          label: {
            rotation: 335,
          },
        },
      },
    },
  },
  onGridReady: (params: GridReadyEvent) => {
    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  },
  onFirstDataRendered,
  onChartCreated,
};

function onFirstDataRendered(params: FirstDataRenderedEvent) {
  const createRangeChartParams: CreateRangeChartParams = {
    cellRange: {
      columns: ["country", "sugar", "fat", "weight"],
    },
    chartType: "groupedColumn",
    chartContainer: document.querySelector("#myChart") as any,
  };

  params.api.createRangeChart(createRangeChartParams);
}

function onChartCreated(event: ChartCreatedEvent) {
  chartId = event.chartId;
}

function downloadChart(dimensions: { width: number; height: number }) {
  if (!chartId) return;
  gridApi!.downloadChart({
    fileName: "resizedImage",
    fileFormat: "image/jpeg",
    chartId,
    dimensions,
  });
}

function downloadChartImage(fileFormat: string) {
  if (!chartId) return;
  const params: GetChartImageDataUrlParams = { fileFormat, chartId };
  const imageDataURL = gridApi!.getChartImageDataURL(params);

  if (imageDataURL) {
    const a = document.createElement("a");
    a.href = imageDataURL;
    a.download = "image";
    a.style.display = "none";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
}

function openChartImage(fileFormat: string) {
  if (!chartId) return;
  const params: GetChartImageDataUrlParams = { fileFormat, chartId };
  const imageDataURL = gridApi!.getChartImageDataURL(params);

  if (imageDataURL) {
    const image = new Image();
    image.src = imageDataURL;

    const w = window.open("")!;
    w.document.write(image.outerHTML);
    w.document.close();
  }
}

gridApi = createGrid(
  document.querySelector<HTMLElement>("#myGrid")!,
  gridOptions,
);

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

[Live example: Downloading Chart Image](https://www.ag-grid.com/examples/integrated-charts-api-downloading-image/downloading-chart-image/typescript)