AG Studio Launch Week 🚀🚀🚀 28 Sep - 2 Oct 2026 🚀🚀🚀 Join now
AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search

React ChartsEvents

Version 14.1.0

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

Chart Events Copy Link

These events are raised by interactions across the entire chart.

click and doubleClick Copy Link

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 shown in the console.
  • When a blank area on a chart is double-clicked, a different message is shown.

seriesNodeClick and seriesNodeDoubleClick Copy Link

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, information about that series node is shown in the console.
  • Whenever a column or line marker is double-clicked, the information is shown with temperatures in Fahrenheit.
  • The ID of the series that contains the clicked node is also logged.

seriesVisibilityChange Copy Link

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 }) => {
            console.log(`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, with the relevant information shown in the console.

activeChange Copy Link

This event is fired when the active state is changed. This occurs when a user interaction (mouse, touch, keyboard) on a series node or legend causes a highlight or tooltip change.

The event contains:

  • activeItem - the item that is now active, or undefined if no item is active.
  • The activeItem contains:
    • type - the type of the active item, either 'series-node' or 'legend'.
    • seriesId and itemId identifying the active item.
  • datum - the data from the chart data array for the active item.
  • source - the source of the event, either 'user-interaction' or 'state-change'.
 
{
    listeners: {
        activeChange: (ev) => {
            if (ev.activeItem === undefined) {
                console.log(`[inactive], event:`, ev);
            } else {
                const { type: t, seriesId: s, itemId: i } = ev.activeItem;
                console.log(`[${t}], seriesId: ${s}, itemId: ${i}, event:`, ev);
            }
        },
    },
}

In this example:

  • Whenever a user interaction (mouse, touch, keyboard) on the series-area or legend changes the highlight state, a message is shown in the console.

selectionChange Copy Link

This is fired when the Data Selection is updated by either user interaction or an API call. See Selection Change Event for full details.

collapsedChange Copy Link

This is fired when an item in an Org Chart is expanded or collapsed, by either user interaction or an API call.

The event contains:

  • collapsed - array of the items newly collapsed by this change, each with itemId and datum:
    • itemId - the unique identifier of the datum.
    • datum - the data from the chart data array for the collapsed item.
  • expanded - array of the items newly expanded by this change, each with itemId and datum:
    • itemId - the unique identifier of the datum.
    • datum - the data from the chart data array for the expanded item.
  • source - the source of the event, either 'user-interaction' or 'api-call'.

collapsed and expanded contain only the items changed by this event, not the full set of collapsed or expanded items. Use chart.getState() to get the current state of all items.

In this example:

  • Whenever a node is collapsed or expanded, a message is shown in the console.

annotations Copy Link

This is fired when the annotations are changed, added or removed in either cartesian charts or with the financial charts toolbar.

This event contains:

  • The array of annotations.

In this example:

  • When an annotation is changed, added or removed, the event is output to the console.

zoom Copy Link

This is fired when the zoom level or position 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 with values between 0 and 1. These represent a proportion of the width or height of the chart.
  • Any non-category axes also include rangeX or rangeY properties. These contain values that match the axis type, e.g. a date for an Ordinal Time Axis.

In this example:

  • When the zoom level is changed or the chart is panned, the event is output to the console.

Series Events Copy Link

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.

seriesNodeClick and seriesNodeDoubleClick Copy Link

In this example:

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

Legend Events Copy Link

legendItemClick and legendItemDoubleClick Copy Link

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 }) => {
                console.log(`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 Copy Link

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 Copy Link

By default, the seriesNodeClick 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.

Item Identifiers Copy Link

Many events expose an itemId to identify the item within its series. How it is derived depends on the item type:

  • Series nodes use a node identifier.
    • Automatically generated from the data, and may change when the data updates.
    • Set dataIdKey to use a datum field as a stable identifier across data updates (see Identifying Items by Key).
    • Series whose nodes don't map directly to a datum - such as Histogram bins and Sankey or Chord nodes - expose a getItemId callback instead.
    • Waterfall total and subtotal bars use their totals.itemId if set, otherwise their totals.axisLabel.
  • Legend items use the legend item's identifier. Typically the yKey value for most series, or the legend item's position for series with one legend item per datum, such as pie and donut.

API Reference Copy Link

All series event options have similar interface contracts. See the series-specific documentation for variations.