New to Kendo UI for Angular? Start a free 30-day trial

Pyramid Charts

Updated on Jan 20, 2026

Pyramid charts display hierarchical data in progressively increasing proportions from smallest at the top to largest at the bottom. Use them to visualize organizational structures, skill distributions, or any data where values grow from one level to the next.

Change Theme

Theme

Loading ...

Binding to Data

You can bind the Pyramid chart series to an array through the data property in three formats:

Binding to numbers—Use a simple array of numeric values.
ts
```
public data: number[] = [120, 90, 60, 30];
```

Binding to arrays—Use arrays of [value, category] pairs.

public data: [number, string][] = [
    [120, 'Stage 1'],
    [90, 'Stage 2'],
    [60, 'Stage 3'],
    [30, 'Stage 4']
];

Binding to objects—Use an array of objects with custom properties.

public data: Array<{ value: number; stage: string; color?: string }> = [
    { stage: 'Visitors', value: 125000, color: '#ba68c8' },
    { stage: 'Leads', value: 45000, color: '#ab47bc' },
    { stage: 'Qualified', value: 18500, color: '#8e24aa' },
    { stage: 'Customers', value: 6200, color: '#6a1b9a' }
];

When binding to objects, specify which properties contain the data through the following field mappings:

Property	Data type	Required	Description
`field`	`string`	Yes*	The property name that contains the numeric value (*required when binding to objects).
`categoryField`	`string`	No	The property name that contains the category with `string`, `date`, or `number` values.
`colorField`	`string`	No	The property name that contains the color with `string` values.

The following example demonstrates how to bind the Pyramid chart series to data using object models.

Change Theme

Theme

Loading ...

Fixed Height

By default, the height of the pyramid segments is proportional to the value. You can use a fixed height for all segments by setting the dynamicHeight property to false.

The following example demonstrates the dynamicHeight property in action.

Change Theme

Theme

Loading ...

Segment Spacing

You can add spacing between pyramid segments by setting the segmentSpacing property. This property specifies the space in pixels between different segments, helping to visually separate each level.

The following example demonstrates the segmentSpacing property.

Change Theme

Theme

Loading ...

Pyramid Charts

Binding to Data

Fixed Height

Segment Spacing

Support and Learning Resources

Additional Resources