Data selection

selection enables datum selection: in single — by clicks (exactly one item), in multiple — by clicks and, with boxSelect enabled, with a box (drag); selected nodes are highlighted and the rest are dimmed. Changes arrive in listeners.selectionChange.

Single

By default exactly one item is selected by click; the next click moves the selection (box selection is not available in 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' accumulates the selection; clicking an already selected node deselects it:

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

Box selection on a scatter series

Dragging draws a selection box; styles of selected and inactive items are configurable:

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),
},

Options

Option	Type	Default	Description
enabled	boolean	—	enable selection
mode	'single' | 'multiple'	'single'	single — selection is replaced; multiple — boxes accumulate, node click toggles
boxSelect	boolean	false	selection box by dragging (multiple only)
listeners.selectionChange	({ items }) => void	—	selection change
listeners.nodeClick	({ seriesId, datumIndex, datum }) => void	—	node click
itemStyle.stroke	ColorValue	foreground	stroke of selected nodes
itemStyle.strokeWidth	Pixels	2	stroke width
itemStyle.sizeRatio	number	1.4–1.5	size multiplier for selected markers
inactiveOpacity	Fraction	0.45	opacity of unselected items while a selection is active

Behavior:

• clicking an empty spot clears the selection;
• the box (boxSelect: true) works in multiple for Cartesian series (line, bar, area, scatter/bubble); polar series (pie/donut, sector-based) are selected by clicks;
• with boxSelect enabled, dragging in the plot area is given to selection — zoom with the wheel/pinch (zoom.dragSelect yields priority); without it, dragging stays with zoom.