React ChartsSunburst Series

A Sunburst Series is used to render hierarchical data structures or trees. Each node in the tree is represented by a segment on a radial circle, with the area of the sum of values.

Simple Sunburst Copy Link

The Sunburst Series is designed to display a single series and is created using the sunburst series type.

{
    series: [
        {
            type: 'sunburst',
            labelKey: 'name',
        },
    ],
}

The data passed in should be an array of nodes, with each node optionally containing children.

const data = [
    {
        name: 'Mariah Vaughan',
        children: [
            {
                name: 'Bushra Thomas',
                children: [
                    { name: 'Cyrus Henderson' },
                    { name: 'Dora Jordan' },
                    { name: 'Skyla Downs' },
                    { name: "Elissa O'Sullivan" },
                ],
            },
        ],
        // ...
    },
    {
        name: 'Nathanael Villa',
        // ...
    },
];

The labelKey defines what will appear as the title for each sector.

Sizing Copy Link

By default, the segments corresponding to leaf nodes will have the same angle.

However, the Sunburst Series is best suited to providing size values to provide relative sizing between these sectors.

The sizeKey can be used to provide a numeric value to adjust the relative sizing. Additionally, the optional sizeName property can be set to set the title that appears next to the value in tooltips.

{
    series: [
        {
            type: 'sunburst',
            labelKey: 'name',
            sizeKey: 'gdp',
            sizeName: 'GDP',
        },
    ],
}

Colour Scale Copy Link

Use colorScale to control how colorKey values map to colours.

{
    series: [
        {
            type: 'sunburst',
            labelKey: 'name',
            colorKey: 'gdpChange',
            colorName: 'Change',
            colorScale: {
                mode: 'discrete',
                fills: [
                    { color: 'tomato', stop: -0.01, name: 'Decline' },
                    { color: 'gold', stop: 0.01, name: 'Flat' },
                    { color: 'seagreen', name: 'Growth' },
                ],
            },
        },
    ],
}

In this example:

• Use the toggle to switch between discrete mode with named stops shown in a category legend, and a continuous gradient shown in a gradient legend.

See the Colour Scale page for the full range of colour scale options including discrete mode, named stops, fixed domains, missing data, and gradient legend customisation.

Other Colours Copy Link

{
    series: [
        {
            type: 'sunburst',
            labelKey: 'name',
            sizeKey: 'gdp',
            sizeName: 'GDP',
            fills: ['#D32F2F', '#FF5722', '#283593'],
        },
    ],
}

In this configuration:

• fills and strokes are an array of colours to use for the fills and strokes, where each node receives the colour indexed by the index of its root node

Labels Copy Link

All segments can contain both labels and secondary labels, which can be shrunk to fit in the available space.

{
    series: [
        {
            type: 'sunburst',
            labelKey: 'name',
            secondaryLabelKey: 'gdpChange',
            sizeKey: 'gdp',
            sizeName: 'GDP',
            label: {
                fontSize: 14,
                minimumFontSize: 9,
                spacing: 2,
            },
            secondaryLabel: {
                formatter: ({ value }) => (value != null ? percentageFormatter.format(value) : undefined),
            },
            padding: 3,
        },
    ],
}

In this configuration:

• fontSize sets the size of the font.
• minimumFontSize will enable the font size to shrink down to the given value if there is not enough space.
• spacing controls the amount of space below a label.
• padding adds space between the edge of a sector and its contents.
• formatter allows customising the value of a label using a function.

Highlighting Copy Link

Each sunburst highlight state exposes a separate style object:

• highlightedItem – the hovered segment.
• highlightedBranch – All segments that share the same root node.
• unhighlightedItem – All segments in the highlightedBranch that are not the highlighted segment.
• unhighlightedBranch – segments that belong to different branches.

{
    series: [
        {
            type: 'sunburst',
            labelKey: 'name',
            sizeKey: 'value',
            highlight: {
                highlightedItem: { stroke: 'green' },
                highlightedBranch: { strokeWidth: 2 },
                unhighlightedItem: { opacity: 0.5 },
                unhighlightedBranch: { opacity: 0.1 },
            },
        },
    ],
}

In this configuration:

• Hovered segments get an accent stroke while preserving the default fill.
• Sibling segments in the same branch inherit highlightedBranch styles (merged with their own highlight state).
• Segments in other branches fade based on unhighlightedBranch.

API Reference Copy Link