Angular Pie Chart
The Angular 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
To create a Pie chart in Angular, nest a <kendo-chart-series-item> component in the <kendo-chart-series> configuration component and set its type property to pie.
The following Angular Pie Chart example demonstrates the chart in action.
Data Binding in Angular Pie Chart
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 in the Angular Pie Chart, use the autoFit series option.
Angular Pie Chart 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:
Angular Pie Chart Label Percentage
To show percentage in the Angular Pie Chart, provide a custom callback function to the content attribute of the Series Labels. In the function, convert the desired number value of the dataItem to a percentage format by using the formatNumber method of the kendo-intl package.
<kendo-chart-series-item
type="pie"
[data]="pieData"
field="value"
categoryField="category"
[labels]="{ visible: true, content: labelContent }">
</kendo-chart-series-item>public labelContent(args: SeriesLabelsContentArgs): string {
return `${args.dataItem.category} years old: ${this.intl.formatNumber(
args.dataItem.value,
"p2"
)}`;
}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)
- Video Courses
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base