Тултип

Включён по умолчанию: при наведении показывается ближайший узел, сам узел подсвечивается, остальные серии приглушаются.

Модульная сборка

В сборке через grafit-charts/core тултип — отдельный модуль: register(tooltipModule).

По умолчанию тултип показывает значение xField заголовком и пару «имя серии: значение». Содержимое настраивается через tooltip.renderer на серии:

config.ts

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

const rub = new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB', maximumFractionDigits: 0 });

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Orders this week' },
    series: [
      {
        type: 'bar',
        xField: 'day',
        yField: 'orders',
        name: 'Orders',
        tooltip: {
          // renderer returns the tooltip structure; datum gives access to the whole data row
          renderer: ({ datum, yValue, color }) => ({
            heading: `${datum.day} — ${yValue} orders`,
            rows: [{ label: 'Revenue', value: rub.format(datum.revenue as number), color }],
          }),
        },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { day: 'Mon', orders: 142, revenue: 388000 },
    { day: 'Tue', orders: 158, revenue: 412000 },
    { day: 'Wed', orders: 149, revenue: 395500 },
    { day: 'Thu', orders: 173, revenue: 460200 },
    { day: 'Fri', orders: 196, revenue: 540800 },
    { day: 'Sat', orders: 224, revenue: 618400 },
    { day: 'Sun', orders: 201, revenue: 552300 },
  ];
}

Режимы

mode: 'single' (по умолчанию) показывает значение ближайшего узла; mode: 'shared' — значения всех видимых серий категории одним тултипом; подсвечиваются узлы всех серий, приглушение не применяется:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Shared tooltip' },
    subtitle: { text: "mode: 'shared' + range: 'nearest' — tooltip from anywhere" },
    series: [
      { type: 'line', xField: 'month', yField: 'plan', name: 'Plan' },
      { type: 'line', xField: 'month', yField: 'fact', name: 'Actual' },
      { type: 'line', xField: 'month', yField: 'forecast', name: 'Forecast', lineDash: [4, 3] },
    ],
    tooltip: { mode: 'shared', range: 'nearest' },
    crosshair: { enabled: true },
  };
}

data.ts

export function getData() {
  return [
    { month: 'Jan', plan: 120, fact: 134, forecast: 128 },
    { month: 'Feb', plan: 125, fact: 118, forecast: 124 },
    { month: 'Mar', plan: 130, fact: 142, forecast: 136 },
    { month: 'Apr', plan: 135, fact: 129, forecast: 133 },
    { month: 'May', plan: 140, fact: 151, forecast: 146 },
    { month: 'Jun', plan: 145, fact: 148, forecast: 150 },
  ];
}

Опции (chart-level)

Опция	Тип	По умолчанию	Описание
enabled	boolean	true	показывать тултип
mode	'single' | 'shared'	'single'	один узел или вся категория
position.anchorTo	'node' | 'center' | 'pointer'	'node'	край узла, центр узла или курсор
position.xOffset	Pixels	0	смещение тултипа
yOffset	Pixels	0	смещение тултипа
range	Pixels | 'exact' | 'nearest'	30	число — радиус в px; 'exact' — только попадание в узел; 'nearest' — ближайший узел из любого места области построения

Опции серии

series[].tooltip.renderer(params) возвращает строку (станет заголовком) или структуру:

renderer: ({ datum, xValue, yValue, seriesName, color }) => ({
  heading: String(xValue),
  rows: [{ label: seriesName, value: String(yValue), color }],
});

params.datum — вся строка данных: в тултип можно выводить поля, не участвующие в серии.

Подсветка управляется блоком highlight:

Опция	Тип	По умолчанию	Описание
enabled	boolean	true	подсветка узла и приглушение остальных серий
dimOpacity	Fraction	0.8	прозрачность неподсвеченных серий (1 — не приглушать)
highlight.enabled	boolean	true	подсветка узла и приглушение
highlight.dimOpacity	Fraction	0.8	прозрачность неподсвеченных серий