Basic data visualization rules are described in the Chart principles.
Donut chart visualizes parts to the whole by dividing the circle into proportional segments.
The length of each segment is a proportional fraction, and the entire circle is ALWAYS the total sum of all data, equal to 100%.
Important points to keep in mind when using donut chart:
- We recommend using a donut chart when you need to focus on the proportions of categories, rather than on specific values.
- If you need to visualize more than 5 categories, we recommend using a different chart type (for example, Bar chart).
Donut chart has several disadvantages:
- The number of displayed values is very limited, because the more values, the smaller the size of each individual segment. Accordingly, these charts are not suitable for working with large amounts of data.
- They take up more space than, for example, Bar chart.
- They are inconvenient for making accurate comparisons between different datasets, since visually the area of segments is more difficult to compare than the length.
The creation of the donut chart is credited to the Scottish engineer William Playfair. Back in 1801, he used it to show the proportions of land occupied by the Turkish Empire in Asia, Europe and Africa.
The French don’t call such charts donut chart, they compare it with round cheese Camembert.
For all types, show the values clockwise. The angle of the padding between the values:
Start and end angles
For donut chart:
For semi donut chart:
Donut chart ("doughnut") 🍩
|Appearance example||Description, styles|
|Charts inside Summary type components.||The donut size is 24px * 24px. The line thickness is 6px. |
|Chart inside small widgets (less than 400px).||The donut size is 80px * 80px. The line thickness is 20px. |
|Chart inside large widgets (more than 400px).||The donut size is 180px * 180px. The line thickness is 30px. |
Semi donut chart ("half doughnut") 🔪🍩
|Appearance example||Description, styles|
|Charts inside Summary type components.||The donut size is 24px * 12px. The line thickness is 6px. |
|Chart inside small narrow widgets (less than 400px).||The donut size is 80px * 40px. The line thickness is 20px. |
|Chart inside large widgets (more than 400px).||The donut size is 180px * 90px. The line thickness is 30px. |
Show legend with the values.
- The legend shouldn't be far from the chart, the margin is 24px maximum.
- The legend label has 16px margin-right. The margin between the values is 12px.
- The legend is aligned to the top of the chart.
- If you need to place the legend under the chart, then add 24px margin to the legend.
If legend label is very long, wrap it to the next line.
- For a big donut chart, you can select the largest or the main value and place it inside the chart.
- The metric must have a name.
- The additional metric information can be hidden in the Info icon next to the metric name.
If you have a small donut and the widget should be compact, the metric can be placed over the legend.
- The metric default size is 24px (
--fs-500). The text color is
- The default size of the metric legend is 12px (
--fs-100). The text color is
- There is no margin between them.
- They are centered vertically and horizontally relative to the chart.
If the metrics name is too long, wrap it to the next line.
In a half-sized donut, the name of the metric should be as short as possible, and the explanation can be contained in the Info icon.
|Donut||Semi donut||Donut in a small widget|
The cursor changes to
pointer when the sector is clickable. In all other cases, the cursor is
|hover||When hovering over a sector, |
Hovering over the chart triggers a tooltip with the name and value of the data.
Disable tooltip for the smallest charts which serve as an illustration to a particular metric.
Here you will find the states for some specific cases. All other "empty states" for widgets are specified in Error & n/a widget states.
If the data for any category is zero, then don’t disable the legend. Show 0 as the values in the legend, use
--text-secondary color. The zero value sector isn’t displayed on the chart.
Value less than or equal 1%
In this case, display 1% of the sector.
Not available data
If for some reason the data isn’t known or not available, show
n/a in the legend and tooltip, use
Not enough space for the legend
In this case, move legend under the chart. The margin from the chart to the legend is 24px.
When the chart is loading for the first time, show Skeleton instead of the chart.
If the chart has a title, show it during loading. The user will have an idea of what is being loaded and whether they need to wait for the loading process to complete.
For more information about this state, refer to Skeleton.
--skeleton-bg color token for the skeleton background color.
Usage in UX/UI
It isn’t recommended to display more than five of data on the donut chart. If there are more than five categories, display the largest five, and place the others in the sixth category and name it Other.
Don't use donut chart to compare two sets of values. Instead, you can use Stacked bar chart.
The starting angle for displaying values is always