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

# Save / Restore Charts

This section shows how the Grid API can be used to save and restore charts.

## Saving / Restoring Charts

The example below demonstrates how you can save and then later restore a chart. You can make changes to the chart type, theme, data and formatting options and note how the restored chart looks the same as the chart that was saved.

- Change the chart type, theme, data and/or formatting in order to see the changes restored later.
- Click "Save chart" to persist a model of the visible chart into a local variable.
- Click "Clear chart" to destroy the existing chart.
- Click "Restore chart" to restore the previously saved chart.

#### Saving and Restoring Charts

```ts
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  ChartModel,
  ChartRef,
  ClientSideRowModelModule,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  TextEditorModule,
  TextFilterModule,
  createGrid,
  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,
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let gridApi: GridApi;
let chartModel: ChartModel | undefined;
let currentChartRef: ChartRef | 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,
  onGridReady: (params: GridReadyEvent) => {
    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  },
  onFirstDataRendered,
  createChartContainer,
};

function onFirstDataRendered(params: FirstDataRenderedEvent) {
  currentChartRef = params.api.createRangeChart({
    chartContainer: document.querySelector("#myChart") as any,
    cellRange: {
      columns: ["country", "sugar", "fat", "weight"],
      rowStartIndex: 0,
      rowEndIndex: 2,
    },
    chartType: "groupedColumn",
  });
}

function createChartContainer(chartRef: ChartRef) {
  if (currentChartRef) {
    currentChartRef.destroyChart();
  }

  const eChart = chartRef.chartElement;
  const eParent = document.querySelector<HTMLElement>("#myChart")!;
  eParent.appendChild(eChart);
  currentChartRef = chartRef;
}

function saveChart() {
  const chartModels = gridApi!.getChartModels() || [];
  if (chartModels.length > 0) {
    chartModel = chartModels[0];
  }
}

function clearChart() {
  if (currentChartRef) {
    currentChartRef.destroyChart();
    currentChartRef = undefined;
  }
}

function restoreChart() {
  if (!chartModel) return;
  currentChartRef = gridApi!.restoreChart(chartModel)!;
}

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

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

[Live example: Saving and Restoring Charts](https://www.ag-grid.com/archive/36.2.0/examples/integrated-charts-api-save-restore-charts/saving-and-restoring-charts/typescript/)

## API Reference

A chart model that represent all the state information about the rendered charts can be obtained using `getChartModels()`. These models are returned in a format that can be easily used with the other API methods to later restore the chart.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `getChartModels` | `Function` |  |  |  |

Properties available on the `ChartModel` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `version` | `string` |  |  |  |
| `modelType` | `ChartModelType` |  |  |  |
| `chartId` | `string` |  |  |  |
| `chartType` | `ChartType` |  |  |  |
| `cellRange` | `CellRangeParams` |  |  |  |
| `chartThemeName` | `string` |  |  |  |
| `chartOptions` | `AgChartThemeOverrides` |  |  |  |
| `chartPalette` | `AgChartThemePalette` |  |  |  |
| `suppressChartRanges` | `boolean` |  |  |  |
| `switchCategorySeries` | `boolean` |  |  |  |
| `aggFunc` | `string \| IAggFunc` |  |  |  |
| `unlinkChart` | `boolean` |  |  |  |
| `seriesChartTypes` | `SeriesChartType[]` |  |  |  |
| `seriesGroupType` | `SeriesGroupType` |  |  |  |
| `useGroupColumnAsCategory` | `boolean` |  |  |  |

These models can then be supplied to the following grid api method to restore the charts:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `restoreChart` | `Function` |  |  |  |

Note that an optional `chartContainer` can be specified when restoring a chart.