---
product: "AG Charts"
title: "Events"
description: "Listen and respond to React Chart events. Handle clicks on series nodes, legend items, axes, Cross Lines and captions, or react to state changes such as series visibility, selection and zoom."
framework: react
version: "14.2.0"
llms: "https://www.ag-grid.com/charts/archive/14.2.0/llms.txt"
---

# Events

This section explains how to listen and respond to various chart and series events. Most are either clicks or state changes, and listeners live in a `listeners` option, either on the chart or on individual elements.

## Click Events

Each clickable part of the chart has its own click event, these are detailed below. Listen on the chart for every occurrence, or on an individual element for just that one.

Every click event has a double-click form which carries the same payload. A double-click fires the single-click event on both clicks, then the double-click event on the second.

Some clicks can also be stopped from applying their built-in behaviour - see [Prevent Default](https://www.ag-grid.com/charts/archive/14.2.0/react/events/#prevent-default).

## click and doubleClick

These are fired on click or double-click on any empty part of the chart.

These events contain:

- `coordinates` - for cartesian series types, the coordinates of the click point as plotted against each axis.
- These are keyed by axis, with each axis providing `direction`, the `value` at the clicked position and its `index` within the axis `domain`.
- The [`context`](https://www.ag-grid.com/charts/archive/14.2.0/react/context/) object, if set.

#### Chart Single & Double Click Events

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartClickEvent,
  AgChartDoubleClickEvent,
  AgChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Number of Cars Sold",
    },
    subtitle: {
      text: "(single or double click empty space outside bars)",
    },
    data: [
      { month: "March", units: 25, brands: { BMW: 10, Toyota: 15 } },
      { month: "April", units: 27, brands: { Ford: 17, BMW: 10 } },
      { month: "May", units: 42, brands: { Nissan: 20, Toyota: 22 } },
    ],
    series: [
      {
        type: "bar",
        xKey: "month",
        yKey: "units",
      },
    ],
    listeners: {
      click: (event: AgChartClickEvent) => {
        console.log("[click]", event);
      },
      doubleClick: (event: AgChartDoubleClickEvent) => {
        console.log("[double click]", event);
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Chart Single & Double Click Events](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/events/examples/chart-click-event/)

```js
{
    listeners: {
        click: (event) => {
            console.log('[click]', event);
        },
        doubleClick: (event) => {
            console.log('[double click]', event);
        },
    },
}
```

In this example:

- When a blank area on a chart is clicked, a message is shown in the console along with the event details.
- When a blank area on a chart is double-clicked, a different message is shown along with the event details. The single-click event is also fired on both clicks.

## seriesNodeClick and seriesNodeDoubleClick

These are fired on click or double-click of a series node such as a bar or marker and are defined on the series or chart options.

The parameters of these events differ depending on the series type, but always include:

- The `seriesId` the node belongs to and the [`itemId`](https://www.ag-grid.com/charts/archive/14.2.0/react/events/#item-identifiers) of the clicked node.
- The data object being visualised, usually `datum`.
- The specific keys in that `datum` that were used to fetch the values represented by the clicked node.
- `allMatchedParams` - every other node matched at the click point. See [allMatchedParams](https://www.ag-grid.com/charts/archive/14.2.0/react/events/#allmatchedparams).
- `coordinates` - the coordinates of the click point, in the same form as the [chart click](https://www.ag-grid.com/charts/archive/14.2.0/react/events/#click-and-doubleclick) events.
- The [`context`](https://www.ag-grid.com/charts/archive/14.2.0/react/context/) object, if set.

#### Node Click Event

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { DataType, getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LineSeriesModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions<DataType>>({
    title: {
      text: "Average low/high temperatures in London",
    },
    subtitle: {
      text: "(click a data point for details)",
    },
    data: getData(),
    legend: {
      enabled: false,
    },
    series: [
      {
        type: "line",
        xKey: "month",
        yKey: "high",
        listeners: {
          seriesNodeClick: (event) => console.log("[line click]", event),
          seriesNodeDoubleClick: (event) =>
            console.log("[line double click]", event),
        },
      },
      {
        type: "bar",
        xKey: "month",
        yKey: "low",
        listeners: {
          seriesNodeClick: (event) => console.log("[bar click]", event),
          seriesNodeDoubleClick: (event) =>
            console.log("[bar double click]", event),
        },
      },
    ],
    listeners: {
      seriesNodeClick: (event) => console.log("[chart click]", event),
      seriesNodeDoubleClick: (event) =>
        console.log("[chart double click]", event),
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Node Click Event](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/events/examples/series-node-click-event/)

```js
{
    series: [
        {
            type: 'line',
            listeners: {
                seriesNodeClick: (event) => console.log('[line click]', event),
                seriesNodeDoubleClick: (event) => console.log('[line double click]', event),
            },
            // ...
        },
        {
            type: 'bar',
            listeners: {
                seriesNodeClick: (event) => console.log('[bar click]', event),
                seriesNodeDoubleClick: (event) => console.log('[bar double click]', event),
            },
            // ...
        },
    ],
    listeners: {
        seriesNodeClick: (event) => console.log('[chart click]', event),
        seriesNodeDoubleClick: (event) => console.log('[chart double click]', event),
    },
}
```

In this example:

- Whenever any series node (bar or marker) is clicked or double-clicked, the Chart listener prints a message to the console with the event details.
- Whenever a bar is clicked or double-clicked, the Bar Series listener prints a message to the console with the event details.
- Whenever a marker is clicked or double-clicked, the Line Series listener prints a message to the console with the event details.

### Interaction Ranges

By default, the `seriesNodeClick` event is only triggered when the user clicks exactly on a node.

Use the `nodeClickRange` option to instead define a range at which the event is triggered.

#### Interaction Ranges

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { DataType, getData } from "./data";
import clone from "clone";

ModuleRegistry.registerModules([
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions<DataType>>({
    data: getData(),
    series: [
      {
        type: "line",
        xKey: "quarter",
        yKey: "petrol",
        nodeClickRange: "exact",
        listeners: {
          seriesNodeClick: ({ datum }) =>
            console.log(`petrol - ${datum.petrol}`),
        },
      },
      {
        type: "line",
        xKey: "quarter",
        yKey: "diesel",
        nodeClickRange: "exact",
        listeners: {
          seriesNodeClick: ({ datum }) =>
            console.log(`diesel - ${datum.diesel}`),
        },
      },
    ],
  });

  const nodeClickRangeChange = (event: Event) => {
    const nextOptions = clone(options);

    const value = (event.target as HTMLInputElement).value;
    const nodeClickRange =
      value === "distance" ? 10 : (value as "exact" | "nearest");
    nextOptions.series = nextOptions.series!.map((series) => ({
      ...series,
      nodeClickRange,
    }));

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <div
            className="button-group"
            role="group"
            aria-label="Node Click Range"
          >
            <input
              type="radio"
              id="range-exact"
              name="node-click-range"
              defaultValue="exact"
              defaultChecked
              onChange={(event) => nodeClickRangeChange(event)}
            />
            <label htmlFor="range-exact">Exact (Default)</label>
            <input
              type="radio"
              id="range-nearest"
              name="node-click-range"
              defaultValue="nearest"
              onChange={(event) => nodeClickRangeChange(event)}
            />
            <label htmlFor="range-nearest">Nearest</label>
            <input
              type="radio"
              id="range-distance"
              name="node-click-range"
              defaultValue="distance"
              onChange={(event) => nodeClickRangeChange(event)}
            />
            <label htmlFor="range-distance">Distance (10 Pixels)</label>
          </div>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Interaction Ranges](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/events/examples/interaction-ranges/)

```js
{
    series: [
        {
            type: 'line',
            nodeClickRange: 'exact',
            listeners: {
                seriesNodeClick: ({ datum }) => console.log(`petrol - ${datum.petrol}`),
            },
            // ...
        },
    ],
}
```

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.
- [Area Series](https://www.ag-grid.com/charts/archive/14.2.0/react/area-series/) also supports `'area'` as a value for `nodeClickRange`. This triggers the event when the click is made anywhere within the filled area of the series.

## axisClick and axisDoubleClick  (Enterprise)

These are fired on click or double-click of an axis area or any of its elements and are defined on the axes or chart options.

These events contain:

- The `axisId` of the axis, as specified on the axis or automatically generated.
- The `direction` of the axis.
- The `value` on the axis at the clicked point, matching the [axis type](https://www.ag-grid.com/charts/archive/14.2.0/react/axes-types/), along with its `index` in the axis `domain`.
- The `boundSeries` listing all series that are using the axis.
- The [`context`](https://www.ag-grid.com/charts/archive/14.2.0/react/context/) object, if set.

#### Axis Click Event

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { DataType, getData } from "./data";

ModuleRegistry.registerModules([
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  UnitTimeAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions<DataType>>({
    title: {
      text: "Wedding Dress Orders, Sales and Profit",
    },
    subtitle: {
      text: "Monthly performance of a wedding dress collection",
    },
    data: getData(),
    axes: {
      x: {
        type: "unit-time",
        position: "bottom",
        listeners: {
          click: (event) => console.log("[x axis click]", event),
          doubleClick: (event) => console.log("[x axis double click]", event),
        },
      },
      yProfit: {
        type: "number",
        position: "left",
        title: {
          text: "Profit",
        },
        listeners: {
          click: (event) => console.log("[profit axis click]", event),
          doubleClick: (event) =>
            console.log("[profit axis double click]", event),
        },
      },
      ySales: {
        type: "number",
        position: "right",
        title: {
          text: "Sales",
        },
      },
      yOrders: {
        type: "number",
        position: "right",
        title: {
          text: "Orders",
        },
      },
    },
    series: [
      {
        type: "line",
        xKey: "month",
        yKey: "profit",
        yName: "Profit",
        yKeyAxis: "yProfit",
      },
      {
        type: "line",
        xKey: "month",
        yKey: "orders",
        yName: "Orders",
        yKeyAxis: "yOrders",
      },
      {
        type: "line",
        xKey: "month",
        yKey: "sales",
        yName: "Sales",
        yKeyAxis: "ySales",
      },
    ],
    listeners: {
      axisClick: (event) => console.log("[chart axis click]", event),
      axisDoubleClick: (event) =>
        console.log("[chart axis double click]", event),
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Axis Click Event](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/events/examples/axis-click-event/)

```js
{
    axes: {
        x: {
            listeners: {
                click: (event) => console.log('[x axis click]', event),
                doubleClick: (event) => console.log('[x axis double click]', event),
            },
            // ...
        },
        yProfit: {
            listeners: {
                click: (event) => console.log('[profit axis click]', event),
                doubleClick: (event) => console.log('[profit axis double click]', event),
            },
            // ...
        },
    },
    listeners: {
        axisClick: (event) => console.log('[chart axis click]', event),
        axisDoubleClick: (event) => console.log('[chart axis double click]', event),
    },
}
```

In this example:

- Whenever the x-axis is clicked or double-clicked, the x-axis listener prints a message to the console.
- Whenever the left hand "Profit" axis is clicked or double-clicked, the `yProfit` Axis listener prints a message to the console.
- Whenever any x-axis or y-axis is clicked or double-clicked, the Chart listener prints a message to the console.

## crossLineClick and crossLineDoubleClick

These are fired on click or double-click of a [Cross Line](https://www.ag-grid.com/charts/archive/14.2.0/react/axes-cross-lines/), including its label. This can be defined on the Cross Line itself, the axis or the chart.

These events contain:

- The `crossLineId`, as specified on the Cross Line or automatically generated.
- The `axisId` and `direction` of the axis the Cross Line belongs to.
- The `crossLineType`, either `'line'` or `'range'`.
- The `value` of a `line` Cross Line, or the `range` of a `range` Cross Line.
- `allMatchedParams` - every element under the click point, including other Cross Lines or series node. See [allMatchedParams](https://www.ag-grid.com/charts/archive/14.2.0/react/events/#allmatchedparams).
- The [`context`](https://www.ag-grid.com/charts/archive/14.2.0/react/context/) object, if set.

#### Cross Line Click Event

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgCrossLineListeners,
  AreaSeriesModule,
  CrossLinesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-community";
import { DataType, getData } from "./data";

const lockdownLabelStyle = { fontStyle: "italic", position: "bottom" } as const;
const variantLineStyle = { strokeWidth: 2, lineDash: [6, 4] };
const variantLabelStyle = { position: "top" } as const;
const lockdownListeners: AgCrossLineListeners = {
  click: (event) => console.log("[lockdown click]", event),
  doubleClick: (event) => console.log("[lockdown double click]", event),
};
ModuleRegistry.registerModules([
  AreaSeriesModule,
  CrossLinesModule,
  LegendModule,
  NumberAxisModule,
  UnitTimeAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions<DataType>>({
    title: {
      text: "COVID-19 ICU Bed Usage",
    },
    subtitle: {
      text: "Monthly peak ICU occupancy",
    },
    data: getData(),
    axes: {
      x: {
        type: "unit-time",
        position: "bottom",
        label: {
          spacing: 25,
        },
        crossLines: [
          {
            id: "first-lockdown",
            type: "range",
            range: [new Date(2020, 2, 23), new Date(2020, 5, 1)],
            label: {
              text: "First lockdown",
              ...lockdownLabelStyle,
            },
            listeners: lockdownListeners,
          },
          {
            id: "winter-lockdown",
            type: "range",
            range: [new Date(2020, 10, 5), new Date(2021, 1, 15)],
            label: {
              text: "Winter lockdown",
              ...lockdownLabelStyle,
            },
            listeners: lockdownListeners,
          },
          {
            id: "soft-lockdown",
            type: "range",
            range: [new Date(2021, 11, 20), new Date(2022, 1, 15)],
            label: {
              text: "Soft lockdown",
              ...lockdownLabelStyle,
            },
            listeners: lockdownListeners,
          },
          {
            id: "alpha-variant",
            type: "line",
            value: new Date(2020, 11, 1),
            ...variantLineStyle,
            label: {
              text: "Alpha",
              ...variantLabelStyle,
            },
          },
          {
            id: "delta-variant",
            type: "line",
            value: new Date(2021, 6, 1),
            ...variantLineStyle,
            label: {
              text: "Delta",
              ...variantLabelStyle,
            },
          },
          {
            id: "omicron-variant",
            type: "line",
            value: new Date(2021, 10, 1),
            ...variantLineStyle,
            label: {
              text: "Omicron",
              ...variantLabelStyle,
            },
          },
        ],
        listeners: {
          crossLineClick: (event) =>
            console.log("[x axis cross line click]", event),
          crossLineDoubleClick: (event) =>
            console.log("[x axis cross line double click]", event),
        },
      },
      y: {
        type: "number",
        position: "left",
        title: {
          text: "ICU beds occupied",
        },
        crossLines: [
          {
            id: "icu-capacity",
            type: "line",
            value: 700,
            strokeWidth: 2,
            lineDash: [8, 4],
            label: {
              text: "ICU capacity (700 beds)",
              position: "top-right",
            },
            listeners: {
              click: (event) => console.log("[capacity click]", event),
              doubleClick: (event) =>
                console.log("[capacity double click]", event),
            },
          },
        ],
      },
    },
    series: [
      {
        type: "area",
        xKey: "month",
        yKey: "maxICU",
        yName: "ICU beds occupied",
        strokeWidth: 1,
        fillOpacity: 0.5,
      },
    ],
    listeners: {
      crossLineClick: (event) => console.log("[chart cross line click]", event),
      crossLineDoubleClick: (event) =>
        console.log("[chart cross line double click]", event),
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Cross Line Click Event](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/events/examples/cross-line-click-event/)

```js
{
    axes: {
        x: {
            crossLines: [
                {
                    id: 'winter-lockdown',
                    listeners: {
                        click: (event) => console.log('[lockdown click]', event),
                        doubleClick: (event) => console.log('[lockdown double click]', event),
                    },
                    // ...
                },
            ],
            listeners: {
                crossLineClick: (event) => console.log('[x axis cross line click]', event),
                crossLineDoubleClick: (event) => console.log('[x axis cross line double click]', event),
            },
            // ...
        },
    },
    listeners: {
        crossLineClick: (event) => console.log('[chart cross line click]', event),
        crossLineDoubleClick: (event) => console.log('[chart cross line double click]', event),
    },
}
```

In this example:

- Whenever a lockdown range or the ICU capacity line is clicked or double-clicked, that Cross Line's own listener prints a message to the console.
- Whenever a Cross Line on the x-axis is clicked or double-clicked, the x-axis listener prints a message to the console.
- Whenever any Cross Line is clicked or double-clicked, the Chart listener prints a message to the console.
- Clicking where a variant line crosses a lockdown range, lists both Cross Lines in `allMatchedParams`.

## 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`](https://www.ag-grid.com/charts/archive/14.2.0/react/events/#item-identifiers), usually the `yKey` value for cartesian series.
- The current `visible` state of the series or item.
- The [`preventDefault()`](https://www.ag-grid.com/charts/archive/14.2.0/react/events/#prevent-default) method to stop any built-in series visibility toggle that would otherwise occur.
- The [`context`](https://www.ag-grid.com/charts/archive/14.2.0/react/context/) object, if set.

> **Note**
>
> Although clicking a legend item usually toggles the series visibility, this change is not included in the legend event. Use the chart [seriesVisibilityChange](https://www.ag-grid.com/charts/archive/14.2.0/react/events/#seriesvisibilitychange) event to listen for this.

#### Legend Item Click Event

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgChartLegendClickEvent,
  AgChartLegendDoubleClickEvent,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

ModuleRegistry.registerModules([
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: [
      {
        quarter: "Q1",
        petrol: 200,
        diesel: 100,
      },
      {
        quarter: "Q2",
        petrol: 300,
        diesel: 130,
      },
      {
        quarter: "Q3",
        petrol: 350,
        diesel: 160,
      },
      {
        quarter: "Q4",
        petrol: 400,
        diesel: 200,
      },
    ],
    series: [
      {
        type: "line",
        xKey: "quarter",
        yKey: "petrol",
      },
      {
        type: "line",
        xKey: "quarter",
        yKey: "diesel",
      },
    ],
    legend: {
      listeners: {
        legendItemClick: (event: AgChartLegendClickEvent) => {
          console.log("[click]", event);
        },
        legendItemDoubleClick: (event: AgChartLegendDoubleClickEvent) => {
          console.log("[double click]", event);
        },
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Legend Item Click Event](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/events/examples/legend-item-click-event/)

```js
{
    legend: {
        listeners: {
            legendItemClick: (event) => {
                console.log('[click]', event);
            },
            legendItemDoubleClick: (event) => {
                console.log('[double click]', event);
            },
        },
    },
}
```

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.

## captionClick and captionDoubleClick

These are fired on click or double-click of the chart's `title`, `subtitle` or `footnote`. These are defined on the caption itself or on the chart.

These events contain:

- The `captionType`, either `'title'`, `'subtitle'` or `'footnote'`.
- The `text` of the clicked caption.
- The [`context`](https://www.ag-grid.com/charts/archive/14.2.0/react/context/) object, if set.

#### Caption Click Event

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCaptionClickEvent,
  AgChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Number of Cars Sold",
      listeners: {
        click: (event: AgCaptionClickEvent<"click">) => {
          console.log("[title click]", event);
        },
        doubleClick: (event: AgCaptionClickEvent<"doubleClick">) => {
          console.log("[title double click]", event);
        },
      },
    },
    subtitle: {
      text: "(single or double click the title, subtitle or footnote)",
    },
    footnote: {
      text: "Source: Internal sales data",
    },
    data: [
      { month: "March", units: 25 },
      { month: "April", units: 27 },
      { month: "May", units: 42 },
    ],
    series: [
      {
        type: "bar",
        xKey: "month",
        yKey: "units",
      },
    ],
    listeners: {
      captionClick: (event) => console.log("[chart caption click]", event),
      captionDoubleClick: (event) =>
        console.log("[chart caption double click]", event),
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Caption Click Event](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/events/examples/caption-click-event/)

```js
{
    title: {
        text: 'Number of Cars Sold',
        listeners: {
            click: (event) => console.log('[title click]', event),
            doubleClick: (event) => console.log('[title double click]', event),
        },
    },
    // ...
    listeners: {
        captionClick: (event) => console.log('[chart caption click]', event),
        captionDoubleClick: (event) => console.log('[chart caption double click]', event),
    },
}
```

In this example:

- Whenever the title, subtitle or footnote is clicked or double-clicked, the Chart listener prints a message to the console with the event details.
- The title has its own listeners, so clicking or double-clicking on it prints a second message.

## allMatchedParams

Most click events include an `allMatchedParams` array listing every element found at the click point, not only the one that won the event. This is useful for scenarios where multiple elements overlap, such as a Cross Line and a series node.

Each entry is identified by its own `type`, matching the specific event it would have delivered for that interaction and includes the same properties as it would have carried. The winning event is also included in the array.

See the [Cross Line Click Event](https://www.ag-grid.com/charts/archive/14.2.0/react/events/#crosslineclick-and-crosslinedoubleclick) example above: clicking where a variant line crosses a lockdown range lists both Cross Lines in `allMatchedParams`.

## State Change Events

These are raised when the [chart state](https://www.ag-grid.com/charts/archive/14.2.0/react/api-state/) changes, by either user interaction or an API call and are always defined on the chart options.

### 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`](https://www.ag-grid.com/charts/archive/14.2.0/react/events/#item-identifiers), `legendItemName` or other identifiers of the changed item.
- `visible` - the new visibility state of the series or item.
- The [`context`](https://www.ag-grid.com/charts/archive/14.2.0/react/context/) object, if set.

#### Series Visibility Changed

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgPolarChartOptions,
  AgSeriesVisibilityChange,
  LegendModule,
  ModuleRegistry,
  PieSeriesModule,
} from "ag-charts-community";

ModuleRegistry.registerModules([LegendModule, PieSeriesModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgPolarChartOptions>({
    title: { text: "Business Expense Distribution" },
    data: [
      { expense: "Salaries", percentage: 40 },
      { expense: "Office Rent", percentage: 20 },
      { expense: "Marketing", percentage: 15 },
      { expense: "Research & Development", percentage: 10 },
      { expense: "Utilities & Miscellaneous", percentage: 10 },
      { expense: "Travel", percentage: 5 },
    ],
    series: [{ type: "pie", angleKey: "percentage", legendItemKey: "expense" }],
    listeners: {
      seriesVisibilityChange: (event: AgSeriesVisibilityChange) => {
        console.log("[series visibility change]", event);
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Series Visibility Changed](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/events/examples/series-visibility-change/)

```js
{
    listeners: {
        seriesVisibilityChange: (event) => {
            console.log('[series visibility change]', event);
        },
    },
}
```

In this example:

- When a legend item is clicked, its series or item visibility toggles and this event fires with the details shown in the console.

### activeChange

This event is fired when the [active](https://www.ag-grid.com/charts/archive/14.2.0/react/api-state/#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.

This 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`](https://www.ag-grid.com/charts/archive/14.2.0/react/events/#item-identifiers) 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'`.
- The [`preventDefault()`](https://www.ag-grid.com/charts/archive/14.2.0/react/events/#prevent-default) method to stop the highlight/tooltip change that would otherwise occur.
- The [`context`](https://www.ag-grid.com/charts/archive/14.2.0/react/context/) object, if set.

#### Active Change Event

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgActiveChangeEvent,
  AgChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  LegendModule,
  CategoryAxisModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Energy Production by Source & Country",
    },
    subtitle: {
      text: "Energy Production (TWh)",
    },
    data: getData(),
    series: [
      {
        type: "bar",
        direction: "horizontal",
        xKey: "year",
        yKey: "USACoal",
        yName: "Coal - USA",
        legendItemName: "Coal",
        stackGroup: "usa",
        fill: "#5b5b5b",
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "year",
        yKey: "USAGas",
        yName: "Natural Gas - USA",
        legendItemName: "Natural Gas",
        stackGroup: "usa",
        fill: "#f2a541",
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "year",
        yKey: "USARenewables",
        yName: "Renewables - USA",
        legendItemName: "Renewables",
        stackGroup: "usa",
        fill: "#4caf50",
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "year",
        yKey: "USANuclear",
        yName: "Nuclear - USA",
        legendItemName: "Nuclear",
        stackGroup: "usa",
        fill: "#6f7bd9",
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "year",
        yKey: "GermanyCoal",
        yName: "Coal - Germany",
        legendItemName: "Coal",
        stackGroup: "germany",
        showInLegend: false,
        fill: "#5b5b5b",
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "year",
        yKey: "GermanyGas",
        yName: "Natural Gas - Germany",
        legendItemName: "Natural Gas",
        stackGroup: "germany",
        showInLegend: false,
        fill: "#f2a541",
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "year",
        yKey: "GermanyRenewables",
        yName: "Renewables - Germany",
        legendItemName: "Renewables",
        stackGroup: "germany",
        showInLegend: false,
        fill: "#4caf50",
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "year",
        yKey: "GermanyNuclear",
        yName: "Nuclear - Germany",
        legendItemName: "Nuclear",
        stackGroup: "germany",
        showInLegend: false,
        fill: "#6f7bd9",
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "year",
        yKey: "ChinaCoal",
        yName: "Coal - China",
        legendItemName: "Coal",
        stackGroup: "china",
        showInLegend: false,
        fill: "#5b5b5b",
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "year",
        yKey: "ChinaGas",
        yName: "Natural Gas - China",
        legendItemName: "Natural Gas",
        stackGroup: "china",
        showInLegend: false,
        fill: "#f2a541",
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "year",
        yKey: "ChinaRenewables",
        yName: "Renewables - China",
        legendItemName: "Renewables",
        stackGroup: "china",
        showInLegend: false,
        fill: "#4caf50",
      },
      {
        type: "bar",
        direction: "horizontal",
        xKey: "year",
        yKey: "ChinaNuclear",
        yName: "Nuclear - China",
        legendItemName: "Nuclear",
        stackGroup: "china",
        showInLegend: false,
        fill: "#6f7bd9",
      },
    ],
    listeners: {
      activeChange: (event: AgActiveChangeEvent<unknown, unknown>) => {
        console.log("[active change]", event);
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Active Change Event](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/events/examples/active-change-event/)

```js
{
    listeners: {
        activeChange: (event) => {
            console.log('[active change]', event);
        },
    },
}
```

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.

### zoom

This is fired when the zoom level or position changes. This is triggered when [zooming in or out of the chart](https://www.ag-grid.com/charts/archive/14.2.0/react/zoom/), [panning](https://www.ag-grid.com/charts/archive/14.2.0/react/zoom/#panning), or using the [Navigator](https://www.ag-grid.com/charts/archive/14.2.0/react/navigator/), [Scrollbar](https://www.ag-grid.com/charts/archive/14.2.0/react/scrollbar/) or [Range Buttons](https://www.ag-grid.com/charts/archive/14.2.0/react/range-buttons/).

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.
- A `rangeX` and `rangeY` which contain values that match the [axis type](https://www.ag-grid.com/charts/archive/14.2.0/react/axes-types/), e.g. a date for an [Ordinal Time Axis](https://www.ag-grid.com/charts/archive/14.2.0/react/axes-types/#time).
- `source` - the source of the event: `'user-interaction'`, `'state-change'`, `'chart-update'`, `'data-update'` or `'sync'`.
- The [`context`](https://www.ag-grid.com/charts/archive/14.2.0/react/context/) object, if set.

#### Zoom

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AnimationModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  ZoomModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    title: {
      text: "2023 Average Temperatures",
    },
    subtitle: {
      text: "Oxford, UK",
    },
    zoom: {
      enabled: true,
      anchorPointX: "pointer",
    },
    listeners: {
      zoom: (event) => {
        console.log(event);
      },
    },
    data: getData(),
    series: [
      {
        type: "line",
        xKey: "month",
        xName: "Month",
        yKey: "min",
        yName: "Min Temperature",
        interpolation: { type: "smooth" },
      },
      {
        type: "line",
        xKey: "month",
        xName: "Month",
        yKey: "max",
        yName: "Max Temperature",
        interpolation: { type: "smooth" },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Zoom](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/events/examples/zoom-event/)

```js
{
    listeners: {
        zoom: (event) => {
            console.log(event);
        },
    },
}
```

In this example:

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

### annotations

This is fired when the [annotations](https://www.ag-grid.com/charts/archive/14.2.0/react/annotations/) are changed, added or removed in either cartesian charts or with the [financial charts toolbar](https://www.ag-grid.com/charts/archive/14.2.0/react/financial-charts-toolbar/).

This event contains:

- The array of all the `annotations` with their current state.
- The [`context`](https://www.ag-grid.com/charts/archive/14.2.0/react/context/) object, if set.

#### Annotations

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  AnnotationsModule,
  CategoryAxisModule,
  ChartToolbarModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  AnnotationsModule,
  CategoryAxisModule,
  ChartToolbarModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: getData(),
    title: {
      text: "Monthly Sales Revenue",
    },
    footnote: {
      text: "2024, values in $1000s",
    },
    series: [
      {
        type: "line",
        xKey: "month",
        yKey: "revenue",
        interpolation: { type: "smooth" },
        marker: {
          enabled: false,
        },
      },
    ],
    listeners: {
      annotations: (event) => {
        console.log(event);
      },
    },
    annotations: {
      enabled: true,
      toolbar: {
        buttons: [
          {
            icon: "delete",
            value: "clear",
          },
          {
            icon: "text-annotation",
            value: "text-menu",
          },
        ],
      },
    },
    initialState: {
      annotations: [
        {
          type: "comment",
          x: { value: "Feb", groupPercentage: -0.2 },
          y: 46,
          text: "$45,000",
          fontSize: 12,
        },
        {
          type: "text",
          x: { value: "Jun", groupPercentage: -0.2 },
          y: 81,
          text: "$80,000",
          fontSize: 12,
        },
        {
          type: "note",
          x: "Sep",
          y: 75,
          text: "End of summer dip recovered",
          fontSize: 12,
        },
        {
          type: "callout",
          start: { x: { value: "Dec", groupPercentage: -0.1 }, y: 107 },
          end: { x: "Oct", y: 110 },
          text: "$95,000",
          fontSize: 12,
        },
      ],
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Annotations](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/events/examples/annotations-event/)

```js
{
    listeners: {
        annotations: (event) => {
            console.log(event);
        },
    },
}
```

In this example:

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

### selectionChange

This is fired when the [Data Selection](https://www.ag-grid.com/charts/archive/14.2.0/react/selection/) is updated by either user interaction or an API call. See [Selection Change Event](https://www.ag-grid.com/charts/archive/14.2.0/react/selection/#selection-change-event) for full details.

### collapsedChange

This is fired when an item in an [Org Chart](https://www.ag-grid.com/charts/archive/14.2.0/react/org-chart/) is expanded or collapsed, by either user interaction or an API call.

#### Collapsed Change Event

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  ContextMenuModule,
  ModuleRegistry,
  OrganizationSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([OrganizationSeriesModule, ContextMenuModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    title: {
      text: "Company Organisation",
    },
    data: getData(),
    listeners: {
      collapsedChange: (event) => {
        console.log(
          `source: ${event.source},`,
          "just collapsed:",
          event.collapsed.map(({ itemId }) => itemId),
          "just expanded:",
          event.expanded.map(({ itemId }) => itemId),
        );
      },
    },
    initialState: {
      collapsed: [
        "Mr. Jeffrey Brown",
        "Nathan Jones",
        "Justin Contreras",
        "Lawrence Martinez",
        "Eric Jensen",
      ],
    },
    series: [
      {
        type: "organization",
        idKey: "id",
        parentIdKey: "parentId",
        node: {
          image: {
            key: "avatar",
            height: 50,
            width: 50,
            position: "left",
          },
          title: { key: "name" },
          subtitle: { key: "job" },
          labels: [{ key: "location" }],
        },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Collapsed Change Event](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/events/examples/collapsed-change-event/)

```js
{
    listeners: {
        collapsedChange: (event) => {
            console.log(
                `source: ${event.source},`,
                'just collapsed:',
                event.collapsed.map(({ itemId }) => itemId),
                'just expanded:',
                event.expanded.map(({ itemId }) => itemId)
            );
        },
    },
}
```

This event contains:

- `collapsed` - array of the items newly collapsed by this change, each with `itemId` and `datum`:
  - [`itemId`](https://www.ag-grid.com/charts/archive/14.2.0/react/events/#item-identifiers) - 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`](https://www.ag-grid.com/charts/archive/14.2.0/react/events/#item-identifiers) - 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'`.
- The [`context`](https://www.ag-grid.com/charts/archive/14.2.0/react/context/) object, if set.

In this example:

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

> **Note**
>
> `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.

## Validation Issues

Option misconfiguration and caught runtime errors are reported through the `validations.issueRaised` event.

See [Issue Raised Events](https://www.ag-grid.com/charts/archive/14.2.0/react/dev-validation/#issue-raised-events).

## Prevent Default

Some events include a `preventDefault()` method to stop the built-in behaviour that would otherwise follow the interaction.

Call `event.preventDefault()` from within the listener, and check `event.defaultPrevented` to see whether an earlier listener already called it.

The events that can be prevented are:

- `legendItemClick` and `legendItemDoubleClick` - stops the [series visibility toggle](https://www.ag-grid.com/charts/archive/14.2.0/react/events/#seriesvisibilitychange) that a legend click would otherwise trigger.
- `seriesNodeClick`, `seriesNodeDoubleClick` - stops any [tooltip pagination](https://www.ag-grid.com/charts/archive/14.2.0/react/tooltips/#tooltip-pagination) or [selection](https://www.ag-grid.com/charts/archive/14.2.0/react/selection/) that a node click would otherwise trigger.
- `activeChange` - stops the highlight/tooltip change itself from being applied.
- `selectionChange` - stops the [Data Selection](https://www.ag-grid.com/charts/archive/14.2.0/react/selection/) update.
- `collapsedChange` - stops the [Org Chart](https://www.ag-grid.com/charts/archive/14.2.0/react/org-chart/) node from expanding or collapsing.

#### Prevent Default

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgChartLegendClickEvent,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

let counter = 1;
ModuleRegistry.registerModules([
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    data: [
      {
        quarter: "Q1",
        petrol: 200,
        diesel: 100,
      },
      {
        quarter: "Q2",
        petrol: 300,
        diesel: 130,
      },
      {
        quarter: "Q3",
        petrol: 350,
        diesel: 160,
      },
      {
        quarter: "Q4",
        petrol: 400,
        diesel: 200,
      },
    ],
    series: [
      {
        type: "line",
        xKey: "quarter",
        yKey: "petrol",
      },
      {
        type: "line",
        xKey: "quarter",
        yKey: "diesel",
      },
    ],
    legend: {
      listeners: {
        legendItemClick: (event: AgChartLegendClickEvent) => {
          counter = (counter + 1) % 2;
          document.getElementById("myCounter")!.textContent = `${counter}`;
          if (counter !== 1) {
            event.preventDefault();
          }
        },
      },
    },
    listeners: {
      seriesVisibilityChange: (event) => {
        console.log("[series visibility change]", event);
      },
    },
  });

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row center">
          Counter: <span id="myCounter">1</span>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Prevent Default](https://www.ag-grid.com/charts/archive/14.2.0/reactFunctionalTs/events/examples/prevent-default-event/)

```js
{
    legend: {
        listeners: {
            legendItemClick: (event) => {
                counter = (counter + 1) % 2;
                if (counter !== 1) {
                    event.preventDefault();
                }
            },
        },
    },
}
```

In this example:

- When a legend item is clicked, the visibility change is prevented and a counter decreases instead, by calling `preventDefault` on the `legendItemClick` event.
- When the counter hits zero, the toggle is allowed to occur and the [seriesVisibilityChange](https://www.ag-grid.com/charts/archive/14.2.0/react/events/#seriesvisibilitychange) event fires.

## Item Identifiers

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](https://www.ag-grid.com/charts/archive/14.2.0/react/transactions/#identifying-items-by-key)).
  - Series whose nodes don't map directly to a datum - such as [Histogram](https://www.ag-grid.com/charts/archive/14.2.0/react/histogram-series/) bins and [Sankey](https://www.ag-grid.com/charts/archive/14.2.0/react/sankey-series/) or [Chord](https://www.ag-grid.com/charts/archive/14.2.0/react/chord-series/) nodes - expose a `getItemId` callback instead.
  - [Waterfall](https://www.ag-grid.com/charts/archive/14.2.0/react/waterfall-series/) `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

#### Series Events

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

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| seriesNodeClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is clicked. |
| seriesNodeDoubleClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is double-clicked. |

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| nodeClickRange | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a node that a click triggers the listener. |

#### Legend Events

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| legendItemClick | Function |  | The listener to call when a legend item is clicked. |
| legendItemDoubleClick | Function |  | The listener to call when a legend item is double-clicked. |

#### Axis Events

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| click | Listener |  | The listener to call when the axis is clicked. |
| doubleClick | Listener |  | The listener to call when the axis is double-clicked. |

#### Cross Line Events

Cross Line listeners can also be set on the axis that owns the Cross Line.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| click | Listener |  | The listener to call when the Cross Line is clicked. |
| doubleClick | Listener |  | The listener to call when the Cross Line is double-clicked. |

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| crossLineClick | Listener |  | The listener to call when a Cross Line on this axis is clicked. |
| crossLineDoubleClick | Listener |  | The listener to call when a Cross Line on this axis is double-clicked. |

#### Caption Events

Caption listeners can be set on the chart's `title`, `subtitle` and `footnote`.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| click | Listener |  | The listener to call when the caption is clicked. |
| doubleClick | Listener |  | The listener to call when the caption is double-clicked. |

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| captionClick | Listener |  | The listener to call when any caption (title, subtitle or footnote) in the chart is clicked. |
| captionDoubleClick | Listener |  | The listener to call when any caption (title, subtitle or footnote) in the chart is double-clicked. |

#### Chart Events

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| seriesNodeClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in any series is clicked. Useful for a chart containing multiple series. |
| seriesNodeDoubleClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in any series is double-clicked. Useful for a chart containing multiple series. |
| axisClick | Listener |  | The listener to call when any axis in the chart is clicked. Useful for a chart containing multiple axes. |
| axisDoubleClick | Listener |  | The listener to call when any axis in the chart is double-clicked. Useful for a chart containing multiple axes. |
| captionClick | Listener |  | The listener to call when any caption (title, subtitle or footnote) in the chart is clicked. |
| captionDoubleClick | Listener |  | The listener to call when any caption (title, subtitle or footnote) in the chart is double-clicked. |
| seriesVisibilityChange | Listener |  | The listener to call when a series visibility is changed. |
| activeChange | Listener |  | The listener to call when the active state (highlight/tooltip) is changed. |
| selectionChange | Listener |  | The listener to call when data selection is changed |
| collapsedChange | Listener |  | The listener to call when collapsed items are changed. |
| click | Listener |  | The listener to call when the chart is clicked. |
| doubleClick | Listener |  | The listener to call when the chart is double-clicked. |
| crossLineClick | Listener |  | The listener to call when a Cross Line on any axis is clicked. |
| crossLineDoubleClick | Listener |  | The listener to call when a Cross Line on any axis is double-clicked. |
| annotations | Listener |  | The listener to call when the annotations are changed. |
| zoom | Listener |  | The listener to call when the zoom is changed. |