Examples · Step chart

Step chart examples

A step chart — a stepped line — refuses to invent values between readings. A price, a rate or a headcount holds level until the day it changes, then jumps; the stairs say exactly that, where a sloping line would imply a smooth drift that never happened.

When to use it

  • Values that change by decision, not by drift: prices, interest rates, plan tiers, policies
  • Counts that move in whole jumps — headcount, licences, machines in a fleet
  • Any series where 'what was the value on that date' must read exactly, not approximately

Not the right shape?

Continuous measurements like temperature or traffic — those genuinely move between readings, and forcing stairs onto them hides the trend a smooth line shows honestly.

Real-world examples

Headcount is a staircase

People join on a date; nobody joins gradually. Each tread is a period of stability and each riser one hiring decision — countable straight off the chart.

Open in maker with this data

View the spec 
{
  "type": "line",
  "theme": "editorial",
  "title": "People on the team",
  "source": "HR system, this year",
  "options": {
    "curve": "step"
  },
  "data": {
    "labels": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug"
    ],
    "series": [
      {
        "name": "Headcount",
        "values": [
          12,
          12,
          14,
          14,
          14,
          17,
          17,
          18
        ]
      }
    ]
  }
}

A rate that holds between decisions

Between meetings the rate simply is — flat by definition. The step shape matches the meaning: every change is a decision you can point at.

Open in maker with this data

View the spec 
{
  "type": "line",
  "theme": "ink",
  "title": "Base rate after each meeting",
  "source": "Central bank announcements",
  "options": {
    "curve": "step",
    "format": "percent"
  },
  "data": {
    "labels": [
      "Feb",
      "Mar",
      "May",
      "Jun",
      "Aug",
      "Sep"
    ],
    "series": [
      {
        "name": "Rate",
        "values": [
          4.5,
          4.5,
          4.25,
          4.25,
          4,
          4
        ]
      }
    ]
  }
}
Open this chart in a maker Line graph maker from scratch

Questions people ask

What is a step chart?

A line graph whose segments run flat and then jump — options.curve: "step" here. It shows a value that holds until an event changes it, so the reader can take the exact value at any point along the axis, not an interpolation.

Step chart or line graph?

Ask how the value behaves between readings. If it genuinely drifts (users, temperature, revenue), a smooth or straight line tells the truth. If it holds and then jumps (prices, rates, tiers), steps do. Same data shape, same maker — one Line shape switch apart.

Where does the last step end?

Each plateau is centred on its label, so the final value holds visibly through the last category rather than spiking at the edge. That was a deliberate choice: the common step-after style made the last reading look like a fresh jump.