Events (listeners)

The listeners block in ChartOptions provides callbacks for user actions. All events receive datum data, so the chart is easy to connect to external UI: tables, filters, drill-down navigation.

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Chart events' },
    subtitle: { text: 'clicks, selection, wheel zoom, legend — events in the DevTools console' },
    series: [
      {
        type: 'bar',
        xField: 'feature',
        yField: 'usage',
        name: 'Usage, %',
      },
    ],
    selection: { enabled: true, mode: 'multiple' },
    zoom: { enabled: true },
    listeners: {
      nodeClick: ({ seriesId, datumIndex, datum }) => {
        console.log('nodeClick:', seriesId, datumIndex, datum);
      },
      selectionChange: ({ items }) => {
        console.log(
          'selectionChange:',
          items.map((item) => item.datum.feature),
        );
      },
      zoomChange: ({ x }) => {
        console.log('zoomChange:', x.map((value) => value.toFixed(2)).join(' – '));
      },
      legendItemClick: ({ seriesId, visible }) => {
        console.log('legendItemClick:', seriesId, visible);
      },
    },
  };
}

data.ts

export function getData() {
  return [
    { feature: 'Search', usage: 86 },
    { feature: 'Filters', usage: 64 },
    { feature: 'Export', usage: 41 },
    { feature: 'Sharing', usage: 27 },
    { feature: 'API', usage: 18 },
  ];
}

All events

Event	Parameters	When it fires
nodeClick	{ seriesId: string; datumIndex: number; datum: Datum }	click on a series node (bar, point, sector, cell…)
selectionChange	{ items: Array<{ seriesId; datumIndex; datum }> }	Data Selection change (clicks, box, reset)
zoomChange	{ x: [from, to]; y: [from, to] } — domain fractions 0..1	any zoom change: wheel, pan, box, navigator, reset
legendItemClick	{ seriesId: string; visible: boolean }	click on a legend item (for pie sectors — 'seriesId#index')

selectionChange fires only when selection is enabled; zoomChange — when zoom or the navigator is enabled; nodeClick and legendItemClick always work.

Pattern: drill-down

On a category click, load the details and update the chart:

const chart = Charts.create({
  ...options,
  listeners: {
    nodeClick: async ({ datum }) => {
      const details = await fetchDetails(datum.category);
      chart.update({ ...detailOptions, data: details });
    },
  },
});

Pattern: connecting to external UI

Selection on the chart drives a table next to it:

listeners: {
  selectionChange: ({ items }) => {
    table.setRowSelection(items.map((item) => item.datum.id));
  },
},

The reverse direction goes through getState/setState or updateDelta.

Notes

• Callbacks are isolated leaves of options: the rest of the object is serializable.
• datum is a reference to the original object from data (not a copy).
• To react to hover, use the tooltip modes and highlight; there is no separate hover event.