Pie charts are circular charts, which display data in the form of single-series sectors from a two-dimensional circle and are useful for rendering data as part of a whole.
The following example demonstrates the Angular Pie chart in action.
You can bind the Pie series to an array that contains:
- Arrays which represent
- Objects which are also referred to as models.
When the Pie series is bound to objects (models), the user selects the relevant fields through the available bindings:
|Model binding||Data type||Required||Description|
|Yes||The value of the data point, if any.|
|No||The category of the data point, if any.|
|No||The color of the data point, if overridden.|
For more information on how to configure each data-binding mode, refer to the article on binding the Kendo UI Chart to data.
To avoid the clipping of the labels content, use the
autoFit series option.
The Angular Pie charts support two modes of label alignment:
"circle"(default)—The labels are positioned in circle around the Chart.
"column"—The labels are positioned in columns to the left and right of the Chart.
To select the alignment mode, set the
align attribute on the Series Labels:
Support and Learning Resources
- Pie Chart Homepage
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Charts
- Donut Charts
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Virtual Classroom (Training Courses for Registered Users)
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base