Ripl

Appearance

Sunburst Chart ​

The Sunburst Chart draws a tree as concentric rings: each ring is one level of depth, and each arc's angular width is its share of its parent. It shows both the shape of a hierarchy and the proportions within it — org charts, file systems, nested category breakdowns. Nodes nest through children, padWidth sets a constant-width gap between segments, and format sets how values read. Segments are filled with a translucent tint of their color; hovering one dims the rest, and arcs animate on entry and update. Canvas, SVG and terminal contexts all draw it from the same options.

NOTE

For the full API, see the Charts API Reference.

Example ​

Usage ​

ts
import {
    createSunburstChart,
} from '@ripl/charts';

const chart = createSunburstChart('#container', {
    data: [
        {
            id: 'tech',
            label: 'Technology',
            value: 500,
            children: [
                {
                    id: 'web',
                    label: 'Web',
                    value: 200,
                },
                {
                    id: 'mobile',
                    label: 'Mobile',
                    value: 150,
                },
            ],
        },
    ],
});

Data Format ​

A sunburst takes a tree of nodes rather than a flat dataset. Each node has an id, a label and a value, and children nests the next ring outward:

ts
const data = [
    {
        id: 'engineering',
        label: 'Engineering',
        value: 0,
        children: [
            {
                id: 'frontend',
                label: 'Frontend',
                value: 18,
            },
            {
                id: 'backend',
                label: 'Backend',
                value: 24,
            },
        ],
    },
    {
        id: 'design',
        label: 'Design',
        value: 12,
    },
];

A branch node's own value is ignored when it has children — its arc spans the total of its descendants.

Options ​

A full configuration for this chart. The options every chart shares — padding, title, animation, theme and the rest — behave the same everywhere and are documented on Shared Options.

ts
createSunburstChart('#container', {
    // Each node carries `id`, `label`, `value` and optional `children`; the ring depth follows
    // the nesting.
    data,
    // Gap between adjacent segments, in pixels — a constant width whatever the radius.
    padWidth: 2,
    legend: { position: 'right' },
    format: 'number',
});

Events ​

Subscribe with chart.on(...). A handler receives an Event object, not the payload directly — the payload is on event.data, and carries the interacted datum plus its { x, y } anchor in chart pixels. event.target and event.stopPropagation() are also available.

ts
// Emitted when a segment is clicked.
chart.on('nodeclick', event => console.log(event.data)); // event.data: SunburstChartNodeEvent<TData>
// Emitted when the pointer enters a segment.
chart.on('nodeenter', event => console.log(event.data)); // event.data: SunburstChartNodeEvent<TData>
// Emitted when the pointer leaves a segment.
chart.on('nodeleave', event => console.log(event.data)); // event.data: SunburstChartNodeEvent<TData>