Results:
Loading...
Framework:Javascript Data GridReact Data GridAngular Data GridVue Data Grid

JavaScript Charts: Events

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

Series Event - nodeClick

Fired when this series' node is clicked. 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. A node is typically associated with a single element from the data or series[].data array, unless the node represents an aggregation of values (e.g. histogram series bins).

Every nodeClick event contains:

  • 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

Example: nodeClick Event

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.

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.formatter:

  • Clicking a series marker toggles its rendering.

Interfaces

All series event options have the same interface contract.

Properties available on the AgSeriesListeners<DatumType> interface.

nodeClick
Function
The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is clicked. 
nodeClick = (
    params: AgSeriesNodeClickParams<DatumType>
) => void;

interface AgSeriesNodeClickParams<DatumType> {
  // Event type. 
  type: 'nodeClick';
  // Series ID, as specified in series.id (or generated if not specified) 
  seriesId: string;
  // Datum from the series data array. 
  datum: DatumType;
  // xKey as specified on series options 
  xKey?: string;
  // yKey as specified on series options 
  yKey?: string;
  // sizeKey as specified on series options 
  sizeKey?: string;
  // labelKey as specified on series options 
  labelKey?: string;
  // colorKey as specified on series options 
  colorKey?: string;
  // angleKey as specified on series options 
  angleKey?: string;
  // calloutLabelKey as specified on series options 
  calloutLabelKey?: string;
  // sectorLabelKey as specified on series options 
  sectorLabelKey?: string;
  // radiusKey as specified on series options 
  radiusKey?: string;
}

Histogram series

Unlike other series, the nodeClick event datum parameter for Histogram series contains a model for the computed histogram bin:

Properties available on the AgHistogramBinDatum<DatumType> interface.

data
DatumType[]
DatumType[]
aggregatedValue
number
number
frequency
number
number
domain
[number, number]
[ number, number ]

Chart Event - seriesNodeClick

The seriesNodeClick event can be used to listen to nodeClick events of all series at once.

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

Example: seriesNodeClick Event

This example demonstrates:

  • 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.

Legend Event - legendItemClick

The legendItemClick event can be used to listen to legend item clicks.

Example: legendItemClick Event

This example demonstrates:

  • when a legend item is clicked, an alert message is shown with the legendItemClick event contents.