Grafit charts

Русский

English

Русский

English

Appearance

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

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

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

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

Опции ​

ОпцияТипПо умолчаниюОписание
textstring—текст заголовка
enabledbooleantrueпоказать заголовок
textAlign'left' | 'center' | 'right''center'выравнивание по ширине чарта (с учётом padding)
position'top' | 'bottom''top'над или под областью построения
fontSizePixels17 / 13размер шрифта title / subtitle
fontWeightFontWeight'bold' / 'normal'насыщенность
fontFamilystringшрифт темыгарнитура
colorColorValueforeground / mutedцвет текста
paddingPaddingValue8 со стороны области построенияотступы вокруг текста: 8, [8, 12], [8, 12, 4, 0] или { top, right, bottom, left }
spacingPixels8устарело — отступ со стороны области построения, то же, что эта сторона padding
wrapbooleantrueпереносить длинный текст на несколько строк

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

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

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', padding: { bottom: 12 } },
    subtitle: { text: 'updated hourly', textAlign: 'right', position: 'bottom' },
    series: [{ type: 'area', xField: 'day', yField: 'sessions', name: 'Sessions' }],
    legend: { enabled: false },
  };
}
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; к области построения обращён отступ последнего из них.

Отступы ​

padding принимает тот же CSS-подобный формат, что и остальные отступы в опциях: одно число, [вертикаль, горизонталь], [top, right, bottom, left] или объект со сторонами:

js
title: { text: 'Трафик сайта', padding: 12 },              // все четыре стороны
title: { text: 'Трафик сайта', padding: [4, 24] },         // вертикаль, горизонталь
title: { text: 'Трафик сайта', padding: [4, 24, 12, 24] }, // top, right, bottom, left
title: { text: 'Трафик сайта', padding: { bottom: 12 } },  // одна сторона, остальные по умолчанию

По умолчанию отступ 8px есть только со стороны, обращённой к области построения: снизу от заголовка в зоне 'top' и сверху — в зоне 'bottom'. Стороны, не указанные в объектной форме, сохраняют это значение, так что { bottom: 12 } у верхнего заголовка — просто более широкий зазор до графика.

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

js
grafit.create({
  container: '#chart',
  title: { text: 'Site traffic', padding: { bottom: 4 } },
  subtitle: { text: 'visits per month, thousands', padding: { bottom: 28 } },
  // ...
});

Если сверху стоят оба заголовка, title.padding.bottom разделяет title и subtitle, а subtitle.padding.bottom — subtitle и график. То есть увеличивать нужно отступ у того заголовка, который идёт последним. Без subtitle к области построения обращён title. Чтобы отодвинуть от края чарта сами заголовки, используйте padding.top (или padding.bottom) на уровне чарта.

Старая опция spacing продолжает работать и задаёт тот же зазор со стороны графика, но при указании обеих выигрывает padding.

Длинный текст ​

Заголовок, который не помещается в доступную ширину, переносится по словам на несколько строк с шагом fontSize × 1.25: он растёт вниз (в зоне 'bottom' — вверх), а область построения уменьшается на ту же величину. Символ '\n' в тексте всегда начинает новую строку — если нужно ровно две строки, измерять ничего не придётся:

js
title: { text: 'Трафик сайта по каналам привлечения\nдвенадцать месяцев по август' },

wrap: false оставляет текст в одну строку, даже если он выходит за края чарта; явные переносы '\n' при этом сохраняются.

Обтекание плавающей легенды ​

Плавающая легенда рисуется поверх всей области чарта, включая заголовки. По умолчанию заголовки её обтекают: каждая строка, попадающая на уровень бокса легенды, размещается в более широком промежутке рядом с ним, а строки ниже снова занимают полную ширину. Так длинный заголовок слева и легенда top-right делят верхнюю зону без наложения:

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

// Long captions wrap onto several lines and flow around the floating legend
// instead of running underneath it.
export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Site traffic by acquisition channel, twelve months to August', textAlign: 'left', padding: { bottom: 4 } },
    subtitle: { text: 'visits per month, thousands; organic includes search and referrals', textAlign: 'left', padding: { bottom: 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 },
    },
  };
}
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 },
  ];
}

Отключается через legend.avoidCaptions: false — тогда заголовки занимают всю ширину чарта, а легенда рисуется поверх них. Если легенда не оставляет пригодного промежутка ни слева, ни справа (широкая легенда по центру), строка тоже возвращается к полной ширине.

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

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', padding: { bottom: 4 } },
    subtitle: { text: 'visits per month, thousands', textAlign: 'left', padding: { bottom: 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.9)',
        stroke: '#cbd5e1',
        cornerRadius: 6,
        // CSS-like shorthand: [vertical, horizontal]
        padding: [8, 12],
        // lifts the panel off the plot it overlays
        shadow: { color: 'rgba(15, 23, 42, 0.18)', blur: 10, offsetY: 3 },
      },
    },
  };
}
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 },
  ];
}