Donut / Pie chart

Description ​

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.

Appearance ​

For all types, show the values clockwise. The angle of the padding between the values:

Start and end angles ​

For donut chart:

startAngle={90}
endAngle={-270}

startAngle={90}
endAngle={-270}

For semi donut chart:

startAngle={180}
endAngle={0}

startAngle={180}
endAngle={0}

Donut chart ("doughnut") 🍩 ​

	Appearance example	Description, styles
Charts inside Summary type components.		The donut size is 24px * 24px. The line thickness is 6px. innerRadius={6}, outerRadius={12}
Chart inside small widgets (less than 400px).		The donut size is 80px * 80px. The line thickness is 20px. innerRadius={20}, outerRadius={40}
Chart inside large widgets (more than 400px).		The donut size is 180px * 180px. The line thickness is 30px. innerRadius={60}, outerRadius={90}

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. innerRadius={6}, outerRadius={12}
Chart inside small narrow widgets (less than 400px).		The donut size is 80px * 40px. The line thickness is 20px. innerRadius={20}, outerRadius={40}
Chart inside large widgets (more than 400px).		The donut size is 180px * 90px. The line thickness is 30px. innerRadius={60}, outerRadius={90}

Legend ​

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.

Long label ​

If legend label is very long, wrap it to the next line.

Main metric ​

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

Metric styles ​

• The metric default size is 24px (--fs-500). The text color is --text-primary.
• The default size of the metric legend is 12px (--fs-100). The text color is --text-secondary.
• There is no margin between them.
• They are centered vertically and horizontally relative to the chart.

Donut	Semi donut	Donut in a small widget

Interaction ​

	Appearance examples	Styles
default
hover		When hovering over a sector, outerRadius increases by 8px. For a clickable sector the cursor changes to pointer.
active		The outerRadius of the active sector is increased by 8px. In the legend, the elements related to the inactive sectors get 30% opacity.

Tooltip ​

Hovering over the chart triggers a tooltip with the name and value of the data.

Edge cases ​

Here you will find the states for some specific cases. All other "empty states" for widgets are specified in Error & n/a widget states.

Null values ​

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 --text-secondary color.

Not enough space for the legend ​

In this case, move legend under the chart. The margin from the chart to the legend is 24px.

Initial loading ​

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.

Use the --skeleton-bg color token for the skeleton background color.

Usage in UX/UI ​

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