Темы

Тема задаёт палитру серий, цвета фона/текста и шрифт. В theme передаётся имя встроенной темы или объект ThemeOptions.

Встроенные темы

'default' — светлая (используется без theme):

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Light theme (default)' },
    series: [
      { type: 'bar', xField: 'month', yField: 'desktop', name: 'Desktop' },
      { type: 'line', xField: 'month', yField: 'mobile', name: 'Mobile' },
    ],
    theme: 'default',
  };
}

data.ts

export function getData() {
  return [
    { month: 'Jan', desktop: 42, mobile: 28 },
    { month: 'Feb', desktop: 49, mobile: 34 },
    { month: 'Mar', desktop: 46, mobile: 41 },
    { month: 'Apr', desktop: 58, mobile: 47 },
    { month: 'May', desktop: 63, mobile: 55 },
    { month: 'Jun', desktop: 60, mobile: 62 },
  ];
}

'dark' — тёмная:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Dark theme (dark)' },
    series: [
      { type: 'bar', xField: 'month', yField: 'desktop', name: 'Desktop' },
      { type: 'line', xField: 'month', yField: 'mobile', name: 'Mobile' },
    ],
    theme: 'dark',
  };
}

data.ts

export function getData() {
  return [
    { month: 'Jan', desktop: 42, mobile: 28 },
    { month: 'Feb', desktop: 49, mobile: 34 },
    { month: 'Mar', desktop: 46, mobile: 41 },
    { month: 'Apr', desktop: 58, mobile: 47 },
    { month: 'May', desktop: 63, mobile: 55 },
    { month: 'Jun', desktop: 60, mobile: 62 },
  ];
}

Тему можно менять на лету — chart.updateDelta({ theme: 'dark' }) перерисует чарт с анимацией. Демки на этом сайте так и переключаются вместе с темой страницы (если пример не задаёт тему явно).

Кастомная тема

Объект темы: baseTheme (основа) + palette (цвета серий по кругу) + params (дизайн-токены):

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Sales funnel' },
    series: [{ type: 'bar', xField: 'stage', yField: 'count', name: 'Deals', cornerRadius: 6 }],
    legend: { enabled: false },
    // custom theme: palette + design tokens on top of a base theme
    theme: {
      baseTheme: 'dark',
      palette: { fills: ['#27c08d'] },
      params: {
        backgroundColor: '#0d1f1a',
        foregroundColor: '#d8f3e9',
        fontFamily: 'Georgia, serif',
      },
    },
  };
}

data.ts

export function getData() {
  return [
    { stage: 'Leads', count: 1840 },
    { stage: 'Qualified', count: 1120 },
    { stage: 'Demo', count: 640 },
    { stage: 'Contract', count: 310 },
    { stage: 'Payment', count: 245 },
  ];
}

Цвет, заданный в серии (fill, stroke), имеет приоритет над палитрой темы.

Overrides

overrides — частичные options, вклеиваемые под пользовательские: common — chart-блоки для всех чартов, <seriesType>.series — дефолты серий данного типа. Удобно вынести фирменный стиль в один объект:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Overrides: defaults per series type' },
    series: [
      { type: 'bar', xField: 'month', yField: 'desktop', name: 'Desktop' },
      { type: 'line', xField: 'month', yField: 'mobile', name: 'Mobile' },
    ],
    theme: {
      overrides: {
        common: { legend: { position: 'right' } },
        bar: { series: { cornerRadius: 8, fillOpacity: 0.8 } },
        line: { series: { strokeWidth: 3.5, lineDash: [12, 6], marker: { enabled: false } } },
      },
    },
  };
}

data.ts

export function getData() {
  return [
    { month: 'Jan', desktop: 42, mobile: 28 },
    { month: 'Feb', desktop: 49, mobile: 34 },
    { month: 'Mar', desktop: 46, mobile: 41 },
    { month: 'Apr', desktop: 58, mobile: 47 },
    { month: 'May', desktop: 63, mobile: 55 },
    { month: 'Jun', desktop: 60, mobile: 62 },
  ];
}

Приоритет: дефолты библиотеки < overrides.common < overrides[type].series < явные options.

Опции ThemeOptions

Опция	Тип	Описание
baseTheme	'default' | 'dark'	базовая тема-основа
palette.fills	ColorValue[]	цвета заливки серий, по индексу серии
palette.strokes	ColorValue[]	цвета обводки (по умолчанию = fills)
params.backgroundColor	ColorValue	фон чарта
params.foregroundColor	ColorValue	основной цвет текста
params.fontFamily	string	шрифт всех надписей
overrides.common	Record<string, unknown>	chart-блоки для всех чартов
overrides.<seriesType>.series	Record<string, unknown>	дефолты серий конкретного типа