Funnel и Pyramid

Стадийные серии без осей: плоские данные stageField/valueField.

Funnel

Стадии сверху вниз, ширина пропорциональна значению. funnel — прямоугольные стадии, cone-funnel — трапеции до следующей стадии.

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Activation funnel' },
    series: [{ type: 'cone-funnel', stageField: 'stage', valueField: 'value', name: 'Users' }],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { stage: 'Visits', value: 12400 },
    { stage: 'Sign-ups', value: 5300 },
    { stage: 'Activations', value: 2900 },
    { stage: 'Subscriptions', value: 1150 },
    { stage: 'Renewals', value: 780 },
  ];
}

Отступы и подписи снаружи

itemSpacing — зазор между сегментами; label.placement: 'outside' выносит подписи вправо. Геометрия фигуры не зависит от подписей — ширину задаёт widthRatio:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Funnel: spacing and outside labels' },
    series: [
      {
        type: 'funnel',
        stageField: 'stage',
        valueField: 'count',
        itemSpacing: 10,
        label: {
          placement: 'outside',
          formatter: ({ stage, value }) => `${stage} — ${value.toLocaleString('en-US')}`,
        },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { stage: 'Visits', count: 12500 },
    { stage: 'Sign-ups', count: 6400 },
    { stage: 'Activations', count: 3100 },
    { stage: 'Subscriptions', count: 1400 },
    { stage: 'Renewals', count: 900 },
  ];
}

Cone-воронка с подписями снаружи

Трапециевидные стадии; линия идёт от наклонной грани. Внутренние подписи получают обводку цветом фона (читаются на любом сегменте):

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Cone funnel: outside labels' },
    series: [
      {
        type: 'cone-funnel',
        stageField: 'stage',
        valueField: 'count',
        itemSpacing: 2,
        label: {
          placement: 'outside',
          formatter: ({ stage, value }) => `${stage} — ${value.toLocaleString('en-US')}`,
        },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { stage: 'Leads', count: 8200 },
    { stage: 'Qualified', count: 4900 },
    { stage: 'Demo', count: 2300 },
    { stage: 'Contract', count: 1100 },
    { stage: 'Payment', count: 750 },
  ];
}

Pyramid

Высота слоя пропорциональна значению; reverse переворачивает остриё вниз.

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Company structure' },
    series: [{ type: 'pyramid', stageField: 'level', valueField: 'count', name: 'People' }],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { level: 'C-level', count: 6 },
    { level: 'Managers', count: 28 },
    { level: 'Team leads', count: 90 },
    { level: 'Engineers', count: 420 },
    { level: 'Interns', count: 160 },
  ];
}

Отступы и подписи внутри

itemSpacing разрезает пирамиду на слои; label.placement: 'inside' — подписи в сегментах с автоконтрастным цветом:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Pyramid: spacing and inside labels' },
    series: [
      {
        type: 'pyramid',
        stageField: 'level',
        valueField: 'people',
        itemSpacing: 6,
        label: { placement: 'inside', fontWeight: 'bold' },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { level: 'CEO', people: 2 },
    { level: 'Directors', people: 9 },
    { level: 'Managers', people: 34 },
    { level: 'Engineers', people: 120 },
    { level: 'Interns', people: 45 },
  ];
}

Опции

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

Опция	Серии	По умолчанию	Описание
stageField	все	—	имя и значение стадии
valueField	все	—	имя и значение стадии
fills	все	палитра	цвета стадий
itemSpacing	все	funnel 4, pyramid 0	зазор между сегментами
widthRatio	все	0.62	доля ширины области под фигуру (не зависит от подписей)
reverse	pyramid	false	остриё снизу
label.enabled	boolean	true	подписи стадий
label.placement	'inside' | 'outside'	funnel 'inside'; pyramid 'outside'	позиция (общая для всех сегментов)
label.formatter	({ datum, stage, value }) => string	стадия · значение	содержимое
label.fontSize	Pixels	12	шрифт
label.fontWeight	string | number	normal	насыщенность
label.color	ColorValue	inside — автоконтраст; outside — foreground	цвет
calloutLine.enabled	boolean	true при outside	линия к внешней подписи
calloutLine.length	Pixels	14	длина линии
calloutLine.stroke	ColorValue	цвет сегмента	цвет линии
calloutLine.strokeWidth	Pixels	1	толщина