How to Make an Area Chart (Stacked or Overlapping)
Paste a table and get an area chart — one series, overlapping series, or stacked areas that show a total and its parts, also as 100% shares. Export PNG or SVG.
3 min read ·
To make an area chart, open the Area Chart Maker and paste your table: a label (month, year, week) in the first column and one column of numbers per series, with names in the first row. For several series choose Stacked — each series sits on top of the one below, so the top edge is the total — 100% stacked to show shares, or Overlapping. Set smooth curves and the fill opacity, then download a PNG, JPG or SVG.
Make an area chart step by step
- Open the Area Chart Maker.
- Paste or type the data:
Month,Organic,Paid,Social
Jan,4200,1800,900
Feb,4500,2100,1100
Mar,5100,2000,1500
Apr,5600,2600,1700
Copy straight from Excel or Google Sheets; Example shows the format and Import file loads a CSV. 3. Under Options:
- Several series: Stacked, 100% stacked (shares) or Overlapping.
- Smooth curves on or off.
- Fill opacity (%).
- X-axis title, Y-axis title, and a Prefix or Suffix.
- Under Style, set the title, palette, background and image size.
- Download PNG, SVG or JPG, or copy the image.
Stacked, 100% stacked or overlapping?
| Mode | Shows | Example |
|---|---|---|
| Stacked | The total over time and what it's made of | Website visits by channel |
| 100% stacked | How the mix changes, whatever the total | Share of sales by product |
| Overlapping | Each series against the same baseline | Two cities' temperatures |
Area chart or line chart?
Both show change over time. An area chart's fill emphasises volume — how much — and, stacked, composition. A line chart is better for comparing exact values of several series, for values that don't start from zero, and for many series. A good rule: if adding the series together makes sense, a stacked area chart works; if not, use lines.
Tips for clear area charts
- Put the steadiest series at the bottom of a stack (first column) — the layers above are easier to read when the base is calm.
- Three to five layers at most; group the rest into "Other".
- Overlapping areas: two or three series, with fill opacity around 40–60% so the hidden parts show through.
- Areas start at zero — the fill only means something from a zero baseline.
Missing values
- In Overlapping mode, an empty cell leaves a gap in that series.
- In Stacked modes, an empty cell counts as zero so the stack stays continuous — fill gaps in your data first if zero isn't right.
The tool tells you which rows had cells that weren't numbers.
A worked example
Paste six months of visits from three channels and choose Stacked: the top edge shows total visits rising, and the layers show that social grew fastest. Switch to 100% stacked and the shift becomes obvious — social's share almost doubled while organic's shrank, even though organic still grew.
Related charts
- Compare categories rather than time: the Bar Chart Maker (with stacked bars).
- Parts of a single total, not over time: a treemap.
Privacy
Your data stays in your browser — nothing is uploaded or stored.
Frequently asked questions
Can I plot just one series?
Yes — a single column gives a classic filled area under a line.
Can I use negative values?
Overlapping and stacked areas can go below zero; 100% stacked charts show each part's share of the total size.
Can I change the colours?
Choose a colour palette under Style; series take its colours in order.