Examples · Slope chart

Slope chart examples

A slope chart — Tufte's slopegraph — keeps only two moments and draws one line per row between them, named at both ends with its value. No legend, no middle: the tilt of each line is the whole story, and the rows that fell stand out among the rows that rose.

When to use it

  • Then-and-now stories: two years, two surveys, two releases — with several rows moving at once
  • Showing who overtook whom — crossing lines carry rank flips no table can
  • Reports where every line must be labelled with its own numbers, without a legend to decode

Not the right shape?

More than two moments — a slope chart has exactly two axes, so a monthly journey belongs to a line graph. And a crowd of forty rows becomes a cat's cradle; keep it to the rows that matter.

Real-world examples

Two surveys, one line per team

Each team's line starts at the spring score and ends at the autumn one. Two of three climbed; the crossing tells you Product lost its lead — a rank flip a pair of bars would bury.

Open in maker with this data

View the spec 
{
  "type": "slope",
  "theme": "ink",
  "title": "Satisfaction score by team",
  "source": "Internal survey, spring vs autumn",
  "data": {
    "labels": [
      "Spring",
      "Autumn"
    ],
    "series": [
      {
        "name": "Support",
        "values": [
          31,
          44
        ]
      },
      {
        "name": "Product",
        "values": [
          52,
          47
        ]
      },
      {
        "name": "Sales",
        "values": [
          40,
          49
        ]
      }
    ]
  }
}

Budgets moving between years

Dollar values work the same way: both ends print the exact figure, so the chart doubles as its own data table while the slopes carry the direction.

Open in maker with this data

View the spec 
{
  "type": "slope",
  "theme": "glass",
  "title": "Cloud spend by environment",
  "source": "Finance, unaudited",
  "options": {
    "format": "currency:USD"
  },
  "data": {
    "labels": [
      "2025",
      "2026"
    ],
    "series": [
      {
        "name": "Production",
        "values": [
          48000,
          61000
        ]
      },
      {
        "name": "Staging",
        "values": [
          12000,
          9000
        ]
      },
      {
        "name": "CI",
        "values": [
          8000,
          14000
        ]
      }
    ]
  }
}
Open this chart in a maker Chart maker from scratch

Questions people ask

What is a slope chart (slopegraph)?

A chart with two vertical states — before and after — and one straight line per row connecting its two values. Edward Tufte named the shape a slopegraph; slope chart is the everyday name. Every line is labelled at both ends, so there is no legend to decode.

Slope chart or line graph?

A line graph earns its keep when the path matters — dips, peaks, seasonality across many readings. A slope chart deliberately throws the path away and keeps the endpoints, which makes several rows comparable at once. Two moments → slope; the journey → line.

Slope chart or dumbbell chart?

Both hold exactly two readings per row. The dumbbell lines the pairs up on one shared scale, so gap sizes compare best; the slope tilts each pair between two axes, so direction and overtaking read best. If the crossings are the story, come here.