Sunburst

Rings per nesting level, with the angle proportional to the value. Data is nested via children; a node's value is the leaf's sizeField or the sum of its descendants.

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

Spacing and corner rounding

sectorSpacing is a constant-width gap between sectors (like in pie), cornerRadius rounds the corners:

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

Sector labels

label: { enabled: true } renders labels in the sectors they fit into; the color is auto contrast, and formatter receives label, value, and 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 },
      ],
    },
  ];
}

Options

Options common to all series (name, showInLegend, tooltip.renderer, …) are covered in Common series options.

Option	Type	Default	Description
labelField	string	label/size/children	hierarchy keys
sizeField	string	label/size/children	hierarchy keys
childrenField	string	label/size/children	hierarchy keys
fills	ColorValue[]	palette	branch colors
sectorSpacing	Pixels	0	constant-width gap between sectors
cornerRadius	Pixels	0	sector corner rounding
stroke	styles	background 1px with zero gap	sector stroke
strokeWidth	styles	background 1px with zero gap	sector stroke
label.enabled	boolean	false	sector labels (when they fit)
label.formatter	({ label, value, depth }) => string	node name	content
label.fontSize	Pixels	11	label font size
label.fontWeight	string | number	normal	font weight
label.fontFamily	string	theme font	font family
label.color	ColorValue	auto contrast	color (halo in the sector color)