---
title: "Chart Image Export"
enterprise: true
framework: react
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/react-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/react-data-grid/modules/). |
| `downloadChart` | `Function` |  |  | Starts a browser-based image download for the referenced chartId. Module: [`IntegratedChartsModule`](https://www.ag-grid.com/react-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

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  useEffect,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import "./styles.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  AgChartThemeOverrides,
  CellSelectionOptions,
  ChartCreatedEvent,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  CreateRangeChartParams,
  FirstDataRenderedEvent,
  GetChartImageDataUrlParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  TextEditorModule,
  TextFilterModule,
  NumberEditorModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
];

let chartId: string | undefined;

const GridExample = () => {
  const gridRef = useRef<AgGridReact>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>();
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "country", chartDataType: "category" },
    { field: "sugar", chartDataType: "series" },
    { field: "fat", chartDataType: "series" },
    { field: "weight", chartDataType: "series" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      editable: true,
      flex: 1,
      minWidth: 100,
      filter: true,
    };
  }, []);
  const popupParent = useMemo<HTMLElement | null>(() => {
    return document.body;
  }, []);
  const chartThemeOverrides = useMemo<AgChartThemeOverrides>(() => {
    return {
      bar: {
        axes: {
          category: {
            label: {
              rotation: 335,
            },
          },
        },
      },
    };
  }, []);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    getData().then((rowData) => setRowData(rowData));
  }, []);

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

  const onChartCreated = useCallback((event: ChartCreatedEvent) => {
    chartId = event.chartId;
  }, []);

  const downloadChart = useCallback(
    (dimensions: { width: number; height: number }) => {
      if (!chartId) return;
      gridRef.current!.api.downloadChart({
        fileName: "resizedImage",
        fileFormat: "image/jpeg",
        chartId,
        dimensions,
      });
    },
    [chartId],
  );

  const downloadChartImage = useCallback(
    (fileFormat: string) => {
      if (!chartId) return;
      const params: GetChartImageDataUrlParams = { fileFormat, chartId };
      const imageDataURL = gridRef.current!.api.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);
      }
    },
    [chartId],
  );

  const openChartImage = useCallback(
    (fileFormat: string) => {
      if (!chartId) return;
      const params: GetChartImageDataUrlParams = { fileFormat, chartId };
      const imageDataURL = gridRef.current!.api.getChartImageDataURL(params);
      if (imageDataURL) {
        const image = new Image();
        image.src = imageDataURL;
        const w = window.open("")!;
        w.document.write(image.outerHTML);
        w.document.close();
      }
    },
    [chartId, Image, window],
  );

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="wrapper">
          <div id="buttons">
            <button onClick={() => downloadChartImage("image/png")}>
              Download Chart Image (PNG)
            </button>
            <button onClick={() => downloadChart({ width: 800, height: 500 })}>
              Download Chart Image (JPG 800x500)
            </button>
            <button onClick={() => openChartImage("image/jpeg")}>
              Open Chart Image (JPG)
            </button>
          </div>

          <div id="myGrid" style={gridStyle}>
            <AgGridReact
              ref={gridRef}
              rowData={rowData}
              columnDefs={columnDefs}
              defaultColDef={defaultColDef}
              cellSelection={true}
              popupParent={popupParent}
              enableCharts={true}
              chartThemeOverrides={chartThemeOverrides}
              onGridReady={onGridReady}
              onFirstDataRendered={onFirstDataRendered}
              onChartCreated={onChartCreated}
            />
          </div>
          <div id="myChart" className="my-chart"></div>
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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