Dumbbell plot
Chart comparing the difference between two related variables across multiple categories or date periods.
Dumbbell plots use dots connected by lines to compare the values of two series of data. The position of the dots represents the numeric values, with the length of the line showing the difference or gap between the data series.
Also known as: Barbell chart, connected dot plot.
Anatomy
A. Title (optional): Brief text summarizing the contents of the chart.
B. Data table button (optional): UI icon button enabling users to view the chart’s data in table format.
C. Keyboard instructions (required): UI icon button enabling users to access the chart’s keyboard navigation instructions.
D. Subtitle (optional): Additional text providing details, context, or instructions about the chart.
E. Legend (optional): Area explaining the meaning of each dot in the dumbbell plot to help users interpret the chart.
F. Plot canvas (required): Area containing the graphic part of the chart including axes, gridlines, and other elements.
G. Data markers (required): Dots connected by lines representing two data series and the difference between them.
H. Vertical axis (required): Scale representing numeric values.
I. Horizontal axis (required): Scale representing a date period or a category.
Usage
| Component variant | When to use | When not to use |
|---|---|---|
| Trend with categories | To visualize changes or progress over time between two categories, such as a target and actual value. To highlight the difference or gap between two categories. To compare how the size of the gap changes over time or across categories. | If there are more than two categories for each date period. Consider using a Clustered bar chart (internal only) or a Stacked bar chart (internal only) instead. If understanding each category’s overall trend is more important than the difference between categories. Use a Line chart instead. If the gaps between the two categories are too small or not meaningful to the analysis. |
| Current vs previous trend | To visualize the difference between two date periods, such as current year and previous year. To identify when the pace of change is accelerating or slowing down. | If understanding each category’s overall trend is more important than the difference between categories. Use a Line chart instead. For comparing two non-sequential categories, like a client’s performance compared to a benchmark. Use the Compare trend to benchmark dumbbell plot or the Trend with categories dumbbell plot. |
| Compare trend to benchmark | To identify which categories over performed or underperformed a benchmark, such as market average, goal, or budget. To compare the size of the gap between each category and the benchmark. | If there isn’t a benchmark to use for comparisons. Use a Bar chart instead. If the gaps between the two categories are too small or not meaningful to the analysis. |
Content
- Always use sentence case except for proper nouns or acronyms.
- Use plain language and avoid abbreviations or jargon.
- Provide more detailed explanations and definitions on demand for any metrics that have complex business logic.
- Reference Content for additional guidance on crafting content within apps and experiences.
Titles and subtitles
- Use informative chart titles to help users understand chart’s topic and what they can expect to learn from it.
- Frame titles as a headline that summarizes the trend or insight.
- Use subtitles to provide more detail about the data being shown and to help users understand how to read and interpret the chart.
- Consider phrasing titles or subtitles as questions to guide the user’s analysis, especially on exploratory dashboards where users are likely to spend significant time analyzing data.
- Avoid titles and subtitles that are too general or vague.
Labels
- Ensure numbers, dates, and other data or axis labels are formatted consistently.
- Follow plain language principles, such as using shorter and simpler words and phrases.
Number format
Simplify number formats to limit unnecessary details and reduce the mental effort needed to compare numbers. If needed, numbers with higher precision can be provided in a tooltip to users who want to access more detail.
| Data type | Recommended format |
|---|---|
| Large numbers | Use abbreviated format, such as 1.2k instead of 1,200. |
| Percentage | Use whole percentage points, except for special cases where basis points are needed. |
| Basis points | Use basis points (bps) when change percentage is very small. 1 bps equals 0.01% (0.0001 in decimal format). |
| Currency | Round to the appropriate level of detail that is required for the analysis. For example, for U.S. currency round to the nearest dollar amount. |
