New to Kendo UI for AngularStart a free 30-day trial

Angular Donut Chart

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

You can utilize the blank center of a Donut chart to show additional information.

Basics

To create a Donut chart in Angular, nest a <kendo-chart-series-item> component in the <kendo-chart-series> configuration component and set its type property to donut.

The following Angular Donut Chart example demonstrates the chart in action.

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 ...

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.

Change Theme
Theme
Loading ...

Support and Learning Resources

Additional Resources