When should I use an area chart instead of a line chart?

Use an area chart when the magnitude of the volume under the curve matters — total accumulated value, or how parts compose a whole over time. If you only care about the trend line and want to compare several series precisely, a line chart is clearer.

How many series can a stacked area chart handle?

Keep it to three or four. Beyond that the bands are too thin to read and the colours collide. For many series, switch to a line chart or a small-multiples grid.

Can I show a forecast range with an area chart?

Yes. A range/band area uses a [low, high] tuple as the dataKey to fill the uncertainty interval, with a separate line for the median or actual value. Vireya ships a range variant that does exactly this.

All charts

area/*

Area

Area charts — emphasize cumulative magnitude and trend direction.

4 variants

@vireya/ui/charts/area/simple

Single-series area with gradient fill and grid.

client

@vireya/ui/charts/area/stacked

Two stacked areas with gradient fills + legend.

client

@vireya/ui/charts/area/percent

100%-stacked area via stackOffset="expand" + per-series gradient fills.

client

@vireya/ui/charts/area/range

Forecast band: tuple dataKey [low,high] for the area + Line for the median.

client

Understanding Area charts

An area chart is a line chart with the region between the line and the baseline filled in. The fill draws the eye to cumulative magnitude over a continuous axis — usually time — making it the natural choice when the volume under the curve is part of the story, not just the trend at the top edge.

Stacked and 100%-stacked variants extend this to show how a total is composed of parts and how that composition shifts over time. In Vireya every area pulls its fill and stroke from your design tokens, so the chart inherits your brand palette automatically.

When to use

Showing a single metric's volume and trend over time (traffic, revenue, usage).
Comparing how a few series accumulate into a total (stacked area).
Emphasising part-to-whole composition shifts over time (100%-stacked / expand).
Communicating uncertainty as a band between a low and high bound.

When to avoid

More than three or four stacked series — fills overlap and become unreadable; use a line chart instead.
Precise value comparison between series — only the bottom series sits on a flat baseline.
Sparse or categorical data with no meaningful continuum on the x-axis (use bars).

Best practices

Start the y-axis at zero — a filled area implies magnitude, and a truncated axis distorts it.
Keep fills semi-transparent or gradient so overlapping series and the gridline stay visible.
Order stacked series with the largest, most stable band at the bottom.
Label the series directly or with a legend; never rely on colour alone.

Accessibility

Pair colour with a legend and accessible tooltips so the chart is not colour-only.
Ensure the line stroke meets contrast against both the fill and the page background.
Provide a text summary or data table nearby for screen-reader users.

Frequently asked questions

When should I use an area chart instead of a line chart?: Use an area chart when the magnitude of the volume under the curve matters — total accumulated value, or how parts compose a whole over time. If you only care about the trend line and want to compare several series precisely, a line chart is clearer.
How many series can a stacked area chart handle?: Keep it to three or four. Beyond that the bands are too thin to read and the colours collide. For many series, switch to a line chart or a small-multiples grid.
Can I show a forecast range with an area chart?: Yes. A range/band area uses a [low, high] tuple as the dataKey to fill the uncertainty interval, with a separate line for the median or actual value. Vireya ships a range variant that does exactly this.