# Slope vs dumbbell

> Two ways to show before and after.

**Short answer.** Use a slope chart when the change between two points in time is the story: risers and fallers show by the angle. Use a dumbbell when you compare two values per item, such as ours and a rival's, and the gap is the story.

Updated Nov 2, 2026 · E-commerce sample data

## 044 · Slope

September to October, one line per channel: social is the one that fell.

Conversion by channel, slope. Store conversion by channel, September to October 2026: Email 4.1% to 5.2%, Search 3.2% to 3.6%, Direct 2.7% to 3.1%, Social 2.2% to 1.9%, Affiliate 1.6% to 2.3%.

| Channel | September | October | Change (points) |
| --- | --- | --- | --- |
| Email | 4.1% | 5.2% | +1.1 |
| Search | 3.2% | 3.6% | +0.4 |
| Direct | 2.7% | 3.1% | +0.4 |
| Social | 2.2% | 1.9% | −0.3 |
| Affiliate | 1.6% | 2.3% | +0.7 |

## 066 · Dumbbell

The same two months per channel, with the gap between them.

Conversion by channel, dumbbell. Store conversion by channel, September to October 2026: Email 4.1% to 5.2%, Search 3.2% to 3.6%, Direct 2.7% to 3.1%, Social 2.2% to 1.9%, Affiliate 1.6% to 2.3%.

**Same 5 channels.** The slope chart makes the direction obvious: four channels rose, social fell from 2.2% to 1.9%. The dumbbell makes the size of each gap easy to compare: email moved the most, +1.1 points.

## If you ask

| Question | Use a |
| --- | --- |
| Which items went up or down? | Slope chart |
| How big is each gap? | Dumbbell |
| Is it two points in time? | Slope chart |
| Is it two things compared, not a change? | Dumbbell |

## Slope and Dumbbell compared

|  | Slope | Dumbbell |
| --- | --- | --- |
| Answers | What changed between two points in time | How far apart two values are |
| Shows | A line per item, angled by the change | Two dots per item and the bar between |
| Best when | Before and after | Ours against theirs, plan against actual |
| Avoid when | Many items cross into a tangle | The direction of time matters |
| Data shape | Two values per item, in time order | Two values per item |

## Common mistakes

### Slope chart

- **Too many items.** Crossing lines tangle; keep it to about ten.
- **More than two points.** For several periods, use a bump or multi-line chart.

### Dumbbell

- **No sign on the gap.** Write the gap signed, so cheaper and dearer read at once.
- **Unsorted rows.** Sort by the gap or by one of the values.

## Other ways to show it

- [045 · Bump](https://usechartory.com/charts/bump): Compare items · Crypto data
- [004 · Diverging bars](https://usechartory.com/charts/diverging-bars): Compare items · Fintech data
- [009 · Lollipop](https://usechartory.com/charts/lollipop): Compare items · Fintech data

## Slope, dumbbell and the other 130 types.

In Figma and React, in four sizes, light and dark. Pay once, every update. [See plans](https://usechartory.com/pricing). [Slope type page](https://usechartory.com/charts/slope) · [Dumbbell type page](https://usechartory.com/charts/dumbbell)

## Questions

### Can a slope chart show more than two points?

No; for a run of periods use a bump chart or a multi-line chart.

### Which one shows the gap better?

The dumbbell: the bar between the dots is the gap.

### Do both come in every size?

Yes. Slope and Dumbbell come in XS, S, M and L, each laid out again for its size, in light and dark.

### Do they install the same way?

Yes, one command each: npx shadcn add @chartory/slope and npx shadcn add @chartory/dumbbell.

## More comparisons

- [Gantt vs block timeline](https://usechartory.com/compare/gantt-vs-block-timeline)
- [Sankey vs chord](https://usechartory.com/compare/sankey-vs-chord)
- [Candlestick vs line](https://usechartory.com/compare/candlestick-vs-line)
- [Bullet vs gauge](https://usechartory.com/compare/bullet-vs-gauge)

Still not sure? Start from what the chart has to show. [Open the Chart Chooser](https://usechartory.com/chooser)