React chart example
Dumbbell chart
Show the change between two points for each category with a connecting bar.
What is a dumbbell chart?
A dumbbell chart draws two dots per category — a before and an after — joined by a bar. The gap between the dots is the change, and its direction is read from which dot sits further along the scale.
When to use it
Use it to compare two moments or two groups across many categories: this year against last, men against women, plan against actual. It is clearer than two sets of columns because the gap itself becomes the mark. Use a slope chart instead when you want the crossing and re-ranking between the two points to be visible.
Design tips
Sort by the size of the gap, not alphabetically — the ranking is the finding.
Colour the two dots consistently and label what each one means once, not per row.
Keep the axis shared and honest; a truncated scale exaggerates every gap at once.
Build this chart in React
Compare with
Use when each category has one value rather than two endpoints.
Use when separate period totals matter more than paired gaps.
Graphy Chart SDK
Add Graphy’s dumbbell charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.