Skip to content

Sunburst Chart

The Sunburst Chart displays hierarchical data as concentric rings, where each ring represents a level in the hierarchy and arc size represents value. It's excellent for visualizing tree structures like org charts, file systems, or category breakdowns. Nodes can have nested children, and arcs animate on entry and update.

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

Options

  • data — Array of SunburstNode objects with id, label, value, optional color and children