Sunburst

Кольца по уровням вложенности, угол пропорционален значению. Данные — вложенные через children; значение узла — sizeField листа или сумма потомков.

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Users by region' },
    subtitle: { text: 'millions, two levels' },
    series: [{ type: 'sunburst', labelField: 'label', sizeField: 'size' }],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    {
      label: 'Europe',
      children: [
        { label: 'Germany', size: 84 },
        { label: 'France', size: 65 },
        { label: 'Poland', size: 38 },
      ],
    },
    {
      label: 'Asia',
      children: [
        { label: 'Japan', size: 125 },
        { label: 'Korea', size: 52 },
        { label: 'Vietnam', size: 98 },
      ],
    },
    { label: 'Other', size: 75 },
  ];
}

Отступы и скругление

sectorSpacing — зазор постоянной ширины между секторами (как у pie), cornerRadius — скругление углов:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Sector spacing and corner radius' },
    series: [
      {
        type: 'sunburst',
        labelField: 'label',
        sizeField: 'size',
        sectorSpacing: 4,
        cornerRadius: 5,
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    {
      label: 'Product',
      children: [
        { label: 'Web', size: 34 },
        { label: 'iOS', size: 22 },
        { label: 'Android', size: 18 },
      ],
    },
    {
      label: 'Platform',
      children: [
        { label: 'API', size: 26 },
        { label: 'Data', size: 16 },
      ],
    },
    {
      label: 'Support',
      children: [
        { label: 'SLA', size: 12 },
        { label: 'Docs', size: 8 },
      ],
    },
  ];
}

Подписи секторов

label: { enabled: true } выводит подписи в секторах, в которые они помещаются; цвет — автоконтраст, formatter получает label, value и depth:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Sector labels' },
    series: [
      {
        type: 'sunburst',
        labelField: 'label',
        sizeField: 'size',
        sectorSpacing: 2,
        label: {
          enabled: true,
          formatter: ({ label, value, depth }) => (depth === 0 ? label : `${label} · ${value}`),
        },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    {
      label: 'Product',
      children: [
        { label: 'Web', size: 34 },
        { label: 'iOS', size: 22 },
        { label: 'Android', size: 18 },
      ],
    },
    {
      label: 'Platform',
      children: [
        { label: 'API', size: 26 },
        { label: 'Data', size: 16 },
      ],
    },
    {
      label: 'Support',
      children: [
        { label: 'SLA', size: 12 },
        { label: 'Docs', size: 8 },
      ],
    },
  ];
}

Опции

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

Опция	Тип	По умолчанию	Описание
labelField	string	label/size/children	ключи иерархии
sizeField	string	label/size/children	ключи иерархии
childrenField	string	label/size/children	ключи иерархии
fills	ColorValue[]	палитра	цвета ветвей
sectorSpacing	Pixels	0	зазор постоянной ширины между секторами
cornerRadius	Pixels	0	скругление углов секторов
stroke	стили	фоновая 1px при нулевом зазоре	обводка секторов
strokeWidth	стили	фоновая 1px при нулевом зазоре	обводка секторов
label.enabled	boolean	false	подписи секторов (если помещаются)
label.formatter	({ label, value, depth }) => string	имя узла	содержимое
label.fontSize	Pixels	11	размер шрифта подписи
label.fontWeight	string | number	normal	насыщенность
label.fontFamily	string	шрифт темы	гарнитура
label.color	ColorValue	автоконтраст	цвет (ореол цвета сектора)