Slope Chart

Description

A slope chart, popularized by Edward Tufte as the “slopegraph,” compares values for multiple entities between exactly two conditions or time points. Two parallel vertical axes represent the two states, and a line for each entity connects its value on the left axis to its value on the right axis. The slope of each line encodes the direction and magnitude of change: rising lines indicate increases, falling lines indicate decreases, and steeper slopes indicate larger changes.

The simplicity of the slope chart is its greatest strength. With only two reference points and a set of connecting lines, the chart simultaneously shows the value at each time point, the change between them, and the ranking at each time point. When lines cross, the chart also reveals that a rank reversal occurred. This multi-layered reading from a minimal design makes slope charts one of the most information-dense yet easy-to-read chart types.

Slope charts are most effective with 5-15 entities. With fewer, a simple table might suffice; with more, the lines become a tangled web. Labeling each entity directly at the endpoints (rather than using a legend) is essential for readability. When lines are too close together, slight vertical jittering or selective highlighting can disambiguate overlapping trajectories.

When to Use

• Comparing values between exactly two time periods (e.g., before vs. after an intervention)
• Showing which entities improved, declined, or remained stable
• Highlighting rank reversals between two points in time
• Replacing a grouped bar chart for a more compact and readable two-period comparison

When NOT to Use

• When there are more than two time periods — use a line graph or bump chart
• When there are too many entities (>15) — lines overlap excessively; filter or use small multiples
• When absolute values are less important than proportional change — use a dumbbell chart with percentage labels
• When the two conditions are not naturally ordered — the left-to-right flow implies temporal or logical order
• When entities need to be grouped by category — use a grouped bar chart

Anatomy

• Left axis: Values at the first time point or condition, with entity labels
• Right axis: Values at the second time point or condition, with entity labels
• Slope lines: One line per entity connecting its two values; slope encodes direction and magnitude of change
• Endpoint dots: Circles at each axis marking the exact value
• Direct labels: Entity names placed at the left and/or right endpoints for immediate identification
• Color: Each entity may receive a distinct color, or color can encode direction (increasing vs. decreasing)

Variations

• Rank slope chart: Y-axis shows rank instead of value, focusing on ordinal changes
• Grouped slope chart: Multiple slope charts arranged in small multiples by category
• Highlighted slope chart: One or two entities are bold and colored while others are gray, focusing the narrative
• Annotated slope chart: Key lines are annotated with the percentage or absolute change
• Multi-point slope chart: Extended to 3-4 points, transitioning toward a line graph (loses some clarity)

Code Reference

// Observable Plot - slope chart between two periods
Plot.plot({
  x: {domain: ["2020", "2024"], padding: 0.4, label: null},
  y: {grid: true, label: "Revenue ($M)"},
  marks: [
    Plot.line(data, {x: "year", y: "value", stroke: "company", strokeWidth: 2}),
    Plot.dot(data, {x: "year", y: "value", fill: "company", r: 5}),
    Plot.text(data, {
      filter: d => d.year === "2024",
      x: "year", y: "value",
      text: "company", dx: 8, textAnchor: "start"
    })
  ]
})