Status
The status of the component
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Best Practices
- When you want to display additional information related to the visualization (eg. A big number or KPI), you should use a donut chart instead of a pie chart.
- Donut charts are used to show a part-to-whole relationship. They are best suited to use with a few data points (you should use no more than 5).
- Segments should be proportional to their value over 360°. For example, if the total amount is 100 and one dataset is 50, that segment would take up half of the donut chart (ie. 50/100 * 360 = 180°). The donut chart should always be full (ie. With no empty segments).
- Sort segments from largest to smallest value, starting at the 12:00 position and moving clockwise.
- Use categorical colors.
- Direct labels to segments are easier to read and understand (see ‘Labels’ section below).
- Do not use multiple donut charts to show change over time.
Usage Guidelines
Hover
On hover of a segment, all other segments reduce in opacity. A tooltip follows the hovering mouse.
On hover of a legend item, all other legend items as well as their corresponding areas reduce in opacity.
Drilldown
If drilldown is possible via click, the mouse turns to a finger instead, indicating clickability.
Focus
On focus, a focus ring encompasses the segment with a corresponding tooltip.
Labels
A checkbox should be used to show or hide label groups (ie. Series name, %, metric value).
Label groups should be 24px above, below, to the left and/or to the right of the chart.
If the segment is on the left side of the chart, labels should be vertically-aligned 24px to the left of the chart (and above/below as needed). If the segment is on the right side of the chart, labels should be vertically-aligned 24px to the right of the chart (and above/below as needed).
Label groups should be right-aligned.
The distance between the % and metric value should be 16px.
Label lines should be 1px away from the chart.
Label lines should point to the middle of the segment they represent.
There should be a 4px gap between the label group and the label line.
When possible, the label line should come horizontally from the chart. If this is not possible (eg. The middle of the segment is close to the top or bottom of the chart meaning the horizontal label line would cross the chart), use a vertical line upward/downward with a horizontal line extending to its respective side.
Responsiveness
The entire chart, all its segments and the center header should proportionally resize as the chart grows/shrinks. For more information on center header resizing, please refer to the ‘Typography’ section of this documentation.
