Spectrum
Donut chart
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.
Table of contents#
Anatomy#
Options#
Donut chart#
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.
Boolean#
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#
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.
Legend#
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.
Behaviors#
Hover#
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.
Selection#
Chart segments can be interactive. When they are, leverage the selected state and surface actions in a panel, rail, or floating menu.
Focus#
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.
Loading#
Charts often require time to load, so include a loading state.
Null values#
When data returns null (blank) values, they should be omitted. An explanation should be included of what was omitted and why.
Empty state#
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.
Error state#
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.
Usage guidelines#
Use categorical color#
Each segment of a donut chart should have a unique, categorical color. If your data is sequential, use a histogram instead.
Use up to five segments#
Donut charts become difficult to understand when they include many segments. Try to use 2-3 segments if possible, and no more than 5.
Show the whole#
The segments of a donut chart should always add up to 100%. Roll up any excluded values into an “other” segment.
Sort segments by metric#
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.
Keyboard interactions#
| Key | Interaction |
|---|---|
| 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. |
Changelog#
| Date | Number | Notes |
|---|---|---|
| Apr 06, 2022 | 2.0.0 |
|
| Apr 16, 2021 | 1.0.1 |
|
| Mar 04, 2020 | 1.0.0 |
|
Design checklist#
All interactive states
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
All color themes
Works properly across all four color themes (lightest, light, dark, darkest).
All platform scales
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Accessible use of color
Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).
Accessible contrast for text
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).
Accessible contrast for UI components
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).
Content design
UI language and information design considerations have been incorporated into component design.
Defined options
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Defined behaviors
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
Usage guidelines
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Writing guidelines
Includes content standards or usage guidelines for how to write or format in-product content for the component.
Internationalization guidelines
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Keyboard interactions
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Design tokens
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
UI kit
Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.
Generated UI kit
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.
In Spectrum for Adobe XD plugin
Component is included in the Spectrum for Adobe XD plugin.
Big number