Stacked Area Chart

A stacked area chart places filled series on top of each other. At each point along the horizontal axis, the top edge shows the total. The thickness of each band shows one category's contribution.

Orders by customer typeSample data
Loading chart…
In June, 140 new-customer orders and 70 returning-customer orders add up to 210. Read each band by its thickness.

Read the band, not its top edge

In June, the lower band shows 140 orders from new customers. The upper band adds 70 orders from returning customers. The top edge reaches 210, which is the combined total.

Only the bottom band has a fixed baseline. To read another series, subtract its lower boundary from its upper boundary. Use a line chart if comparing individual trends matters more than showing the total.

Absolute values or percentages

A regular stacked area chart shows amounts. It can answer both “How much?” and “Which categories contributed?”

A 100% stacked area chart divides each category by the total at that point. Every column of the chart then adds up to 100%. This shows changes in share, but a growing share does not necessarily mean a growing count.

Choose parts that belong together

The series must use the same unit and form a meaningful total. Do not stack overlapping groups or add unrelated rates. The example assigns each order to one customer type.

Keep series order and colors consistent. Use only as many bands as readers can distinguish. Negative values make the total harder to read; a separate line or column chart is often clearer.

For a single series, see area chart.

Connect. Explore. Keep watching.

Start exploring your own data.

Use Chartbrew Cloud or host it yourself.