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 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.
Donut charts become difficult to understand when they include many segments. Try to use 2-3 segments if possible, and no more than 5.
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.|
|Mar 03, 2020||1.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
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).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
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.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.