This section explains how to listen and respond to various chart and series events.
This example shows how the
nodeClick event listener can be used to listen to column clicks.
Notice the following:
- Whenever a column is clicked, an alert message is shown with information about that column.
- The event listener pulls extra information from the object containing the column's value and shows it in the alert dialog as well. In this case the breakdown of sales numbers by brand name.
Fired when this series' node is clicked. Depending on the type of series, a node can mean a bar or a pie slice, or a marker, such as a line or an area series marker.
A node is typically associated with a single element from the
array, unless the node represents an aggregation of values, as is the case with histogram series bins.
Each series fires its own version of the
nodeClick event, as described below.
But generally speaking every
nodeClick event contains:
seriesthe node belongs to
- the piece of chart data or
- the specific keys in that
datumthat were used to fetch the values represented by the clicked node
Note that the
datum object is untyped and can contain keys that are not plotted by
the chart, and that you can access in the event listener when a node is clicked.
|The listener to call when a bar/column node is clicked.|
|The listener to call when a line series node (marker) is clicked.|
|The listener to call when a scatter series node (marker) is clicked.|
|The listener to call when a pie slice is clicked.|
|The listener to call when a histogram bar is clicked.|
Note that the
datum in this case is not an element from the
series.data array provided by the user. It's a histogram bin, which represents
an aggregated value of one or more
datums, where the datums themselves can be
accessed via the
For example, to get all x values used by the bin, one could so the following:
This example shows how to listen to
nodeClick events of all series at once by subscribing
to the chart's
In this case, instead of adding the
nodeClick event to both line and column series individually,
we listen to the
seriesNodeClick event on the chart. Notice the following:
- 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.
Fired when a node of any series in the chart is clicked. In case a chart has multiple series, it can be handy to be able to provide a single listener that will be called when a node is clicked in any of them.
In this case the contents of the event object passed to the listener will depend on the type of series the clicked node belongs to.