A Pie Series displays categorical data as proportional slices within a circle.
Simple Pie
To create a Pie Series, use the pie
series type.
series: [{ type: 'pie', angleKey: 'amount', legendItemKey: 'amount' }],
In this configuration:
angleKey
determines the angle of each pie sector. The total of all values will correspond to the full pie.legendItemKey
configures the names to be used in the legend for each sector.
Labels
The Pie Series supports two types of label related to individual sectors.
- Callout labels are displayed adjacent to each sector, connected with callout line.
- Sector labels are displayed inside each sector.
series: [
{
type: 'pie',
angleKey: 'amount',
calloutLabelKey: 'asset',
sectorLabelKey: 'amount',
sectorLabel: {
color: 'white',
fontWeight: 'bold',
},
},
],
In this configuration:
calloutLabelKey
defines the variable used for the callout labels. This is also used in the Legend if nolegendItemKey
is provided, and in the Tooltips.sectorLabelKey
defines the variable used for the sector labels.
By default, callout labels won't be displayed for sectors with a value of 0
. Set calloutLabel.minAngle = 0
to show these.
It is possible to customise the text displayed in these labels by using the calloutLabel.formatter
and sectorLabel.formatter
. These functions receive a single object as a parameter containing the options and datum associated with a pie sector, and should return a string.
Please see the API reference for options to customise calloutLabel
, calloutLine
and sectorLabel
, as well as other series customisations.
Variable Sector Radius
It is possible to visualise a second variable in the Pie Series by using the radiusKey
to vary the radius of a sector based on the values. This is also known as a Rose Chart.
series: [
{
type: 'pie',
radiusKey: 'yield',
angleKey: 'amount',
calloutLabelKey: 'asset',
},
],