События (listeners)

Блок listeners в ChartOptions — колбэки на действия пользователя. Все события получают данные датума, поэтому чарт легко связывается с внешним UI: таблицами, фильтрами, drill-down-навигацией.

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 },
  ];
}

Все события

Событие	Параметры	Когда срабатывает
nodeClick	{ seriesId: string; datumIndex: number; datum: Datum }	клик по узлу серии (бар, точка, сектор, ячейка…)
selectionChange	{ items: Array<{ seriesId; datumIndex; datum }> }	изменение выбора Data Selection (клики, рамка, сброс)
zoomChange	{ x: [от, до]; y: [от, до] } — доли домена 0..1	любое изменение зума: колесо, пан, рамка, навигатор, сброс
legendItemClick	{ seriesId: string; visible: boolean }	клик по элементу легенды (для секторов pie — 'seriesId#index')

selectionChange срабатывает только при включённом selection; zoomChange — при включённом zoom или навигаторе; nodeClick и legendItemClick работают всегда.

Паттерн: drill-down

По клику на категорию загружаем детализацию и обновляем чарт:

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

Паттерн: связка с внешним UI

Выбор на чарте управляет таблицей рядом:

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

Обратное направление — через getState/setState или updateDelta.

Замечания

• Колбэки — изолированные листья options: остальной объект сериализуем.
• datum — ссылка на исходный объект из data (не копия).
• Для реакции на ховер используйте режимы тултипа и highlight; отдельного hover-события нет.