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

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.

Horizontal Pyramid Copy Link

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

{
    direction: 'horizontal',
}

Reverse Pyramid Copy Link

To reverse a Pyramid Series, set reverse to true.

{
    reverse: true,
}

Customisation Copy Link

Fills Copy Link

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

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

Shape Copy Link

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

{
    aspectRatio: 3 / 2,
}

In this configuration:

• aspectRatio is set such that width will grow 3px for every 2px of height.

API Reference Copy Link