Charts

Straight Segment Area Chart

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

Recurring revenue

Net new plus expansion

$241.3k this month

up 28% from Jul

Using Straight Segment Area Chart

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

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, dotSize, 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

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.

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

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.

2397Paired Series LineChartsTwo smoothed series over the same months on a shared scale, with a hover guide that reads both values side by side in one panel.