Vue ChartsPyramid Series

A Pyramid Series is a triangular shaped visualization that uses the height of each segment to represent its value as a proportion of the whole.

Simple Pyramid

To create a Pyramid Series, use the pyramid series type.

series: [
    {
        type: 'pyramid',
        stageKey: 'group',
        valueKey: 'value'
    },
],

In this configuration:

stageKey defines the categories, each of which is mapped to segments in the pyramid.
valueKey provides the numerical values, determining the height of each segment.

To create a horizontal Pyramid Series, set the direction to horizontal.

{
    direction: 'horizontal',
}

To reverse a Pyramid Series, set reverse to true.

{
    reverse: 'true',
}

The colours in a Pyramid Series can be customised with the fills property.

{
    fills: ['#5C6BC0', '#3F51B5', '#303F9F', '#1A237E'],
}

The shape of the triangle can be set using the aspectRatio property.

{
    aspectRatio: 3 / 2,
}

In this configuration: