Area Charts
GUIDEWhat an area chart shows, when to use one, how to read it, and the traps to avoid.
An area chart is a line chart with the space between the line and a zero baseline filled with colour. It shows how a quantity changes over time while emphasising its size. Its key characteristics are an ordered time axis, a value axis starting at zero, and filled bands that can be stacked to show parts of a total.
An area chart is a line chart with the space beneath the line filled in. Like a line chart it plots a value against a continuous axis — almost always time — and connects the points to show a trend. The difference is the shading: by colouring the region between the line and the baseline, an area chart shifts the emphasis from the path of the value to the cumulative magnitude underneath it. The filled volume reads as "how much," which makes the format well suited to quantities that accumulate, like totals, volumes, or amounts that pile up over a period.
Key characteristics of an area chart
Whatever tool draws it, an area chart has the same defining features:
- An ordered horizontal axis. Usually time (days, months, years) or another continuous sequence. The order matters because the fill implies a continuous quantity between points.
- A vertical value axis that starts at zero. The shaded area stands for the amount, so cutting the bottom off misrepresents it.
- A line joining the data points. Its top edge carries the trend exactly as a line chart does.
- A fill down to the baseline. The coloured region is what makes it an area chart and shifts the emphasis to magnitude.
- Optional stacking. Several series can be stacked into bands so the top edge shows the total and each band shows one part.
Line and area charts are close relatives; the line vs area chart comparison goes through the choice in detail.
How an area chart works
The horizontal axis carries an ordered, continuous variable — usually a sequence of dates or periods. The vertical axis carries the measured value, and it should start at zero. Each data point is plotted and the points are joined into a line; then everything between that line and the zero baseline is filled with colour. Because the fill represents area, the baseline matters more than it does in a plain line chart: if the axis starts above zero, the shaded region no longer reflects the true quantity and the chart misleads.
That single change — the fill — is the whole difference. Reach for the fill when the quantity beneath the curve is meaningful in itself ("total visitors," "cumulative rainfall," "stockpiled units"). Keep to a plain line when only the line's position and direction matter and the area underneath has no real meaning.
When to use an area chart
- Magnitude over time. A single series where the volume under the curve genuinely represents an accumulated quantity you want readers to feel.
- Parts of a whole over time. A stacked area chart shows how several components add up to a changing total across periods — both the total and each part's contribution at once.
- Emphasising scale. When you want a trend to read as "big" or "small" in absolute terms, the filled mass communicates that more forcefully than a thin line.
If the space under the line means something — a total, a volume, a running amount — fill it. If only the line's position matters, or you are comparing several series closely, a plain line chart reads cleaner.
When a plain line is better
The area fill is not free; it competes for attention and can hide data. A plain line chart usually wins when:
- You are comparing several series. Multiple overlapping filled areas obscure one another — the back series disappears behind the front one. Separate lines stay distinct.
- The values can go negative or fluctuate sharply. A fill across a zigzag becomes visual noise rather than a clean trend.
- The area has no real meaning. Charting a temperature or a price, the region "under" the value is not a quantity, so filling it adds ink without adding information.
- Precise readings matter. The eye locks onto the top edge of an area just as it would a line, but the fill adds clutter that makes exact values harder to pick out.
How to read an area chart
Read the top edge of the shaded region exactly as you would a line: follow it left to right to see the trend, noting where it rises, falls, or plateaus. The height at any point is the value at that moment, read off the vertical axis. The filled mass beneath is a cue to overall magnitude — a tall, wide fill means a large accumulated quantity. In a stacked area chart, the height of each band (not its top edge) is that series' value, and the top of the whole stack is the running total. Use gridlines and labels for exact figures, since the fill makes eyeballing precise values harder.
Worked example: reading a stacked area chart
Suppose a stacked area chart shows a shop's monthly sales split into online and in-store, with in-store as the bottom band:
| Month | In-store (bottom band) | Online (top band) | Top edge of stack (total) |
|---|---|---|---|
| Jan | 60 | 20 | 80 |
| Feb | 55 | 30 | 85 |
| Mar | 50 | 45 | 95 |
In March the top edge of the chart sits at 95. That is the total, not the online figure. Online is the thickness of the top band: 95 minus 50 = 45. Reading it correctly gives the real story: total sales grew, in-store slipped slightly, and online more than doubled from 20 to 45. Reading the top edge as "online" would wrongly suggest online sales were 95. If the comparison between parts matters more than the total, a stacked bar chart or separate lines make it easier to read.
Variants
The simple area chart shades a single series down to zero. The stacked area chart layers several series on top of one another so their bands sum to a total — ideal for parts-over-time, as long as you remember each band is measured from the one below it, not from zero. The 100% stacked area chart rescales every period to fill the full height, trading absolute totals for a clear view of how the proportions shift. And a streamgraph is a stacked area centred on a flowing middle baseline, which looks striking but sacrifices easy value reading.
Common mistakes to avoid
A non-zero baseline distorts the very area the chart is built on — always start at zero. Overlapping opaque areas hide the series behind them; if you must overlay, use a plain line chart instead, or make the fills translucent. Too many stacked bands make it impossible to track any single series, because each one shifts up and down with the bands below it. And reading a stacked band's top edge as its value is a classic error — only the bottom band is measured from zero.
Make an area chart
Ready to build one? The line chart maker includes an area mode — enter your data or paste a CSV, switch the fill on, layer multiple series, recolour, and export a PNG or SVG — free, no signup, no watermark.
Frequently asked questions
What are the characteristics of an area chart?
An area chart has an ordered, continuous horizontal axis (usually time), a value axis that starts at zero, a line joining the data points, and a coloured fill between that line and the baseline. The fill emphasises magnitude, and stacked versions show how parts add up to a total over time.
How do you read an area graph?
Read the top edge like a line to see the trend, and read its height against the vertical axis for the value at each point. In a stacked area graph, each band's value is its thickness, not the height of its top edge, and the top of the whole stack is the total.
When should an area chart be used?
Use an area chart when you are showing a quantity over time and the amount under the line is meaningful, such as total sales, volume or cumulative counts, or when a stacked area chart shows how a few parts make up a changing total. For comparing many separate series, use a line chart.
Do area charts' horizontal axis have to start at 0?
No. The horizontal axis is usually time, so it starts at the first period in your data. It is the vertical value axis that should start at zero, because the shaded area represents the quantity and a raised baseline would cut part of it off.
What is the difference between an area chart and a line chart?
An area chart is a line chart with the space between the line and the baseline filled in. The filled area emphasises the cumulative magnitude or volume beneath the trend, whereas a plain line emphasises the path of the value itself.
When should I use a stacked area chart?
Use a stacked area chart to show how several parts add up to a total over time, when both the total and the contribution of each part matter. If readers need to compare the individual series precisely, separate lines are usually clearer.