Легенда

Включена по умолчанию, снизу. Клик по элементу скрывает/показывает серию (toggleSeries).

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

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

config.tsdata.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Team velocity' },
    series: [
      { type: 'bar', xField: 'sprint', yField: 'done', name: 'Done', stacked: true },
      { type: 'bar', xField: 'sprint', yField: 'carry', name: 'Carried over', stacked: true },
    ],
    // legend on the right; clicking an item hides the series
    legend: { position: 'right' },
  };
}

export function getData() {
  return [
    { sprint: 'S1', done: 21, carry: 4 },
    { sprint: 'S2', done: 25, carry: 6 },
    { sprint: 'S3', done: 19, carry: 3 },
    { sprint: 'S4', done: 28, carry: 5 },
    { sprint: 'S5', done: 31, carry: 2 },
  ];
}

Опции

Опция	Тип	По умолчанию	Описание
`enabled`	`boolean`	`true`	показать легенду
`position`	`LegendPlacement`	`'bottom'`	сторона + выравнивание или плавающий якорь (ниже)
`floating`	`boolean`	`false`	поверх всей области чарта, без резервирования места
`offset`	`{ x?: Pixels; y?: Pixels }`	`0`	только floating: отступ от закреплённых краёв
`toggleSeries`	`boolean`	`true`	клик переключает видимость
`item.marker.size`	`Pixels`	`10`	размер маркера элемента
`item.label.fontSize`	`Pixels`	`12`	шрифт подписи
`item.label.fontFamily`	`string`	шрифт темы	гарнитура
`item.label.color`	`ColorValue`	foreground	цвет подписи
`background.fill`	`ColorValue`	—	заливка подложки
`background.stroke`	`ColorValue`	—	цвет рамки подложки
`background.strokeWidth`	`Pixels`	`1`	толщина рамки
`background.cornerRadius`	`Pixels`	`4`	скругление подложки
`background.padding`	`Pixels \| Padding`	`8` / `0`	внутренние поля; `8` при заданных fill/stroke
`data`	`LegendItemOptions[]`	—	кастомные элементы (ниже)

Имя элемента — name серии (или yField, если имя не задано). showInLegend: false у серии убирает её элемент.

Непоместившиеся элементы пагинируются: внизу легенды появляются стрелки ‹ 1/3 › (горизонтальная легенда — до двух строк на страницу). Для pie/donut клик по элементу скрывает сектор.

Плавающее размещение

position — это сторона докинга плюс необязательное выравнивание вдоль неё: top-right прижимает легенду к верхнему краю с выравниванием вправо (top центрирует). top-*/bottom-* раскладывают элементы горизонтальными рядами, left-*/right-* — вертикальной колонкой; ориентацию задаёт первое слово.

С floating: true легенда перестаёт резервировать место и рисуется поверх чарта (в духе CSS position: absolute). Якорь — вся область чарта, включая заголовки: заголовок с выравниванием влево и плавающая легенда top-right окажутся на одном уровне:

config.tsdata.ts

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

// A floating legend anchored to the top-right corner of the whole chart —
// on the same level as the left-aligned title.
export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Site traffic', textAlign: 'left', spacing: 4 },
    subtitle: { text: 'visits per month, thousands', textAlign: 'left', spacing: 12 },
    series: [
      { type: 'line', xField: 'month', yField: 'organic', name: 'Organic' },
      { type: 'line', xField: 'month', yField: 'ads', name: 'Ads' },
    ],
    legend: {
      position: 'top-right',
      floating: true,
      background: { fill: 'rgba(255, 255, 255, 0.85)', stroke: '#cbd5e1', cornerRadius: 6, padding: 10 },
    },
  };
}

export function getData() {
  return [
    { month: 'Jan', organic: 42, ads: 18 },
    { month: 'Feb', organic: 48, ads: 22 },
    { month: 'Mar', organic: 55, ads: 21 },
    { month: 'Apr', organic: 61, ads: 27 },
    { month: 'May', organic: 58, ads: 33 },
    { month: 'Jun', organic: 67, ads: 30 },
    { month: 'Jul', organic: 74, ads: 36 },
    { month: 'Aug', organic: 71, ads: 41 },
  ];
}

offset — отступ от закреплённых краёв (x от левого/правого, y от верхнего/нижнего); по центрированной оси положительное значение сдвигает вправо/вниз. background рисует подложку под элементами — полезно поверх графика.

Кастомные элементы

legend.data полностью заменяет автоматические элементы из серий. Пригодится, когда цвета несут смысл внутри одной серии — например, гант из range-bar с заливкой через колбэк по статусу:

config.tsdata.ts

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

// Custom legend items describe the bar statuses of a Gantt-style range-bar —
// something the auto-derived per-series legend cannot show.
const STATUS_COLORS: Record<string, string> = {
  done: '#22c55e',
  running: '#3b82f6',
  failed: '#ef4444',
  queued: '#94a3b8',
};

export function createOptions(): ChartOptions {
  const data = getData();
  const countOf = (status: string) => String(data.filter((datum) => datum.status === status).length);
  const legendItem = (status: string, name: string): LegendItemOptions => ({
    name,
    marker: { color: STATUS_COLORS[status] },
    value: countOf(status),
  });
  return {
    data,
    title: { text: 'Pipeline run' },
    subtitle: { text: 'task timeline, hours' },
    series: [
      {
        type: 'range-bar',
        xField: 'task',
        yLowField: 'start',
        yHighField: 'end',
        direction: 'horizontal',
        cornerRadius: 3,
        fill: ({ datum }) => STATUS_COLORS[String(datum.status)] ?? '#94a3b8',
      },
    ],
    legend: {
      data: [
        legendItem('done', 'Done'),
        legendItem('running', 'Running'),
        { ...legendItem('failed', 'Failed'), marker: { color: STATUS_COLORS.failed, size: 12 }, label: { fontWeight: 'bold', color: '#ef4444' } },
        legendItem('queued', 'Queued'),
      ],
    },
  };
}

export function getData() {
  return [
    { task: 'extract', start: 0, end: 3, status: 'done' },
    { task: 'validate', start: 3, end: 5, status: 'done' },
    { task: 'transform', start: 5, end: 11, status: 'running' },
    { task: 'notify', start: 8, end: 10, status: 'failed' },
    { task: 'load', start: 11, end: 14, status: 'queued' },
    { task: 'report', start: 14, end: 16, status: 'queued' },
  ];
}

Опция	Тип	Описание
`name`	`string`	текст элемента (обязательно)
`series`	`string`	привязка к серии для переключения
`marker.color`	`ColorValue`	цвет маркера; привязанный элемент наследует цвет серии
`marker.size`	`Pixels`	размер маркера элемента
`label`	`FontOptions`	шрифт/цвет подписи элемента
`value`	`string`	значение справа от подписи

series сопоставляется сначала с id серии, затем с её name. Привязанный элемент переключает серию по клику и тускнеет, когда она скрыта; элемент без series (или с неизвестной ссылкой) статичный — рисуется, но клик ничего не делает. Для pie/donut привязка к отдельному сектору — по его метке (или явному id#index); привязка к pie-серии целиком не поддерживается.

Легенда ​

Опции ​

Плавающее размещение ​

Кастомные элементы ​

Легенда

Опции

Плавающее размещение

Кастомные элементы