Donut Chart

Figma | Storybook

Overview

A donut chart is a pie chart with a "hole" in the center. The chart is divided into parts that show the percentages from the data.

Other names: Doughnut Chart

Behaviors

Legend visibility

The chart's legend displays the data. Selecting the legend items toggles the visibility of the data. When the legend item is selected, the data is hidden from the chart and the text appears greyed out on the legend.

All data should be displayed by default. Users can then decide what they want to hide or show.

Don't hide the legend completely, unless only one type of data is displayed.

Kendo Legend Guide

Variations

Default

Uses default chart colors. Default donut charts are for data that doesn't need severity or status treatment.

Severity

Charts that use the colors and labeling, as outlined in the severity guidelines, to display severity data to the user.

Status

Provide users with the statuses from a collection of items. The statuses are Success, Warning, Error, and Informational.

Usage guidelines

General

Do use donut charts:

• When you show relative proportions and percentages of a whole dataset.
• With small datasets—no more than 6 categories.
• When comparing the effect of one factor on different categories.

Don't use donut charts:

• If you have a big dataset.
• If you want to make a precise or absolute comparison between values.

Pie chart or donut chart?

• Either or. Pie charts and donut charts display the same types of data. Choose one or the other and stick to it across a product for consistency's sake.
• The only real difference is that donut charts can convey additional data points in the “hole.” Don't do this, as it makes the chart more difficult to read.

Content guidelines

Labels

Donut chart labels should be short, while still clearly describing the data. Use title case. There are two alignment options for labels, circular and column. Circular is the default, so use circular for consistency's sake.

Placement

Legends can be placed above, below, or on either side of a chart. Choose the best placement depending on the amount of space and text alignment, but make sure the placement is consistent across a product. This helps users anticipate where to look for a legend when interpreting data.

Related

Referenced in this section:

Bar chart component

Colors guidelines

Data visualization guidelines

Line Chart component

Pie chart component

Severity guidelines

Typography guidelines