React ChartsEvents

This section explains how to listen and respond to various chart and series events.

Chart Events

These events are raised by interactions across the entire chart.

click and doubleClick

These are fired on click or double-click on any empty part of the chart. When a user double-clicks, the click event will be fired on the first click, then both the click and doubleClick will be fired on the second click.

These events may be prevented by other clickable parts of the chart, such as series nodes and legend items which have their own events.

In this example:

• When a blank area on a chart is clicked, a message is logged to the console.
• When a blank area on a chart is double-clicked, a different message is logged to the console.

seriesNodeClick and seriesNodeDoubleClick

These are fired on click or double-click of any series node in the chart.

The contents of the event object passed to the listener will depend on the type of series the clicked node belongs to.

In this example:

• Whenever a column or line marker is clicked, an alert message is shown with information about that series node.
• The ID of the series that contains the clicked node is also logged.

seriesVisibilityChange

This is fired when the visibility of a series or data item is toggled. This is usually triggered by user interaction with a legend item.

This event contains:

• The seriesId of the series.
• The itemId, legendItemName or other identifiers of the changed item.
• visible - the new visibility state of the series or item.

listeners: {
    seriesVisibilityChange: ({ seriesId, visible }: AgSeriesVisibilityChange) => {
        window.alert(`seriesId: ${seriesId}, visible: ${visible}`);
    },
}

In this example:

• When a legend item is clicked, the visibility change is prevented and a counter decreases. This is done by using preventDefault on the legendItemClick event.
• When the counter hits zero, the series toggle is allowed to occur.
• The series visibility change is fired, and an alert message is shown with relevant information.

zoom

This is fired when the zoom changes. This is triggered when zooming in or out of the chart, panning or using the Navigator.

This event contains:

• A ratioX and ratioY with start and end properties as a value between 0 and 1 as a proportion of the width or height of the chart.
• For any non-category axes, a rangeX or rangeY with start and end properties with values that match the type of the axis, e.g. a date for an Ordinal Time Axis.

Series Events

These are fired on click or double-click of the series node. Depending on the type of series, a node can mean a bar or a pie sector, or a marker, such as a Line or an Area series marker.

These events contain:

• The series the node belongs to.
• The piece of chart data or datum.
• The specific keys in that datum that were used to fetch the values represented by the clicked node.

nodeClick and nodeDoubleClick

In this example:

• Whenever a bar is clicked, an alert message is shown with information about that bar.
• The event listener pulls extra information from the datum containing the bar's value and shows it in the alert dialog as well. In this case the breakdown of sales numbers by brand name.

Example: Toggling node's selected state

This example shows how the nodeClick event listener can be used to toggle each node's selected state in combination with a series[].marker.itemStyler:

Note how the series marker changes when you click it.

Legend Events

legendItemClick and legendItemDoubleClick

These are fired on click or double-click of a legend item.

These events contain:

• The seriesId of the series associated with the legend item.
• The itemId, usually the yKey value for cartesian series.

legend: {
    listeners: {
        legendItemClick: ({ seriesId, itemId, enabled }: AgChartLegendClickEvent) => {
            window.alert(`seriesId: ${seriesId}, itemId: ${itemId}`);
        },
    },
}

In this example:

• When a legend item is clicked, a message is logged to the console with the legendItemClick event contents.
• When a legend item is double clicked, a message is logged to the console with the legendItemDoubleClick event contents.

Series Visibility Toggling

Although clicking a legend item will usually toggle the series visibility, this is not included in the legend events. Use the chart seriesVisibilityChange event to listen for this.

The legend item click events include a preventDefault function that can be called to stop the default series visibility toggling. See the seriesVisibilityChange event documentation for an example of this.

Interaction Ranges

By default, the nodeClick event is only triggered when the user clicks exactly on a node. You can use the nodeClickRange option to instead define a range at which the event is triggered. This can be set to one of three values: 'nearest', 'exact' or a number as a distance in pixels.

In this example:

• 'exact' (default) will trigger the event if the user clicks exactly on a node.
• 'nearest' will trigger the event for whichever node is nearest to the click.
• Given a number it will trigger the event when the click is made within that many pixels of a node.

API Reference