React Data GridChart Events

Enterprise

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

ChartCreated Copy Link

The ChartCreated event is raised whenever a chart is first created.

Properties available on the ChartCreatedEvent<TData = any, TContext = any> interface.

chartIdCopy Link
string
Id of the created chart. This can later be used to reference the chart via api methods.
The grid api.
contextCopy Link
TContext
Application context as set on gridOptions.context.
TEventType
Event identifier

ChartRangeSelectionChanged Copy Link

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.

Properties available on the ChartRangeSelectionChangedEvent<TData = any, TContext = any> interface.

chartIdCopy Link
string
Id of the effected chart.
string
Same as chartId.
cellRangeCopy Link
CellRangeParams
New cellRange selected.
The grid api.
contextCopy Link
TContext
Application context as set on gridOptions.context.
TEventType
Event identifier

ChartOptionsChanged Copy Link

Any changes made in the panels will raise the ChartOptionsChanged event:

Properties available on the ChartOptionsChangedEvent<TData = any, TContext = any> interface.

chartIdCopy Link
string
Id of the effected chart.
chartTypeCopy Link
ChartType
ChartType
chartThemeNameCopy Link
string
Chart theme name of currently selected theme.
Chart options.
The grid api.
contextCopy Link
TContext
Application context as set on gridOptions.context.
TEventType
Event identifier

Here the chartThemeName will be set to the name of the currently selected theme, which will be either one of the Provided Themes or a Custom Theme if used.

ChartDestroyed Copy Link

This is raised when a chart is destroyed.

Properties available on the ChartDestroyed<TData = any, TContext = any> interface.

chartIdCopy Link
string
Id of the effected chart.
The grid api.
contextCopy Link
TContext
Application context as set on gridOptions.context.
TEventType
Event identifier

Example: Chart Events Copy Link

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

  • Create a chart from selection, for example, select a few cells in the "Month" and "Sunshine" columns and right-click to "Chart Range" as a "Line" chart. Notice that a "Created chart with ID id-xxxxxxxxxxxxx" message has been logged to the console.

  • Shrink or expand the selection by a few cells to see the "Changed range selection of chart with ID id-xxxxxxxxxxxx" logged.

  • Click the Chart Tool Panels Button inside the chart dialog to show chart settings and switch to a column chart. Notice that a "Changed options of chart with ID id-xxxxxxxxxxxxx" message has been logged to the console.

  • Close the chart dialog to see the "Destroyed chart with ID id-xxxxxxxxxxx" message logged.

Event Driven Chart Updates Copy Link

The following example updates the chart when ChartRangeSelectionChanged events are raised. Note that charts can be updated using the following Grid API method:

updateChartCopy Link
Function
Used to programmatically update a chart.

Try changing the chart cell range in the grid and notice the subtitle is updated with chart range info.

Standalone Chart Events Copy Link

It is possible to subscribe to the AG Charts Events using the theme based configuration via the chartThemeOverrides grid option:

const chartThemeOverrides = useMemo(() => { 
	return {
    common: {
      legend: {
        listeners: {
          legendItemClick: (e) => console.log('legendItemClick', e)
        }
      },
      listeners: {
        seriesNodeClick: (e) => console.log('seriesNodeClick', e)
      }
    }
  };
}, []);

<AgGridReact chartThemeOverrides={chartThemeOverrides} />

Note that the chartThemeOverrides grid option maps to AG Charts Theme Overrides.

The example below demonstrates Standalone Charts Events subscription:

  • Click on the bars in the series and observe that the seriesNodeClick listener emits a console message.
  • Click on a legend item and observe that the legendItemClick listener emits a console message.

Next Up Copy Link

Continue to the next section to learn about Time Series.