Angular Pie Chart
Pie charts are circular charts that display data in the form of one-series sectors of a two-dimensional circle. Each sector represents a proportion of the whole, making it easy to visualize part-to-whole relationships and compare different categories.
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.
Configuring Pie Chart Labels
The Pie Chart provides flexible label configuration options to display data effectively. You can control label positioning, prevent content clipping, and format values to enhance readability.
Auto-Fit
Labels can extend beyond the chart boundaries and get clipped when the chart size is constrained. To prevent label clipping, set the autoFit property to true, which automatically adjusts label positions to fit within the chart area.
The following example demonstrates how to enable the auto-fit feature for Pie chart labels. Toggle the checkbox to see how it affects label visibility.
Alignment
The Pie Chart supports two label alignment modes to optimize space usage and readability. Choose between circular positioning around the chart or columnar arrangement on the sides.
The available alignment modes are:
"circle"(default)—The labels are positioned in a 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 property of the Series Labels.
The following example demonstrates how to configure label alignment.
Percentage Values
By default, Pie chart labels display the raw data values from your dataset. To show how each segment relates to the whole, you can format labels as percentages.
To display percentage values, provide a custom callback function to the content property of the Series Labels. Use the formatNumber method from the @progress/kendo-angular-intl package to format values as percentages.
The following example demonstrates how to display percentage labels.
Exploding Pie Segments
You can visually separate specific pie segments from the rest of the chart to highlight them. Use the explodeField property to specify which data field contains the boolean value that determines if a segment is exploded.
When a segment is exploded, it appears separated from the pie with a small gap, drawing attention to that specific data point. This is useful for emphasizing important categories or values in your data.
The following example demonstrates how to explode segments in the Angular Pie Chart.
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