Выделение данных

selection включает выбор датумов: в single — кликами (ровно один элемент), в multiple — кликами и, при включённом boxSelect, рамкой (drag); выбранные узлы подсвечиваются, остальные приглушаются. Изменения приходят в listeners.selectionChange.

Single

По умолчанию выбирается ровно один элемент кликом; следующий клик переносит выбор (рамка в single недоступна):

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Single: one bar' },
    subtitle: { text: 'click selects a bar, the next click moves the selection' },
    series: [{ type: 'bar', xField: 'month', yField: 'revenue', name: 'Revenue' }],
    selection: { enabled: true },
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { month: 'Jan', revenue: 42 },
    { month: 'Feb', revenue: 58 },
    { month: 'Mar', revenue: 51 },
    { month: 'Apr', revenue: 74 },
    { month: 'May', revenue: 69 },
    { month: 'Jun', revenue: 88 },
    { month: 'Jul', revenue: 81 },
    { month: 'Aug', revenue: 95 },
  ];
}

Multiple

mode: 'multiple' накапливает выбор; клик по уже выбранному узлу снимает его:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Multiple: several bars' },
    subtitle: { text: 'clicks and box select accumulate the selection; clicking a selected bar deselects it' },
    series: [{ type: 'bar', xField: 'team', yField: 'tasks', name: 'Tasks' }],
    selection: { enabled: true, mode: 'multiple', boxSelect: true, inactiveOpacity: 0.35 },
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { team: 'Search', tasks: 34 },
    { team: 'Maps', tasks: 27 },
    { team: 'Cloud', tasks: 41 },
    { team: 'Ads', tasks: 22 },
    { team: 'Music', tasks: 18 },
    { team: 'Mail', tasks: 25 },
  ];
}

Рамка по точечной серии

Drag рисует рамку выделения; стили выбранных и неактивных настраиваются:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Data selection' },
    subtitle: { text: 'box select or click; mode: multiple — selection accumulates' },
    series: [{ type: 'scatter', xField: 'effort', yField: 'impact', name: 'Tasks' }],
    selection: {
      enabled: true,
      mode: 'multiple',
      itemStyle: { stroke: '#e5484d', strokeWidth: 2.5, sizeRatio: 1.6 },
      inactiveOpacity: 0.3,
    },
    listeners: {
      selectionChange: ({ items }) => console.log('selected:', items.length),
    },
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  const points = [];
  for (let i = 0; i < 40; i++) {
    points.push({
      effort: Math.round(((i * 17) % 40) + ((i * 7) % 13)),
      impact: Math.round(((i * 23) % 45) + ((i * 5) % 11)),
    });
  }
  return points;
}

selection: { enabled: true, mode: 'multiple', boxSelect: true },
listeners: {
  selectionChange: ({ items }) => {
    // items: [{ seriesId, datumIndex, datum }]
  },
  nodeClick: ({ datum }) => console.log(datum),
},

Опции

Опция	Тип	По умолчанию	Описание
enabled	boolean	—	включить выделение
mode	'single' | 'multiple'	'single'	single — выбор заменяется; multiple — рамки накапливают, клик по узлу — toggle
boxSelect	boolean	false	рамка выделения перетаскиванием (только multiple)
listeners.selectionChange	({ items }) => void	—	изменение выбора
listeners.nodeClick	({ seriesId, datumIndex, datum }) => void	—	клик по узлу
itemStyle.stroke	ColorValue	foreground	обводка выбранных узлов
itemStyle.strokeWidth	Pixels	2	толщина обводки
itemStyle.sizeRatio	number	1.4–1.5	множитель размера выбранных маркеров
inactiveOpacity	Fraction	0.45	прозрачность невыбранных при активном выборе

Поведение:

• клик по пустому месту сбрасывает выбор;
• рамка (boxSelect: true) работает в multiple для декартовых серий (line, bar, area, scatter/bubble); полярные (pie/donut, секторные) выбираются кликами;
• при включённом boxSelect drag в области построения отдан выделению — зумируйте колесом/pinch (zoom.dragSelect уступает приоритет); без него drag остаётся за зумом.