Waterfall

Мост накопления: каждое значение yField — изменение, бары растут от накопленной суммы. totals отмечает индексы строк-итогов (бар от нуля до накопленного).

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'P&L bridge' },
    subtitle: { text: '₽M' },
    series: [
      {
        type: 'waterfall',
        xField: 'step',
        yField: 'value',
        name: 'Change',
        // indices 3 and 6 are the subtotal and the final total
        totals: [3, 6],
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { step: 'Revenue', value: 420 },
    { step: 'COGS', value: -180 },
    { step: 'Marketing', value: -65 },
    { step: 'Gross', value: 0 },
    { step: 'Other income', value: 38 },
    { step: 'Taxes', value: -52 },
    { step: 'Net', value: 0 },
  ];
}

Промежуточные итоги и стили

totals — индексы строк-итогов (бар от нуля), цвета по знаку через item; подписи — label.formatter({ value, isTotal, datum }) (позиции как у bar):

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'P&L with subtotals' },
    series: [
      {
        type: 'waterfall',
        xField: 'step',
        yField: 'value',
        totals: [2, 6],
        cornerRadius: 4,
        item: {
          positive: { fill: '#21a06c' },
          negative: { fill: '#e5484d' },
          total: { fill: '#33404f' },
        },
        line: { enabled: true },
        label: {
          enabled: true,
          formatter: ({ value, isTotal }) => (isTotal ? String(value) : `${value > 0 ? '+' : ''}${value}`),
        },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { step: 'Revenue', value: 420 },
    { step: 'COGS', value: -180 },
    { step: 'Gross profit', value: 0 },
    { step: 'Marketing', value: -60 },
    { step: 'R&D', value: -75 },
    { step: 'Other', value: 18 },
    { step: 'Operating profit', value: 0 },
  ];
}

Опция	Тип	По умолчанию	Описание
xField	string	—	категория и изменение
yField	string	—	категория и изменение
totals	number[]	—	индексы строк-итогов
cornerRadius	Pixels	2	скругление баров
label.enabled	boolean	false	показать подписи значений
label.placement	внешние/center/inner-* (17 позиций)	'top'	позиция подписи
label.formatter	({ value, isTotal, datum }) => string	значение	содержимое подписи
label.fontSize	Pixels	11	размер шрифта подписи
label.fontWeight	string | number	normal	насыщенность
label.fontFamily	string	шрифт темы	гарнитура
label.color	ColorValue	foreground; внутри — автоконтраст	цвет текста
item.positive.fill	ColorValue	цвет серии	заливка положительных шагов
item.negative.fill	ColorValue	красный темы	заливка отрицательных шагов
item.total.fill	ColorValue	muted темы	заливка итоговых баров
line.enabled	boolean	true	соединительные линии
line.stroke	ColorValue	muted темы	цвет соединительных линий

Опции

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