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

Pyramid

Updated on Dec 12, 2025

Pyramid charts are useful for representing stages in a sales process and for displaying the amount of potential revenues from each stage. They are also suitable for identifying potential problem areas in the sales processes of an organization and for displaying several values.

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; category: string; color?: string }> = [
    { value: 120, category: 'Stage 1', color: '#ff6358' },
    { value: 90, category: 'Stage 2', color: '#ffd246' },
    { value: 60, category: 'Stage 3', color: '#28b4c8' },
    { value: 30, category: 'Stage 4', color: '#2d73f5' }
];

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 dynamicHeight property to false.

The following example demonstrates the dynamicHeight property in action.

Change Theme

Theme

Loading ...

Pyramid

Binding to Data

Fixed Height

Support and Learning Resources

Additional Resources