Заголовок и подзаголовок

title и subtitle рисуются вокруг области построения. У обоих одинаковые опции: текст, шрифт, цвет, выравнивание, вертикальное размещение и отступ до области построения.

config.ts

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

// Custom caption fonts, colors and spacing.
export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Annual revenue', fontSize: 22, fontWeight: 800, color: '#0f766e', spacing: 4 },
    subtitle: { text: 'by quarter, $K', fontSize: 14, color: '#94a3b8', spacing: 16 },
    series: [{ type: 'bar', xField: 'quarter', yField: 'revenue', name: 'Revenue' }],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { quarter: 'Q1', revenue: 210 },
    { quarter: 'Q2', revenue: 265 },
    { quarter: 'Q3', revenue: 248 },
    { quarter: 'Q4', revenue: 312 },
  ];
}

Опции

Опция	Тип	По умолчанию	Описание
text	string	—	текст заголовка
enabled	boolean	true	показать заголовок
textAlign	'left' | 'center' | 'right'	'center'	выравнивание по ширине чарта (с учётом padding)
position	'top' | 'bottom'	'top'	над или под областью построения
fontSize	Pixels	17 / 13	размер шрифта title / subtitle
fontWeight	FontWeight	'bold' / 'normal'	насыщенность
fontFamily	string	шрифт темы	гарнитура
color	ColorValue	foreground / muted	цвет текста
spacing	Pixels	8	отступ между заголовком и областью построения

Выравнивание и размещение

textAlign позиционирует заголовок по ширине чарта с привязкой к padding; position переносит его под область построения. Title и subtitle настраиваются независимо — их можно свободно сочетать, например заголовок слева сверху и подпись-сноска справа снизу:

config.ts

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

// Left-aligned title on top, a footnote-style subtitle at the bottom right.
export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Weekly sessions', textAlign: 'left', spacing: 12 },
    subtitle: { text: 'updated hourly', textAlign: 'right', position: 'bottom' },
    series: [{ type: 'area', xField: 'day', yField: 'sessions', name: 'Sessions' }],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { day: 'Mon', sessions: 320 },
    { day: 'Tue', sessions: 356 },
    { day: 'Wed', sessions: 402 },
    { day: 'Thu', sessions: 384 },
    { day: 'Fri', sessions: 441 },
    { day: 'Sat', sessions: 268 },
    { day: 'Sun', sessions: 214 },
  ];
}

Когда оба заголовка в одной зоне, title всегда выше subtitle; spacing обращён к области построения.

Заголовок с выравниванием влево хорошо сочетается с плавающей легендой в противоположном углу на том же уровне:

config.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 },
    },
  };
}

data.ts

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