---
title: "Save / Restore Charts"
enterprise: true
framework: javascript
version: "36.1.0"
---

# 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";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  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/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` |  |  | Returns a list of models with information about the charts that are currently rendered from the grid. Module: [`IntegratedChartsModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |

Properties available on the `ChartModel` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `version` | `string` |  |  | string |
| `modelType` | `ChartModelType` |  |  | ChartModelType |
| `chartId` | `string` |  |  | string |
| `chartType` | `ChartType` |  |  | ChartType |
| `cellRange` | `CellRangeParams` |  |  | CellRangeParams |
| `chartThemeName` | `string` |  |  | string |
| `chartOptions` | [`AgChartThemeOverrides`](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-overrides) |  |  | AgChartThemeOverrides |
| `chartPalette` | [`AgChartThemePalette`](https://www.ag-grid.com/charts/themes-api/#reference-AgChartTheme-palette) |  |  | AgChartThemePalette |
| `suppressChartRanges` | `boolean` |  |  | boolean |
| `switchCategorySeries` | `boolean` |  |  | boolean |
| `aggFunc` | [`string \| IAggFunc`](https://www.ag-grid.com/javascript-data-grid/aggregation-custom-functions/) |  |  | string \| IAggFunc |
| `unlinkChart` | `boolean` |  |  | boolean |
| `seriesChartTypes` | `SeriesChartType[]` |  |  | SeriesChartType[] |
| `seriesGroupType` | `SeriesGroupType` |  |  | SeriesGroupType |
| `useGroupColumnAsCategory` | `boolean` |  |  | boolean |

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

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `restoreChart` | `Function` |  |  | Restores a chart using the `ChartModel` that was previously obtained from `getChartModels()`. Module: [`IntegratedChartsModule`](https://www.ag-grid.com/javascript-data-grid/modules/). |

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