Sunburst

A sunburst chart is a data visualization that displays hierarchical data in a radial, multi-level format. It resembles a sun with a central circle and radiating "rays" that are further divided into rings, each representing a level in the hierarchy. Sunburst charts are excellent for showing how different categories and subcategories contribute to the whole, offering a clear visual representation of part-to-whole relationships within the data.

Result

Loading...

Live Editor

<SunburstChart title="Sunburst" subtitle="Chart" data={Array.from({ length: 18 }, (_, i) => ({ name: `Item ${i + 1}`, id: `item-${i + 1}`, children: [ { name: 'Sub item 1', id: `sub-item-${i + 1}-1`, value: 10, }, { name: 'Sub item 2', id: `sub-item-${i + 1}-2`, value: 10, }, { name: 'Sub item 3', id: `sub-item-${i + 1}-3`, value: 10, }, ], }))} />

<SunburstChart
    title="Sunburst"
    subtitle="Chart"
    data={Array.from({ length: 18 }, (_, i) => ({
        name: `Item ${i + 1}`,
        id: `item-${i + 1}`,
        children: [
            {
                name: 'Sub item 1',
                id: `sub-item-${i + 1}-1`,
                value: 10,
            },
            {
                name: 'Sub item 2',
                id: `sub-item-${i + 1}-2`,
                value: 10,
            },
            {
                name: 'Sub item 3',
                id: `sub-item-${i + 1}-3`,
                value: 10,
            },
        ],
    }))}
/>

Update Highcharts modules

Sunburst is not included in the default Highcharts bundle. You will need to extend Highcharts to use the Sunburst module.

import Highcharts from 'highcharts';
import Sunburst from 'highcharts/modules/sunburst';

Sunburst(Highcharts);

Props