Step charts use a staircase line style where values remain constant between data points and jump instantaneously at each new point. They are ideal for discrete state changes such as interest rate decisions, pricing tier updates, or any variable that holds a fixed value between known change events.

Subtype

▾

Live Preview

date	price
Jan 2022	29
Jul 2022	29
Aug 2022	39
Jan 2023	39
Mar 2023	49
Jul 2023	49
Oct 2023	59
Apr 2024	59
Jun 2024	69
Jan 2025	69

{
  "title": {
    "text": "SaaS Subscription Price History"
  },
  "data": [
    {
      "date": "Jan 2022",
      "price": 29
    },
    {
      "date": "Jul 2022",
      "price": 29
    },
    {
      "date": "Aug 2022",
      "price": 39
    },
    {
      "date": "Jan 2023",
      "price": 39
    },
    {
      "date": "Mar 2023",
      "price": 49
    },
    {
      "date": "Jul 2023",
      "price": 49
    },
    {
      "date": "Oct 2023",
      "price": 59
    },
    {
      "date": "Apr 2024",
      "price": 59
    },
    {
      "date": "Jun 2024",
      "price": 69
    },
    {
      "date": "Jan 2025",
      "price": 69
    },
    {
      "date": "Mar 2025",
      "price": 79
    }
  ],
  "series": [
    {
      "type": "line",
      "xKey": "date",
      "yKey": "price",
      "interpolation": "step",
      "stroke": "#6366f1",
      "strokeWidth": 2.5,
      "marker": {
        "enabled": true
      }
    }
  ],
  "axes": [
    {
      "position": "bottom",
      "title": {
        "text": "Date"
      }
    },
    {
      "position": "left",
      "title": {
        "text": "Monthly Price ($)"
      }
    }
  ]
}

Edit JSON above · auto-previews after 0.9 s

A step line showing discrete pricing tier changes over time with no interpolation between change points.

PreviousSlope Charts Next Bullet Charts

Was this article helpful?