Line

Линейная серия: xField — категория, yField — числовое значение.

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Average temperature' },
    subtitle: { text: '°C by month' },
    series: [{ type: 'line', xField: 'month', yField: 'temperature', name: 'Temperature' }],
  };
}

data.ts

export function getData() {
  return [
    { month: 'Jan', temperature: -8 },
    { month: 'Feb', temperature: -6 },
    { month: 'Mar', temperature: 1 },
    { month: 'Apr', temperature: 9 },
    { month: 'May', temperature: 16 },
    { month: 'Jun', temperature: 21 },
    { month: 'Jul', temperature: 24 },
    { month: 'Aug', temperature: 22 },
    { month: 'Sep', temperature: 15 },
    { month: 'Oct', temperature: 8 },
    { month: 'Nov', temperature: 1 },
    { month: 'Dec', temperature: -5 },
  ];
}

Несколько линий

Каждая серия — отдельный элемент массива series; цвета назначаются палитрой темы по порядку.

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Sessions by platform' },
    series: [
      { type: 'line', xField: 'quarter', yField: 'mobile', name: 'Mobile' },
      { type: 'line', xField: 'quarter', yField: 'desktop', name: 'Desktop' },
      {
        type: 'line',
        xField: 'quarter',
        yField: 'tablet',
        name: 'Tablet',
        lineDash: [4, 3],
        marker: { shape: 'diamond' },
      },
    ],
  };
}

data.ts

export function getData() {
  return [
    { quarter: 'Q1 24', desktop: 320, mobile: 410, tablet: 95 },
    { quarter: 'Q2 24', desktop: 305, mobile: 468, tablet: 88 },
    { quarter: 'Q3 24', desktop: 298, mobile: 540, tablet: 90 },
    { quarter: 'Q4 24', desktop: 312, mobile: 615, tablet: 84 },
    { quarter: 'Q1 25', desktop: 290, mobile: 689, tablet: 79 },
    { quarter: 'Q2 25', desktop: 285, mobile: 744, tablet: 73 },
  ];
}

Подписи значений

label выводит значение у каждой точки; placement — top/bottom/left/right, formatter({ value, datum }) и шрифт настраиваются (ореол цвета фона — читается поверх сетки):

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Value labels at points' },
    subtitle: { text: "placement: 'top' | 'bottom' | 'left' | 'right'" },
    series: [
      {
        type: 'line',
        xField: 'month',
        yField: 'sales',
        name: 'Sales',
        label: {
          enabled: true,
          placement: 'top',
          fontWeight: 'bold',
          formatter: ({ value }) => `${value}K`,
        },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { month: 'Jan', sales: 42 },
    { month: 'Feb', sales: 55 },
    { month: 'Mar', sales: 49 },
    { month: 'Apr', sales: 68 },
    { month: 'May', sales: 62 },
    { month: 'Jun', sales: 81 },
  ];
}

Стили линий

lineDash, толщина, формы маркеров и общий тултип:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Line and marker styles' },
    series: [
      { type: 'line', xField: 'month', yField: 'fact', name: 'Actual', strokeWidth: 2.5, marker: { shape: 'circle' } },
      { type: 'line', xField: 'month', yField: 'plan', name: 'Plan', lineDash: [6, 4], marker: { enabled: false } },
      {
        type: 'line',
        xField: 'month',
        yField: 'lastYear',
        name: 'Last year',
        stroke: '#9aa1ad',
        lineDash: [2, 3],
        marker: { shape: 'diamond', size: 6 },
      },
    ],
    tooltip: { mode: 'shared', range: 'nearest' },
    crosshair: { enabled: true },
  };
}

data.ts

export function getData() {
  const data = [];
  for (let i = 0; i < 12; i++) {
    data.push({
      month: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][i],
      fact: Math.round(80 + 30 * Math.sin(i / 1.8) + i * 2),
      plan: Math.round(85 + i * 2.4),
      lastYear: Math.round(70 + 26 * Math.sin(i / 1.8 + 0.6) + i * 1.6),
    });
  }
  return data;
}

Опции

Общие опции всех серий (name, showInLegend, tooltip.renderer, …) — в разделе Общие опции серий.

Опция	Тип	По умолчанию	Описание
xField	string	—	ключи данных (обязательны)
yField	string	—	ключи данных (обязательны)
xName	string	yField	имена для легенды и тултипа
name	string	yField	имена для легенды и тултипа
stroke	ColorValue	палитра темы	цвет линии
strokeWidth	Pixels	2	толщина линии
lineDash	Pixels[]	—	пунктир
visible	boolean	true	видимость серии
showInLegend	boolean	true	элемент в легенде
tooltip.renderer	function	—	кастомное содержимое тултипа
label.enabled	boolean	false	показать подписи значений
label.placement	'top' | 'bottom' | 'left' | 'right'	'top'	позиция подписи
label.formatter	({ value, datum }) => string	значение	содержимое подписи
label.fontSize	Pixels	11	размер шрифта подписи
label.fontWeight	string | number	normal	насыщенность
label.fontFamily	string	шрифт темы	гарнитура
label.color	ColorValue	foreground; внутри — автоконтраст	цвет текста
marker.enabled	boolean	true	показать маркеры
marker.shape	MarkerShape	circle	форма маркера
marker.size	Pixels	7	размер маркера
marker.fill	ColorValue	цвет серии	заливка маркера
marker.stroke	ColorValue	фон чарта	обводка маркера
marker.strokeWidth	Pixels	1.5	толщина обводки

Точки с нечисловыми значениями yField разрывают линию (connectMissingData — в будущих фазах).