# Angular Pyramid Charts

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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/pyramid/overview/source.txt)

## Binding to Data

You can bind the Pyramid chart series to an array through the [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#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.

  ```ts
  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.

  ```ts
  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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#field)                 | `string`  | Yes\*    | The property name that contains the numeric value (\*required when binding to objects). |
  | [`categoryField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#categoryfield) | `string`  | No       | The property name that contains the category with `string`, `date`, or `number` values. |
  | [`colorField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/pyramid/data-binding/source.txt)

## 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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#dynamicheight) property to `false`.

The following example demonstrates the `dynamicHeight` property in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/pyramid/pyramid-dynamic/source.txt)

## Segment Spacing

You can add spacing between pyramid segments by setting the [`segmentSpacing`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/series-types/pyramid/pyramid-segment-spacing/source.txt)

## Support and Learning Resources

* [Pyramid Chart Homepage](https://www.telerik.com/kendo-angular-ui/charts#pyramid-chart)
* [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/installation/getting-started)
* [API Reference of the Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api)
* [Glossary](https://www.telerik.com/kendo-angular-ui-develop/components/charts/glossary)
* [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started)
* [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial)
* [Video Courses](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started/video-onboarding)
* [Chart Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=256)
* [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular)
* [Knowledge Base](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base)

## Additional Resources

* [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
* [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui)
* [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)