Vue ChartsDonut Series

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

Simple Donut Copy Link

To create a Donut Series, use the donut series type.

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

An optional innerRadiusRatio can be provided which 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 Copy Link

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: 44,
                    color: 'green',
                },
            ],
            innerCircle: {
                fill: '#c9fdc9',
            },
        },
    ],
}

Multiple Donuts Copy Link

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 Copy Link

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 Copy Link