Charts

Series icon area chart

A stacked area chart whose legend gives every series a small drawn direction glyph beside its swatch, and lets you mute a band by clicking it.

Growth signal

New signups against support tickets, last 6 months

Using Series icon area chart

A stacked area chart whose legend gives every series a small drawn direction glyph beside its swatch, and lets you mute a band by clicking it.

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, secondColor, fillOpacity, showLegend, 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

1909Two series area legendChartsA stacked two series area chart with a legend beneath the plot that shows each series total and can isolate one series at a time.

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.

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.

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.

2274Share Of Total Area ChartChartsThree monthly series rescaled so their values always sum to the full plot height, turning raw counts into a band of shares that always add to one hundred percent.