Examples · Dumbbell chart

Dumbbell chart examples

A dumbbell chart — a dumbbell plot, or a connected dot plot — gives each row exactly two dots and a link between them. The link is the point: how far did this move, and in which direction? Hover any row and the whole pair lights together, with the signed change spelled out.

When to use it

Before-and-after comparisons where the size of the change is the headline
Two snapshots per category — two years, two builds, two surveys — without the clutter of grouped bars
Spotting the rows that moved against the tide: a link pointing the other way is impossible to miss

Not the right shape?

A journey with many readings per row — a dumbbell keeps only the two ends. The months in between belong to a line graph, and a single snapshot ranks better as a bar or lollipop chart.

Real-world examples

Before and after the rewrite

Each route keeps its own pair: the old median on the left dot, the new one on the right, and the link's length is the saving. No bar pairs to squint at — the gap is drawn, not implied.

Open in maker with this data

View the spec

{
  "type": "dumbbell",
  "theme": "ink",
  "title": "Median page load by route (ms)",
  "source": "Synthetic monitoring, two releases",
  "data": {
    "labels": [
      "Home",
      "Search",
      "Checkout",
      "Account"
    ],
    "series": [
      {
        "name": "Before",
        "values": [
          420,
          510,
          780,
          390
        ]
      },
      {
        "name": "After",
        "values": [
          310,
          330,
          410,
          300
        ]
      }
    ]
  }
}

When rows move in both directions

Meetings fell, deep work grew — links pointing opposite ways tell the reallocation story in one frame, where two separate bar charts would hide it.

Open in maker with this data

View the spec

{
  "type": "dumbbell",
  "theme": "mint",
  "title": "Weekly hours by activity",
  "source": "Time tracking, self-reported",
  "data": {
    "labels": [
      "Meetings",
      "Deep work",
      "Email",
      "Support"
    ],
    "series": [
      {
        "name": "Last year",
        "values": [
          11,
          14,
          8,
          5
        ]
      },
      {
        "name": "This year",
        "values": [
          8,
          17,
          6,
          7
        ]
      }
    ]
  }
}

Open this chart in a maker Chart maker from scratch

Questions people ask

What is a dumbbell chart?

A chart that gives every category two dots on one scale — a first and a second reading — and joins them with a line. Some tools call it a dumbbell plot or a connected dot plot; the shape is the same, and the connecting link is what makes the change readable.

Dumbbell or slope chart?

Both compare two moments. A dumbbell keeps every pair on its own row of a shared scale, so the sizes of the gaps compare cleanly down the page. A slope chart draws each row as a tilted line between two axes, so crossings and rank flips read better. Gaps → dumbbell; overtaking → slope.

Dumbbell or range chart?

They look alike and mean different things. A dumbbell's two dots are two readings of the same measure at different times. A range's two ends are the low and high of one period — a spread, not a change. If swapping the two columns would change the story, you want the dumbbell.