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
| When to use | When not to use |
|---|---|
| To compare two related values for each category or time period (e.g., actual vs. target, current vs. previous). | When there are more than two values per category, as the chart becomes cluttered. Consider using clustered or stacked bar chart instead. |
| To highlight the size of the gap or difference between two categories. | When precise trends for each category are more important than the difference. Consider using a line chart instead. |
| When the goal is to show how differences change across categories or over time. | When gaps between values are too small or not meaningful, making the visual comparison ineffective. |
| To emphasize relative performance against a benchmark or paired value. | If there’s no benchmark or paired value to compare. Consider using a bar chart instead. |
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 for any complex metrics if needed.
- Reference Content for additional guidance on crafting content within apps and experiences.
Titles and subtitles
- Use clear, informative titles to help users understand the chart’s topic and key takeaways.
- Frame titles as a headline that summarizes the trend or insight.
- Use subtitles to add more detail about the data being shown and help users understand how to 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 remove unnecessary details and reduce the mental effort needed to compare numbers. If needed, provide higher-precision numbers in a tooltip for users who want more information.
| 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. |
