Kendo UI for Angular

Angular Pyramid Chart

  • Visualize data within a pyramidal structure organized into horizontal segments.
  • Part of the Kendo UI for Angular library along with 110+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
Pyramid Chart Header
  • Overview

    The Angular Pyramid Chart is used to visualize data in a pyramidal structure with horizontal segments. The specific chart shape facilitates a different size for each section, effectively illustrating the hierarchy of topics through the width of each section. 

    The Pyramid Chart is ideal for representing stages within a sales process and for showcasing the potential revenue from each stage. It is also suitable for identifying potential problem areas and for illustrating multiple values.

    See the Angular Pyramid Chart Overview demo

    Pyramid Chart Overview
  • Fixed Height

    By default, the height of the pyramid segments corresponds to the value they represent. To establish a fixed height for all segments, simply set the dynamicHeight property to false.

    See the Angular Pyramid Chart Fixed Height demo

  • Data Binding

    You can populate the Angular Pyramid Chart series with data from various source types, including numbers, arrays and objects (or models)— simply specify the desired fields.

    See the Angular Pyramid Chart data binding demo   

  • Panning and Zooming

    Leverage the built-in pan and zoom functionality to enable users to zero in on specific ranges of the Kendo UI for Angular Pyramid Chart. The component makes use of a drag motion for panning and a mouse wheel or pinch-and-zoom motions for zooming. Additionally, you can disable panning and zooming for an axis to prevent users from moving vertically or horizontally across the chart plot area. 

    See the Angular Pyramid Chart pan and zoom demo 

  • Rendering Modes

    The Angular Pyramid Chart renders data in both Canvas and SVG formats. By default, the SVG format to ensures an always crips presentation of your data. When prioritizing performance, you can easily transition to a canvas format with a single configuration option. This will ensure your chart can effectively handle substantial amounts of data and real-time updates.

    See the Angular Pyramid Chart rendering demo 

  • Export Options

    You can export your Angular Pyramid Chart to PDF, SVG, PNG and the Kendo UI drawing format. In case you need to change the image size or fit the chart to a specific paper size, the intuitive export method will enable you to preserve the chart’s quality and rendering in the output file.  

    See the Angular Pyramid Chart export demo   

  • Appearance

    You can easily customize the series colors of the Angular Pyramid Chart with one of our predefined color sets, including Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (resembles the Bootstrap styling) and Fluent (based on Microsoft Fluent UI). Moreover, you have the flexibility to tailor any of the built-in themes or create a completely new theme to match your branding using the Progress ThemeBuilder. 

    See the Angular Pyramid Chart appearance demo  

  • Globalization

    The Kendo UI for Angular Pyramid Chart supports globalization and localization capabilities for a seamless experience with any application’s language and locale. You can also utilize the right-to-left (RTL) rendering for languages whose scripts are read right to left. 

    See the Angular Pyramid Chart globalization demo 


All Kendo UI for Angular Components

Next Steps

Get Started with Kendo UI for Angular

Kendo UI for Angular - Kendoka