React ChartsDonut Series

A Donut Series has all the benefits of a Pie Series and allows displaying multiple datasets in a single chart.

Simple Donut

To create a Donut Series, use the donut series type and specify an innerRadiusRatio.

series: [
    {
        type: 'donut',
        calloutLabelKey: 'asset',
        angleKey: 'amount',
        innerRadiusRatio: 0.7,
    },
],

The innerRadiusRatio should be a value between 0 and 1 and defines the radius of the inner circle as a ratio of the outer radius of the chart.

Inner Labels

The innerLabels property can be used to put several lines of text in the space inside a Donut Series.

The colour of the centre area can be changed by using innerCircle.

series: [
    {
        // ...
        innerLabels: [
            {
                text: 'Total Investment',
                fontWeight: 'bold',
            },
            {
                text: '$100,000',
                spacing: 4,
                fontSize: 48,
                color: 'green',
            },
        ],
        innerCircle: {
            fill: '#c9fdc9',
        },
    },
],

Multiple Donuts

To render multiple Donut Series in a single chart without overlapping, set an outerRadiusRatio in conjunction with an innerRadiusRatio.

series: [
    {
        // outer series
        // ...
        outerRadiusRatio: 1, // the default
        innerRadiusRatio: 0.9,
        title: { text: 'Previous Year', showInLegend: true },
    },
    {
        // inner series
        // ...
        outerRadiusRatio: 0.6,
        innerRadiusRatio: 0.2,
        title: { text: 'Current Year', showInLegend: true },
    },
],

In the above configuration:

• The difference of 0.3 between the innerRadiusRatio of the outer series and the outerRadiusRatio of the inner series determines the size of the gap between the outer and inner series.
• The difference between outerRadiusRatio and innerRadiusRatio for each series determines the thickness of the ring for that series.
• The title provided for each series is displayed above the Donut Series if there is space.
• Using showInLegend displays the title within the legend item, allowing differentiation between the two series within the legend.

Shared Legend

Providing a matching legendItemKey allows synchronising of legend items across multiple Donut Series. When a legend item is clicked, all items with a matching legendItemKey are toggled.

series: [
    {
        // ...
        calloutLabelKey: 'asset',
        legendItemKey: 'asset',
    },
    {
        // ...
        legendItemKey: 'asset',
        showInLegend: false,
    },
],

Using showInLegend: false for the second series, ensures that there are no duplicate legend items.

API Reference