Charts

Step area chart

A single series area chart drawn as a staircase where each value is held flat across its slot and jumps vertically at the boundary.

Team seats

Active seats billed by month

Monthly

26 seats active now

Held steady since jumping from 18 in Jun

Using Step area chart

A single series area chart drawn as a staircase where each value is held flat across its slot and jumps vertically at the boundary.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: accentColor, months, fillOpacity, stepAlign, animate

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2444Stepped Value LineChartsA single series drawn as flat runs and vertical jumps, the shape you want when a value holds steady until it changes.

1888Smooth Area TrendChartsA single series area chart with a smoothly curved top edge, a soft tinted fill, faint horizontal gridlines and a readout that follows the pointer.

1908Straight Segment Area ChartChartsA single series area chart built from straight segments between points, so the outline reads as a sharp faceted polyline instead of a curve.

1525Area chart liteChartsA responsive SVG area chart with round axis ticks, a gradient fill, a crosshair that reads the sample under the pointer, and a draw-on wipe.

1860Gradient Area ChartChartsTwo stacked monthly series drawn as smooth areas whose fills fade from a strong tint at the top edge down to nearly clear at the baseline.

2099Gridline area chartChartsA card-framed area chart with two overlapping filled layers, rounded axis ticks, a faint gridline and a footer line calling out the trend.