# Donut

Donut charts are circular charts which represent a variation of the [Pie charts](https://www.telerik.com/kendo-vue-ui/components/charts/pie) and are capable of displaying multiple nested series.

You can use the blank center of a Donut chart to show additional information in it.

## Basic Usage

The following example demonstrates the Donut chart in action.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/chart/donut/source.txt)

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/chart/donut-series/source.txt)

## Displaying Information in the Center

To display content in the center of the Donut chart, either:

* [Use the Donut center template](https://www.telerik.com/kendo-vue-ui/components/charts/donut#using-the-center-template), or
* [Implement drawing visuals](https://www.telerik.com/kendo-vue-ui/components/charts/donut#using-drawing-visuals).

### 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 [donutCenterRender](https://www.telerik.com/kendo-vue-ui/components/charts/api/chartprops#donutcenterrender) render prop of the `Chart` component.

> While documents which are exported through the [HTML Drawing API](https://www.telerik.com/kendo-vue-ui/components/drawing/draw-dom) display the content of the center template, vector graphics and [exported files](https://www.telerik.com/kendo-vue-ui/components/charts/chart/export-options) do not render it.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/chart/donut-center/source.txt)

### Using Drawing Visuals

Similar to the other Chart types, you can overlay the Donut series with custom [drawing elements](https://www.telerik.com/kendo-vue-ui/components/drawing). 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](https://www.telerik.com/kendo-vue-ui/components/charts/chart/export-options) render the content of the donut center as an integral element of the component.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/chart/donut-center-visuals/source.txt)

## Suggested Links

* [Customize the Label Colors of a Donut Chart with Multiple Series](https://www.telerik.com/kendo-vue-ui/components/knowledge-base/donut-chart-multiple-series-different-label-colors)
* [API Reference of the Charts](https://www.telerik.com/kendo-vue-ui/components/charts/api)
* [Pie Charts](https://www.telerik.com/kendo-vue-ui/components/charts/pie)