Skip to content

New: Chartory 1.0. 100 charts free in React, MIT licensed

Read the changelog

Charts / Compare

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

Conversion by channel, slopeStore 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%.SEPOCT4.1%Email5.2%3.2%Search3.6%2.7%Direct3.1%2.2%Social1.9%1.6%Affiliate2.3%ROSEFELL
Conversion by channel, slope
ChannelSeptemberOctoberChange (points)
Email4.1%5.2%+1.1
Search3.2%3.6%+0.4
Direct2.7%3.1%+0.4
Social2.2%1.9%−0.3
Affiliate1.6%2.3%+0.7

044 · SlopeSeptember to October, one line per channel: social is the one that fell.

Conversion by channel, dumbbellStore 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%.1%2%3%4%5%6%Email+1.1Search+0.4Direct+0.4Social−0.3Affiliate+0.7SEPTEMBEROCTOBER
Conversion by channel, dumbbell
ChannelSeptemberOctoberChange (points)
Email4.1%5.2%+1.1
Search3.2%3.6%+0.4
Direct2.7%3.1%+0.4
Social2.2%1.9%−0.3
Affiliate1.6%2.3%+0.7

066 · DumbbellThe same two months per channel, with the gap between them.

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

  • Which items went up or down?

    Use aSlope chart

  • How big is each gap?

    Use aDumbbell

  • Is it two points in time?

    Use aSlope chart

  • Is it two things compared, not a change?

    Use aDumbbell

SlopeDumbbell
AnswersWhat changed between two points in timeHow far apart two values are
ShowsA line per item, angled by the changeTwo dots per item and the bar between
Best whenBefore and afterOurs against theirs, plan against actual
Avoid whenMany items cross into a tangleThe direction of time matters
Data shapeTwo values per item, in time orderTwo 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

  • Weekly trading volume rankRank by weekly volume, W33 to W40: Ethereum ranked first in 6 of 8 weeks; Solana ends at #2.#1#2#3#4#5EthereumSolanaXRPToncoinDogecoinW33W35W37W40
    Weekly trading volume rank
    AssetW33W34W35W36W37W38W39W40
    Ethereum#1#1#2#1#1#1#2#1
    Solana#2#2#1#2#3#2#1#2
    XRP#3#4#3#3#2#3#3#4
    Toncoin#4#5#5#4#5#4#4#5
    Dogecoin#5#3#4#5#4#5#5#3
    Weekly trading volume rankRank by weekly volume, W33 to W40: Ethereum ranked first in 6 of 8 weeks; Solana ends at #2.#1#2#3#4#5EthereumSolanaXRPToncoinDogecoinW33W35W37W40
    Weekly trading volume rank
    AssetW33W34W35W36W37W38W39W40
    Ethereum#1#1#2#1#1#1#2#1
    Solana#2#2#1#2#3#2#1#2
    XRP#3#4#3#3#2#3#3#4
    Toncoin#4#5#5#4#5#4#4#5
    Dogecoin#5#3#4#5#4#5#5#3

    045 · BumpCompare items · Crypto data

  • Net cash flowWeekly inflow (up) and outflow (down) in $K, W29 to W40: inflow totals $3,660K, outflow $2,790K, net $870K.400K0−400KW29W33W37W40INFLOWOUTFLOW
    Net cash flow
    WeekInflow ($K)Outflow ($K)
    W29220180
    W30260210
    W31240230
    W32300200
    W33280240
    W34330220
    W35310260
    W36290250
    W37360230
    W38340270
    W39380240
    W40350260
    Net cash flowWeekly inflow (up) and outflow (down) in $K, W29 to W40: inflow totals $3,660K, outflow $2,790K, net $870K.400K0−400KW29W33W37W40INFLOWOUTFLOW
    Net cash flow
    WeekInflow ($K)Outflow ($K)
    W29220180
    W30260210
    W31240230
    W32300200
    W33280240
    W34330220
    W35310260
    W36290250
    W37360230
    W38340270
    W39380240
    W40350260

    004 · Diverging barsCompare items · Fintech data

  • Deposits by regionNew deposits in October by region, $1634K in total: East $478K, Midwest $386K, South $596K, West $174K.$478K$386K$596K$174KEASTMIDWESTSOUTHWEST
    Deposits by region
    RegionDeposits
    East$478K
    Midwest$386K
    South$596K
    West$174K
    Deposits by regionNew deposits in October by region, $1634K in total: East $478K, Midwest $386K, South $596K, West $174K.$478K$386K$596K$174KEASTMIDWESTSOUTHWEST
    Deposits by region
    RegionDeposits
    East$478K
    Midwest$386K
    South$596K
    West$174K

    009 · LollipopCompare items · Fintech data

Get both

Slope, dumbbell and the other 130 types.

In Figma and React, in four sizes, light and dark. Pay once, every update.

044 · Slope type page066 · Dumbbell type page

See plans

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 timelineSankey vs chordCandlestick vs lineBullet vs gauge

Still not sure? Start from what the chart has to show.

Open the Chart Chooser