Pie and Donut Charts Design Only
Pie and Donut Charts are circular charts that illustrate the relationship between parts to the greater whole.
Donut Chart with Tabular Legend
A donut chart with a Tabular Legend places focus on the general relationship while also listing the specific value/percentage of each part on the side.
When to Use
- When a user is likely to need the specific values (or percentages) of each of the parts.
- When there are more than 4 categories in the chart.
When Not to Use
- When there are more than 4-6 categories, a Bar Chart may be preferable.
- When precise values are unnecessary for the user.
Examples
- Donut Chart with a Tabular Legend (shown above)
- Donut Chart with Standard Legend
- Donut Chart with Key Metric
- Donut Chart with Inline Values
- Half-Donut Chart
- Pie Chart
Usage
Pie and Donut Charts are useful in providing an immediate snapshot of individual parts in relation to the whole, but they are less helpful at conveying precise proportions and values.
Additional Recommendations
- When precise values are needed, it may be preferable to use the Tabular Legend since values may be difficult to read in smaller spaces and it is difficult to ensure proper contrast ratios.
- Limit the number of sections to 4-6. It becomes difficult to perceive relative values beyond this amount. Consider a bar chart for these scenarios.
- Do not put data categories from two or more conceptually distinct things on a pie chart. They should always be parts of the same whole.
Examples
Donut Chart with Standard Legend
This chart is preferred when it is not necessary to list the specific values alongside a donut or pie chart.
Donut Chart with Key Metric
This chart displays a key metric in the center of the chart. This may also be done with Donut Charts with a Tabular Legend.
When to Use
- When there is an important metric about the overall chart.
When Not to Use
- When one value is being tracked in relation to the highest possible value. Use a Gauge in those cases.
- When the metric is of secondary importance to the relative proportion of elements.
Donut Chart with Inline Values
This chart displays the value of each part within the chart itself. It should only be used when there are 2-4 categories in the chart. For more categories, consider using a Tabular Legend instead.
Half-Donut Chart
When to Use
- When you have space constraints.
- When you want something with a lesser visual focus that a full circle.
When Not to Use
- When values need to be tracked against a target, in those cases use a Gauge.
Pie Chart
A pie chart may be used instead of a donut chart when technical constraints and/or selected data visualization framework doesn’t support the use of Donut Charts. It may be paired with a standard or tabular legend.
