---
product: "AG Grid"
title: "Chart Image Export"
description: "This section shows how to export charts via the Chart Toolbar and Grid API."
enterprise: true
framework: angular
version: "36.2.0"
related:
    - title: "Overview"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/integrated-charts/"
    - title: "Install Integrated Charts"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/integrated-charts-installation/"
    - title: "User Created Charts"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/integrated-charts-user-created/"
    - title: "Application Created Charts"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/integrated-charts-application-created/"
    - title: "Chart Types"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/integrated-charts-chart-types/"
    - title: "Chart Menu"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/integrated-charts-menu/"
    - title: "Chart Tool Panels"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/integrated-charts-chart-tool-panels/"
    - title: "Chart Container"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/integrated-charts-container/"
    - title: "Customisation"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/integrated-charts-customisation/"
    - title: "Chart Events"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/integrated-charts-events/"
    - title: "Time Series"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/integrated-charts-time-series/"
    - title: "Save / Restore Charts"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/integrated-charts-api-save-restore-charts/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# 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/archive/36.2.0/angular-data-grid/integrated-charts-menu/) item to download the rendered chart in the browser.

![Side Bar](https://www.ag-grid.com/archive/36.2.0/_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` |  |  |  |
| `downloadChart` | `Function` |  |  |  |

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 { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
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") {
  // Enable extended validations only for development
  enableDevValidations();
}

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

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="wrapper">
    <div id="buttons">
      <button (click)="downloadChartImage('image/png')">
        Download Chart Image (PNG)
      </button>
      <button (click)="downloadChart({ width: 800, height: 500 })">
        Download Chart Image (JPG 800x500)
      </button>
      <button (click)="openChartImage('image/jpeg')">
        Open Chart Image (JPG)
      </button>
    </div>
    <ag-grid-angular
      id="myGrid"
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [cellSelection]="true"
      [popupParent]="popupParent"
      [enableCharts]="true"
      [chartThemeOverrides]="chartThemeOverrides"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (chartCreated)="onChartCreated($event)"
      (gridReady)="onGridReady($event)"
    />
    <div id="myChart" class="my-chart"></div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  columnDefs: ColDef[] = [
    { field: "country", chartDataType: "category" },
    { field: "sugar", chartDataType: "series" },
    { field: "fat", chartDataType: "series" },
    { field: "weight", chartDataType: "series" },
  ];
  defaultColDef: ColDef = {
    editable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
  };
  popupParent: HTMLElement | null = document.body;
  chartThemeOverrides: AgChartThemeOverrides = {
    bar: {
      axes: {
        category: {
          label: {
            rotation: 335,
          },
        },
      },
    },
  };
  rowData!: any[];

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

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

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

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

  openChartImage(fileFormat: string) {
    if (!chartId) return;
    const params: GetChartImageDataUrlParams = { fileFormat, chartId };
    const imageDataURL = this.gridApi.getChartImageDataURL(params);
    if (imageDataURL) {
      const image = new Image();
      image.src = imageDataURL;
      const w = window.open("")!;
      w.document.write(image.outerHTML);
      w.document.close();
    }
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;

    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  }
}

let chartId: string | undefined;
```

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