React ChartsSunburst Series

ReactAngularVueJavascript

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

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.

let 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

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 Scales

Sectors can also be coloured using a scale. This lets you add an extra dimension of information to your chart.

Colouring can be customised by the colorKey and colorRange values in the series options.

series: [
    {
        type: 'sunburst',
        labelKey: 'name',
        sizeKey: 'gdp',
        sizeName: 'GDP',
        colorKey: 'gdpChange',
        colorName: 'Change',
        colorRange: ['#FF9800', '#8BC34A'],
    },
],

In this configuration:

• colorKey supplies numeric values for the colour scale
• colorName sets the title that appears next to the colour value in tooltips
• colorRange supplies the colours for the colour scale (optional)

Other Colours

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 node receives the colour indexed by the index of its root node

Labels

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.

Gradient Legend

The Gradient Legend aids in matching the colour coding of the Sunburst Series to the underlying values, and is enabled by default.

series: [
    {
        type: 'sunburst',
        colorKey: 'gdpChange',
        // ...
    },
],
gradientLegend: {
    enabled: true,
},

Position

By default the Gradient Legend is placed at the bottom of the chart. Use the position option to change this.

gradientLegend: {
   position: 'right',
   reverseOrder: true
},

In the above example, reverseOrder is used to change the direction of the Gradient Legend to display the values from top to bottom.

Size

gradientLegend: {
    gradient: {
        thickness: 50,
        preferredLength: 400,
    },
},

In the above configuration:

• thickness controls the thickness (or width) of the gradient bar.
• preferredLength sets the initial length of the gradient bar. It is only preferred, as the Gradient Legend is constrained by the container edges.

Labels

It is possible to customise the font, colour and padding of the labels by using the scale options.

gradientLegend: {
    scale: {
        label: {
            fontSize: 20,
            fontStyle: 'italic',
            fontWeight: 'bold',
            fontFamily: 'serif',
            color: 'red',
        },
        padding: 20,
    },
},

API Reference