Examples · Bump

Bump chart examples

A club can gain points and still fall behind its rivals. A bump chart shows the changing order, while a line chart shows the points themselves. These fictional standings let you compare both views without changing the source values.

When to use it

  • Follow league places, search positions or a ranked list across at least three periods
  • Find changes in order when the size of the value gap is secondary

Not the right shape?

Choose Line when the size of the gap matters: first and second could differ by one point or a thousand. With two periods, use Slope. Rankings describe the rows supplied, so include every relevant competitor before selecting Top N.

Real-world examples

Search positions by month

These illustrative positions are already ranks. Missing observations break the line; they do not count as last place.

Open in maker with this data

View the spec 
{
  "type": "bump",
  "theme": "editorial",
  "title": "Search position for three pages",
  "source": "Illustrative data",
  "options": {
    "rankMode": "ranks"
  },
  "data": {
    "labels": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May"
    ],
    "series": [
      {
        "name": "Guide",
        "values": [
          6,
          5,
          3,
          2,
          1
        ]
      },
      {
        "name": "Checklist",
        "values": [
          3,
          2,
          null,
          4,
          3
        ]
      },
      {
        "name": "Comparison",
        "values": [
          5,
          4,
          2,
          1,
          2
        ]
      }
    ]
  }
}

Language popularity in a fictional survey

Vote totals determine the order within each year. Hover a point to read its votes and rank; equal totals share a competition rank.

Open in maker with this data

View the spec 
{
  "type": "bump",
  "theme": "editorial",
  "title": "Survey votes by language",
  "source": "Illustrative data",
  "options": {
    "rankMode": "values"
  },
  "data": {
    "labels": [
      "2022",
      "2023",
      "2024",
      "2025"
    ],
    "series": [
      {
        "name": "Python",
        "values": [
          320,
          380,
          450,
          510
        ]
      },
      {
        "name": "JavaScript",
        "values": [
          400,
          380,
          420,
          480
        ]
      },
      {
        "name": "Rust",
        "values": [
          180,
          250,
          360,
          490
        ]
      },
      {
        "name": "Go",
        "values": [
          240,
          290,
          350,
          420
        ]
      }
    ]
  }
}
Open this chart in a maker Bump chart maker from scratch

Questions people ask

How are ties ranked?

In Values mode, equal values share a competition rank. With values 90, 80, 80 and 60, the places are 1, 2, 2 and 4. Ready ranks mode keeps the integer positions you supplied.

What happens when a row leaves Top N?

Its line stops at the last included observation and resumes when it returns. A missing observation also breaks the line. The source table keeps every supplied value; no extra positions are invented.

Can I switch to a line chart?

Yes, when you entered values. Line displays those original values, while Bump displays their ranks. Ready ranks contain no underlying values, so the maker explains why that switch is unavailable.