Charts

Smooth Area Trend

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

New signups

Self-serve plan, monthly total

Apr to SepDown 2.6% vs last month

Using Smooth Area Trend

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

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

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.

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.

1907Stacked Area ChartChartsTwo monthly series stacked into filled bands where the outer edge traces the combined total and the seam between them shows how the split moves.

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.

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.