Angular Pie Chart
Pie charts are circular charts that 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.
Binding to Data
You can bind the Pie chart series to an array through the data property in three formats:
-
Binding to numbers—Use a simple array of numeric values.
tspublic data: number[] = [40, 30, 20, 10]; -
Binding to arrays—Use arrays of
[value, category]pairs.tspublic data: [number, string][] = [ [40, 'Apples'], [30, 'Oranges'], [20, 'Bananas'], [10, 'Grapes'] ]; -
Binding to objects—Use an array of objects with custom properties.
tspublic data: Array<{ value: number; category: string; color?: string }> = [ { value: 40, category: 'Apples', color: '#ff6358' }, { value: 30, category: 'Oranges', color: '#ffd246' }, { value: 20, category: 'Bananas', color: '#28b4c8' }, { value: 10, category: 'Grapes', color: '#2d73f5' } ];When binding to objects, specify which properties contain the data through the following field mappings:
Property Data type Required Description fieldstringYes* The property name that contains the numeric value (*required when binding to objects). categoryFieldstringNo The property name that contains the category with string,date, ornumbervalues.colorFieldstringNo The property name that contains the color with stringvalues.
The following example demonstrates how to bind the Pie chart series to data using object models.
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