webdevpuneet.com

Related Snippets

93 in Charts category
1–6 of 60

ApexCharts Dark/Light Theme Toggle with PNG, SVG and CSV Export

ApexCharts Likert Survey Stacked Bar Chart

ApexCharts Line Chart with Annotations and Target Lines

ApexCharts Donut Chart with Live Center Total

ApexCharts Sparkline KPI Cards

ApexCharts Gantt Timeline with Range Bars

Step Line Chart — HTML CSS JS Stepped Line (No Lib)

Step Line Chart · Charts · Plain HTML, CSS & JS · Live preview

CategoryCharts
TagsSVGData Visualization

Copy & paste

Source Code

<div class="sl-card">
  <div class="sl-head">
    <h3>Plan price changes</h3>
    <div class="sl-modes">
      <button type="button" class="sl-mode sl-on" data-mode="after">Step</button>
      <button type="button" class="sl-mode" data-mode="line">Line</button>
    </div>
  </div>
  <svg class="sl-svg" id="slSvg" viewBox="0 0 380 200" role="img" aria-label="Step line chart"></svg>
  <div class="sl-x" id="slX"></div>
  <div class="sl-tip" id="slTip" hidden></div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Staircase step path
Horizontal-then-vertical segments show values holding flat then jumping at each reading.
Step / line toggle
A segmented control switches interpolation so you can compare both representations.
Truthful for discrete data
Step interpolation avoids implying gradual change that never happened.
Filled area
The path is closed to the baseline and filled to make magnitude easier to read.
Point markers + tooltips
White-filled dots carry each point's label and value, shown on hover.
Clean y-scale
The maximum rounds up to a tidy step for readable gridlines.
Aligned x-labels
HTML x-labels justified to match the evenly-spaced points.
Data-driven & no library
Draws from LABELS + DATA arrays in plain HTML/CSS/SVG/JS — zero dependencies.

About this UI Snippet

Step Line Chart — Staircase Lines for Values That Hold Then Jump

Screenshot of the Step Line Chart snippet rendered live

A step line chart draws horizontal-then-vertical "staircase" segments instead of diagonal lines, which is the *correct* way to show values that stay constant until they suddenly change — a price that holds for months then jumps, an inventory level, a feature flag, a thermostat setpoint. A normal line chart would imply a gradual slope between readings that never actually happened. This snippet builds a step line chart in plain HTML, CSS, SVG, and vanilla JavaScript, with a toggle between step and straight-line modes, a filled area, and tooltips — no charting library.

Why steps, not slopes

The semantic point is everything here. If your $9 plan became $12 in March, the price didn't gradually rise through $10 and $11 — it was $9, then instantly $12. A diagonal line lies about the in-between values; a step truthfully shows the value held flat and then jumped. Step charts are the right choice for any quantity that changes discretely and holds between changes, and getting this distinction right is the reason to reach for one.

Building the staircase path

buildPath constructs the SVG path differently per mode. In line mode it simply draws L segments point-to-point. In step mode (after) it draws, for each point, a horizontal segment at the *previous* value's height across to the new x, then a vertical segment up or down to the new value — producing the staircase where each value holds until the next reading, then steps. This "step-after" variant changes the value at each data point; the same idea inverted gives "step-before." It's a few lines of path-building that completely change the chart's meaning.

A toggle to compare

A segmented control flips between Step and Line so you can see the same data both ways — useful for understanding when a step chart is the honest representation. Both modes share the same scaling, dots, and filled area, so only the connecting path changes.

Area fill and point markers

The path is closed down to the baseline and filled with a translucent band, the standard way to add an area under a line in SVG (it makes magnitude easier to read). White-filled dots mark each data point and carry the label and value for tooltips, shown at the cursor via getBoundingClientRect.

Data-driven and drop-in

The chart renders from a LABELS array and a DATA array, with the y-scale rounded to a clean step above the maximum. Swap in your own discretely-changing series — prices, tiers, counts, states — and it draws the staircase. It's a clear reference for building stepped SVG paths and for when step interpolation is the truthful choice over a smooth line.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA step line chart renders showing a plan price holding then jumping over eight months.
  2. 2
    Toggle Step / LineSwitch modes to compare the staircase against a straight-line interpolation of the same data.
  3. 3
    Hover a pointSee each point's label and value in a tooltip.
  4. 4
    Swap in your dataReplace LABELS and DATA with your own discretely-changing series.
  5. 5
    Choose the right modeUse step mode for values that hold then jump; line mode for continuously-changing data.
  6. 6
    Wire to an APIFetch your series, assign to DATA, and call render().

Real-world uses

Common Use Cases

Pricing and plan changes
Show a price that holds for months and then jumps, without implying gradual change, and pair it with a pricing toggle page.
Inventory and stock levels
Visualise counts that change only at events such as deliveries and sales, with a filled area under the staircase to show magnitude.
Feature flags and configuration states
Show a setting's value over time, using the step and line toggle to compare how misleading a smooth line would be.
Rate and threshold history
Plot interest rates, limits or policy settings that stay constant until someone changes them, with tooltips giving the exact value.
SLA and tier tracking
Show which tier or level applied over time, and compare with a multi-line chart when several series are involved.

Got questions?

Frequently Asked Questions

Use a step chart whenever the value changes discretely and holds constant between changes — prices, inventory, rates, settings, tiers. A straight line between two readings implies the value moved gradually through the in-between numbers, which is false for such data. The staircase truthfully shows the value held flat, then jumped at the moment it actually changed.

For each point after the first, the path draws a horizontal segment at the previous value's height across to the new x-position, then a vertical segment to the new value — so the line holds flat then jumps. This is the "step-after" variant (value changes at each data point). Line mode instead draws a direct L segment between points. Only the path construction differs; scaling and markers are shared.

Step-after (used here) holds the previous value until it reaches the next data point, then steps to the new value — the change happens at the point. Step-before steps to the new value first, then holds it across to the point — the change happens before the point. Which is correct depends on your data's semantics; you can swap the order of the horizontal/vertical segments in buildPath to switch.

The same path used for the line is extended down to the baseline at the last x, across to the first x at the baseline, and closed (Z), forming a filled shape under the line. It's painted with a translucent fill behind the stroked line. Closing a line path to the baseline is the standard SVG technique for an area chart, and it works identically for stepped or straight paths.

In React, hold the data and mode in useState and render the path/dots from the computed values (or run render() in a useEffect with a ref); in Vue, use a computed path string with refs; in Angular, a getter with ViewChild. The buildPath() step logic and scaling are framework-agnostic — only the mode state and rendering move into the framework.