---
title: "Save / Restore Charts"
enterprise: true
framework: vue
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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartModel,
  ChartRef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  CreateChartContainer,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  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();
}

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

let chartModel: ChartModel | undefined;

let currentChartRef: ChartRef | undefined;

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="wrapper">
      <div id="buttons">
        <button v-on:click="saveChart()">Save chart</button>
        <button v-on:click="clearChart()">Clear chart</button>
        <button v-on:click="restoreChart()">Restore chart</button>
      </div>
      <ag-grid-vue
        id="myGrid"
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :cellSelection="true"
        :popupParent="popupParent"
        :enableCharts="true"
        :createChartContainer="createChartContainer"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        <div id="myChart" class="my-chart"></div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", chartDataType: "category" },
      { field: "sugar", chartDataType: "series" },
      { field: "fat", chartDataType: "series" },
      { field: "weight", chartDataType: "series" },
    ]);
    const defaultColDef = ref<ColDef>({
      editable: true,
      flex: 1,
      minWidth: 100,
      filter: true,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const rowData = ref<any[]>(null);

    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 saveChart() {
      const chartModels = gridApi.value!.getChartModels() || [];
      if (chartModels.length > 0) {
        chartModel = chartModels[0];
      }
    }
    function clearChart() {
      if (currentChartRef) {
        currentChartRef.destroyChart();
        currentChartRef = undefined;
      }
    }
    function restoreChart() {
      if (!chartModel) return;
      currentChartRef = gridApi.value!.restoreChart(chartModel)!;
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      getData().then((rowData) => params.api.setGridOption("rowData", rowData));
    };
    function createChartContainer(chartRef: ChartRef) {
      if (currentChartRef) {
        currentChartRef.destroyChart();
      }
      const eChart = chartRef.chartElement;
      const eParent = document.querySelector<HTMLElement>("#myChart")!;
      eParent.appendChild(eChart);
      currentChartRef = chartRef;
    }

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      createChartContainer,
      rowData,
      onGridReady,
      onFirstDataRendered,
      saveChart,
      clearChart,
      restoreChart,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## 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/vue-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/vue-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/vue-data-grid/modules/). |

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