Chart Events

There are several events which are raised at different points in the lifecycle of a chart.

ChartCreated

This event is raised whenever a chart is first created.

interface ChartCreated { type: string; // 'chartCreated' chartId: string; chartModel: ChartModel; api: GridApi; columnApi: ColumnApi; }

ChartRangeSelectionChanged

This is raised any time that the data range used to render the chart from is changed, e.g. by using the range selection handle or by making changes in the Data tab of the configuration sidebar. This event contains a cellRange object that gives you information about the range, allowing you to recreate the chart.

interface ChartRangeSelectionChanged { type: string; // 'chartRangeSelectionChanged' id: string; chartId: string; cellRange: CellRangeParams; api: GridApi; columnApi: ColumnApi; } interface CellRangeParams { // start row rowStartIndex?: number; rowStartPinned?: string; // end row rowEndIndex?: number; rowEndPinned?: string; // columns columns: (string | Column)[]; }

ChartOptionsChanged

Formatting changes made by users through the Format Panel will raise the ChartOptionsChanged event:

interface ChartOptionsChanged { type: string; // 'chartOptionsChanged' chartId: string; chartType: ChartType; chartPalette: string; chartOptions: ChartOptions; api: GridApi; columnApi: ColumnApi; } type ChartType = 'groupedColumn' | 'stackedColumn' | 'normalizedColumn' | 'groupedBar' | 'stackedBar' | 'normalizedBar' | 'line' | 'scatter' | 'bubble' | 'pie' | 'doughnut' | 'area' | 'stackedArea' | 'normalizedArea';

Here the chartPalette will be set to the name of the currently selected palette, which will be one of the following: 'borneo', 'material', 'pastel', 'bright', 'flat'

ChartDestroyed

This is raised when a chart is destroyed.

interface ChartDestroyed { type: string; // 'chartDestroyed' chartId: string; api: GridApi; columnApi: ColumnApi; }

Example: Chart Events

The following example demonstrates when the described events occur by writing to the console whenever they are triggered.

Next Up

Continue to the next section to learn about the: Chart Container.