React Data GridChart EventsEnterprise
There are several events which are raised at different points in the lifecycle of a chart.
The ChartCreated
event is raised whenever a chart is first created.
Properties available on the ChartCreated<TData = any, TContext = any>
interface.
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 ChartRangeSelectionChanged<TData = any, TContext = any>
interface.
| Will always be chartRangeSelectionChanged . | |
| Id of the effected chart. | |
| Same as chartId . | |
| New cellRange selected.
| |
| The grid api. | |
| The column api. | |
| Application context as set on gridOptions.context . |
Formatting changes made by users through the Format Panel will raise the ChartOptionsChanged
event:
Properties available on the ChartOptionsChanged<TData = any, TContext = any>
interface.
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.
This is raised when a chart is destroyed.
Properties available on the ChartDestroyed<TData = any, TContext = any>
interface.
| Will always be chartDestroyed . | |
| Id of the effected chart. | |
| The grid api. | |
| The column api. | |
| Application context as set on gridOptions.context . |
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.
Charts in the grid are produced by the Standalone Charts library, which is integrated directly into the grid for your convenience. In some advanced use cases, you may wish to access the chart instance that is produced by Standalone Charts, in order to interact with the chart directly.
The chart instance can be obtained from the chartRef
using the getChartRef(chartId)
API.
| Returns the ChartRef using the supplied chartId .
|
Here is the implementation:
function onChartCreated(event) {
const chartRef = gridOptions.api.getChartRef(event.chartId);
const chart = chartRef.chart;
}
Note in the snippet above, the chartId
is obtained from the ChartCreated
event which is supplied to the onChartCreated
callback. The chartId
is provided in all chart events.
The chart instance can be updated using the AgChart.updateDelta()
method, as described in the Standalone Charts - API > Create/Update section.
The example below shows how the chart instance can be used, creating a subtitle and updating it dynamically as you change the range selection.
The example below shows how we can subscribe to Standalone Charts Events:
- 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. - Change chart type from the Settings panel, and observe that the
seriesNodeClick
andlegendItemClick
listeners are working as before.
To learn about events see Standalone Chart Events.