New to Kendo UI for Angular? Start a free 30-day trial

Angular Donut Chart

Updated on Dec 12, 2025

Donut charts are circular charts that represent a variation of the Angular Pie charts and are capable of displaying multiple nested series.

Change Theme

Theme

Loading ...

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.
ts
```
public 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.
ts
```
public data: [number, string][] = [
    [35, 'Apples'],
    [25, 'Oranges'],
    [20, 'Bananas'],
    [20, 'Grapes']
];
```

Binding to objects—Use an array of objects with custom properties.

public 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
`field`	`string`	Yes*	The property name that contains the numeric value (*required when binding to objects).
`categoryField`	`string`	No	The property name that contains the category with `string`, `date`, or `number` values.
`colorField`	`string`	No	The property name that contains the color with `string` values.
`explodeField`	`string`	No	The property name that contains the explode state with `boolean` values.

The following example demonstrates how to bind the Donut chart series to data using object models.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

Angular Donut Chart Label Alignment

The Angular Donut 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:

Change Theme

Theme

Loading ...

Displaying Multiple Series

The Donut chart renders multiple series in the form of concentric rings. This behavior is different from the behavior of the Pie chart, which supports only one series.

Change Theme

Theme

Loading ...

Displaying Information in the Center

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.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

Angular Donut Chart

Binding to Data

Displaying Labels in Angular Donut Chart

Angular Donut Chart Label Alignment

Displaying Multiple Series

Displaying Information in the Center

Using the Center Template

Using Drawing Visuals

Support and Learning Resources

Additional Resources