New to Kendo UI for Angular? Start a free 30-day trial
Pie
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.
Basics
The following example demonstrates the Angular Pie chart in action.
Example
View Source
Change Theme:
Data Binding
You can bind the Pie series to an array that contains:
- Numbers.
- Arrays which represent
[value, category]tuples. - 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 |
|---|---|---|---|
field | number/null | Yes | The value of the data point, if any. |
categoryField | string/date/number/null | No | The category of the data point, if any. |
colorField | string | 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.
Auto-Fit Labels
To avoid the clipping of the labels content, use the autoFit series option.
Example
View Source
Change Theme:
Label Alignment
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:
Example
View Source
Change Theme:
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
