Donut charts are ideal for comparing proportions of a whole. Each segment of a donut chart is mapped to a dimension value with an arc length determined by a metric.
A standard donut chart is a stacked bar chart mapped onto a polar coordinate plane (a circle). The space in the center of the chart is used to provide a total of the displayed metric. A legend or direct labels are required.
A boolean donut chart can only show two values: a “positive” or a “negative.” When a positive statement is more relevant information, the segment is shown in a color such as green and the negative is shown in gray. When a negative statement is more relevant, the segment is shown in a color such as red and the positive is shown is grey. These colors can be changed to accommodate different cultural meanings associated with positive and negative sentiment. The center is used to display a percentage and a label for the more relevant (colored) value. A legend is not required.
Direct labels are often easier to understand than a legend. When space allows, use direct labels that show the segment name, the percentage of the total, and the metric value.
When constraints make it impossible to use direct labels, show a categorical color legend. A legend should be positioned to the right of a donut chart, but if there is not enough horizontal space, it can be placed below the chart.
Hovering over a segment of a donut chart causes all other segments to fade back from the view. A tooltip displays the segment name, percentage of total, and metric value.
Chart segments can be interactive. When they are, leverage the selected state and surface actions in a panel, rail, or floating menu.
A donut chart can be navigated using a keyboard. Focus begins at the twelve o’clock position and moves clockwise around the chart. A blue border is applied to the segment in focus and a tooltip displays the segment name, percentage of total, and metric value.
Charts often require time to load, so include a loading state.
When data returns null (blank) values, they should be omitted. An explanation should be included of what was omitted and why.
When there is no data available, a chart should indicate as such and give direction as to how to make data appear there. Do not render an empty chart.
There are occasionally errors with fetching data. When this happens, give users a helpful, actionable explanation of what happened and what they can do to fix things. Do not render an empty chart.
Each segment of a donut chart should have a unique, categorical color. If your data is sequential, use a histogram instead.
Donut charts become difficult to understand when they include many segments. Try to use 2-3 segments if possible, and no more than 5.
The segments of a donut chart should always add up to 100%. Roll up any excluded values into an “other” segment.
Segments of donut charts should be sorted with the largest value starting in the twelve o’clock position, followed by each smaller value in succession moving in the clockwise direction.
|Right Arrow||Moves focus clockwise to the next segment. If focus is already on the last segment or there are no segments, the focus does not move.|
|Left Arrow||Moves focus counter-clockwise to the next segment. If focus is already on the first segment or there are no segments, the focus does not move.|
|Home||Moves focus to the first segment of the chart beginning at the twelve o’clock position.|
|End||Moves focus to the last segment of the chart.|
|Space or Enter||Triggers the selection state of a segment.|
|Apr 06, 2022||2.0.0|
|Apr 16, 2021||1.0.1|
|Mar 04, 2020||1.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).
Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
UI language and information design considerations have been incorporated into component design.
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Includes content standards or usage guidelines for how to write or format in-product content for the component.
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.
Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.
Component is included in the Spectrum for Adobe XD plugin.