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.
Create a range chart from the grid, which will be shown in a container below the grid.
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. An alert will be shown to confirm that this has happened.
Click "Clear chart" to destroy the existing chart.
Click "Restore chart" to restore the previously saved chart.
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.
These models can then be supplied to the following grid api method to restore the charts:
restoreChart
Function
Restores a chart using the ChartModel that was previously obtained from getChartModels().
restoreChart = (
chartModel: ChartModel,
chartContainer?: HTMLElement
) => ChartRef | undefined;
interface ChartModel {
version?: string;
modelType: ChartModelType;
chartId: string;
chartType: ChartType;
cellRange: CellRangeParams;
chartThemeName?: string;
chartOptions: AgChartThemeOverrides;
suppressChartRanges?: boolean;
aggFunc?: string | IAggFunc;
unlinkChart?: boolean;
seriesChartTypes?: SeriesChartType[];
}
type ChartType =
'column'
| 'groupedColumn'
| 'stackedColumn'
| 'normalizedColumn'
| 'bar'
| 'groupedBar'
| 'stackedBar'
| 'normalizedBar'
| 'line'
| 'scatter'
| 'bubble'
| 'pie'
| 'doughnut'
| 'area'
| 'stackedArea'
| 'normalizedArea'
| 'histogram'
| 'columnLineCombo'
| 'areaColumnCombo'
| 'customCombo'
interface SeriesChartType {
colId: string;
chartType: ChartType;
secondaryAxis?: boolean;
}
interface ChartRef {
// The id of the created chart.
chartId: string;
// The chart instance that is produced by AG Charts which can be used to interact with the chart directly.
chart: any;
// The chart DOM element, which the application is responsible for placing into the DOM.
chartElement: HTMLElement;
// The application is responsible for calling this when the chart is no longer needed.
destroyChart: () => void;
}
Note that an optional chartContainer can be specified when restoring a chart.
