Dumbbell Chart

Description

A dumbbell chart (also called a connected dot plot or Cleveland dot plot) places two dots on the same row for each category, connected by a horizontal or vertical line. One dot represents a starting value (or baseline) and the other an ending value (or comparison), making the length of the connecting bar a direct visual encoding of the difference. The result looks like a row of dumbbells, hence the name.

This chart type excels at showing gaps, changes, or ranges between two related measurements. Common use cases include before-and-after comparisons, gender pay gaps, budget vs. actual spending, and year-over-year change. By encoding the difference as a connecting line rather than requiring viewers to compare bar lengths mentally, dumbbell charts make paired comparisons faster and more accurate.

The dumbbell chart uses far less ink than paired bar charts and avoids the perceptual problems of grouped bars (where the eye must jump between non-adjacent marks). When sorted by the size of the gap, the chart immediately reveals which categories have the largest and smallest differences, supporting both specific lookups and overall pattern recognition.

When to Use

• Comparing two values per category (e.g., before vs. after, male vs. female, budget vs. actual)
• Emphasizing the magnitude and direction of change or gap
• Showing ranked differences when sorted by gap size
• Replacing grouped bar charts for cleaner, more precise paired comparisons

When NOT to Use

• When comparing more than two values per category — use a parallel coordinates plot or slope chart with multiple lines
• When you need to show the absolute size of each value prominently — use a grouped bar chart instead
• When there are very few categories (fewer than 3) and the chart would look sparse — a simple table might suffice
• When the comparison involves parts of a whole — use a stacked bar chart or pie chart

Anatomy

• Dots (endpoints): Two circles per category marking the two values being compared
• Connecting line (bar): A line segment between the two dots encoding the gap or change
• Category axis: Labels for each category, typically on the vertical axis
• Value axis: The quantitative scale shared by both dots
• Color coding: Dots are typically color-coded to distinguish the two series (e.g., blue for “before,” red for “after”)
• Gap labels: Optional text annotations showing the numerical difference

Variations

• Lollipop chart: A single dot per category connected to a baseline by a thin line, replacing a bar chart for a lighter look
• Arrow dumbbell: The connecting line ends with an arrowhead pointing in the direction of change
• Multi-point dumbbell: Three or more dots per row connected by a line, showing multiple time periods or metrics
• Diverging dumbbell: Centered on a reference value (e.g., national average), with the gap extending in both directions
• Sorted dumbbell: Categories sorted by gap size to reveal rankings

Code Reference

// Observable Plot - dumbbell chart
Plot.plot({
  marks: [
    Plot.ruleX(data, {
      x1: "start", x2: "end", y: "category",
      stroke: "#94a3b8", strokeWidth: 2
    }),
    Plot.dot(data, {x: "start", y: "category", fill: "#6366f1", r: 5}),
    Plot.dot(data, {x: "end", y: "category", fill: "#f43f5e", r: 5}),
  ],
  y: {label: null},
  x: {grid: true, label: "Value"}
})