Step line chart

The line moves in flat steps and holds each value until the next label, so changes read as jumps, not slopes. Hover over the chart to see the values.

Try it in the editorSee example pages

Opens in your browser. No account needed.

Step line chart widget

Three ways to use it

Each example puts the widget on a Notion page and lists the settings it uses.

Freelance hourly rate

Add one row per year with your hourly rate. Set Shorten to 0 so each year shows in full, and each step marks a raise.

How it’s set up

Labels from
Year
Values from
Rate
Shorten to
0

Language course level

Rate your level from 1 to 6 at the end of each month. The line steps up in the month you reach a new level.

How it’s set up

Labels from
Month
Values from
Level

Stock on hand

Add one row per week with the units in stock. A highlight range from 0 to 20 shows when to reorder.

How it’s set up

Labels from
Week
Values from
Units
Shorten to
0
Show highlight range
On
From value
0
To value
20
Label
Reorder

Other line chart variants

The same line chart widget with a different look. Each variant has its own page.

  • Normal

    Trends over time and comparisons between two or three lines

  • Linear

    Short data sets where each rise and drop matters

Compare all 3 variants

Make it yours in the editor

Start from the Step variant and change any part of it. Try it in your browser first, no account needed.

What you can change

  • Line shape: smooth, straight or steps
  • Line thickness, points and value labels
  • A name, color and left or right scale for each line
  • Bottom labels, left and right values, and grid lines
  • A highlight range for a target band
  • Hover card, legend and timeline scroller
  • Font, colors, corners, borders and shadow