Donut Charts
Donut charts display part-to-whole relationships through circular segments with a hollow center. They visualize proportions and percentages in a compact, easy-to-read format that makes data comparisons intuitive.
The hollow center distinguishes Donut charts from Pie charts and provides space for displaying summary information such as totals or key metrics. Donut charts support multiple nested series, enabling you to show hierarchical data relationships in concentric rings. Common use cases include market share analysis, budget breakdowns, sales distribution across categories, and resource allocation across departments.
Binding to Data
You can bind the Donut chart series to an array through the data property in three formats:
-
Binding to numbers—Use a simple array of numeric values where each number represents a data point value. The chart auto-generates categories.
tspublic data: number[] = [35, 25, 20, 20]; -
Binding to arrays—Use arrays of
[value, category]pairs where the first element is the data point value and the second element is the category name.tspublic data: [number, string][] = [ [35, 'Apples'], [25, 'Oranges'], [20, 'Bananas'], [20, 'Grapes'] ]; -
Binding to objects—Use an array of objects with custom properties.
tspublic data: Array<{ value: number; category: string; color?: string; explode?: boolean }> = [ { value: 35, category: 'Apples', color: '#ff6358', explode: true }, { value: 25, category: 'Oranges', color: '#ffd246' }, { value: 20, category: 'Bananas', color: '#28b4c8' }, { value: 20, 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.explodeFieldstringNo The property name that contains the explode state with booleanvalues.
The following example demonstrates how to bind the Donut chart series to data using object models.
Displaying Labels in Angular Donut Chart
The following example demonstrates displaying labels on the outside of the Angular Donut chart. Use the Series autoFit option to avoid clipping of the labels' content.
Angular Donut Chart Label Alignment
The labels of the Angular Donut chart can be aligned in different ways to enhance readability and visual appeal. The two primary alignment modes are:
"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:
The following example demonstrates how to align the labels of the Angular Donut chart in different ways.
Displaying Multiple Series
The Donut chart supports multiple series, allowing you to visualize hierarchical data in concentric rings. Each series represents a different level of the hierarchy, with the innermost ring corresponding to the top-level category and outer rings representing subcategories.
The following example demonstrates how to create a Donut chart with multiple series.
Exploding Donut Segments
You can visually separate specific donut 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 donut 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 Donut chart.
Customizing the Appearance
You can customize the visual appearance of the Donut chart through several properties that control the chart's structure and styling:
holeSize—Specifies the diameter of the center hole as a percentage (0-100). Larger values create a thinner ring.startAngle—Determines the starting angle in degrees for the first segment. Default is 90 degrees (top position). Use positive values to rotate clockwise.padding—Sets the spacing around the chart in pixels, useful for preventing label clipping.border—Configures the border appearance with color and width properties.opacity—Controls the transparency of the segments (0.0 to 1.0).overlay—Specifies the appearance settings for overlay effects. UseroundedBevelorsharpBevelfor 3D-like gradient effects, ornonefor flat appearance.
The following example demonstrates how to customize the appearance of Donut charts using an interactive configurator.
Displaying Information in the Center
The center of the Donut chart can be utilized to display important summary information, such as total values or key metrics. This enhances the chart's effectiveness by providing context to the visualized data.
Using the Center Template
The center template is an HTML overlay that is positioned over the center of the Donut chart. To implement the content, use the normal Angular template syntax and include arbitrary markup.
While documents, which are exported through the HTML Drawing API display the content of the center template, vector graphics and exported files do not render it.
The following example demonstrates how to use the donut center template to display information in the center of the Donut chart.
Using Drawing Visuals
Similar to the other chart types, you can overlay the Donut series with custom drawing elements. The approach of using drawing visuals is more flexible than using the donut center template and also has the advantage that the overlay is part of the chart drawing surface. As a result, all exported files render the content of the donut center as an integral element of the component.
The following example demonstrates how to use drawing visuals to display information in the center of the Donut chart.
Support and Learning Resources
- Donut Chart Homepage
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Charts
- Pie 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