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.
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.
| Function | Returns a list of models with information about the charts that are currently rendered from the grid. |
Properties available on the ChartModel
interface.
| string | string |
| ChartModelType | ChartModelType modelType: ChartModelType;
type ChartModelType = 'range' | 'pivot'
|
| string | string |
| ChartType | ChartType chartType: ChartType;
type ChartType =
'column'
| 'groupedColumn'
| 'stackedColumn'
| 'normalizedColumn'
| 'bar'
| 'groupedBar'
| 'stackedBar'
| 'normalizedBar'
| 'line'
| 'scatter'
| 'bubble'
| 'pie'
| 'doughnut'
| 'area'
| 'stackedArea'
| 'normalizedArea'
| 'histogram'
| 'columnLineCombo'
| 'areaColumnCombo'
| 'customCombo'
|
| CellRangeParams | CellRangeParams cellRange: CellRangeParams;
interface CellRangeParams {
// Start row index
rowStartIndex: number | null;
// Pinned state of start row. Either 'top', 'bottom' or null
rowStartPinned?: RowPinnedType;
// End row index
rowEndIndex: number | null;
// Pinned state of end row. Either 'top', 'bottom' or null
rowEndPinned?: RowPinnedType;
// Starting column for range
columnStart?: string | Column;
// End column for range
columnEnd?: string | Column;
// Specify Columns to include instead of using `columnStart` and `columnEnd`
columns?: (string | Column)[];
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
|
| string | string |
| | AgChartThemeOverrides chartOptions: AgChartThemeOverrides;
interface AgChartThemeOverrides {
}
|
| | AgChartThemePalette chartPalette: AgChartThemePalette;
interface AgChartThemePalette {
}
|
| boolean | boolean |
| | string | IAggFunc aggFunc: string | IAggFunc;
interface IAggFunc<TData = any, TValue = any> {
(params: IAggFuncParams<TData, TValue>) : any
}
interface IAggFuncParams<TData = any, TValue = any> {
// Values to aggregate
values: TValue[];
// Column the aggregation function is working on
column: Column;
// ColDef of the aggregation column
colDef: ColDef<TData>;
// Pivot Result Column being produced using this aggregation
pivotResultColumn?: Column;
// The parent RowNode, where the aggregation result will be shown
rowNode: IRowNode<TData>;
// data (if any) of the parent RowNode
data: TData;
// The grid api.
api: GridApi<TData>;
// The column api.
columnApi: ColumnApi;
// Application context as set on `gridOptions.context`.
context: any;
}
|
| boolean | boolean |
| SeriesChartType[] | SeriesChartType[] seriesChartTypes: SeriesChartType[];
interface SeriesChartType {
colId: string;
chartType: ChartType;
secondaryAxis?: boolean;
}
type ChartType =
'column'
| 'groupedColumn'
| 'stackedColumn'
| 'normalizedColumn'
| 'bar'
| 'groupedBar'
| 'stackedBar'
| 'normalizedBar'
| 'line'
| 'scatter'
| 'bubble'
| 'pie'
| 'doughnut'
| 'area'
| 'stackedArea'
| 'normalizedArea'
| 'histogram'
| 'columnLineCombo'
| 'areaColumnCombo'
| 'customCombo'
|
These models can then be supplied to the following grid api method to restore the charts:
| Function | Restores a chart using the ChartModel that was previously obtained from getChartModels() . restoreChart = (
chartModel: ChartModel,
chartContainer?: HTMLElement
) => ChartRef | undefined;
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.
Next Up