Vue ChartsPie Series

A Pie Series displays categorical data as proportional slices within a circle.

Simple Pie Copy Link

To create a Pie Series, use the pie series type.

{
    series: [{ type: 'pie', angleKey: 'amount', legendItemKey: 'asset' }],
}

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

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.

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

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

API Reference Copy Link