JavaScript ChartsPie Series

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 no legendItemKey is provided, and in the Tooltips.
• sectorLabelKey defines the variable used for the sector labels.

Both sector and callout labels implement collision avoidance by default. This means that sector labels are not displayed where the sector is too small to fit the label text. Similarly, callout labels are positioned to fit if possible, otherwise they too are hidden.

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',
    },
],

API Reference