How to make a area chart
- Enter time periods or ordered steps in the first column.
- Add one value column per series, such as sources of revenue or energy types, and rename each header.
- In Customize → Chart options, choose overlapping, stacked or 100% stacked.
- Adjust fill opacity, line style and markers, and add axis titles.
- Download as PNG, JPEG, SVG or PDF.
Data format
| Column | Type | Notes |
|---|---|---|
| X-axis label | Text | Required |
| Data series (one column each) | Number | 1–12 columns; blank cells allowed |
Up to 500 rows. Each row is a point along the x-axis. Each value column becomes a shaded area. Stack the areas to show how parts add up to a total over time.
Customization options
- Overlapping, stacked or 100% stacked modes.
- Fill opacity so overlapping areas remain visible.
- Straight, smooth (monotone) or stepped edges.
- Optional markers and value labels.
- Custom y-axis range (stacked charts always start at zero).
Downloading and exporting
- PNG: best for slides, documents and the web. It supports transparent backgrounds, and you can choose standard, 2×, 4× or slide-sized (1920 × 1080) output.
- JPEG: a smaller file with a solid background.
- SVG: a true vector file. It stays sharp at any size and can be edited in Illustrator, Inkscape or Figma.
- PDF: vector PDF sized to the chart, A4 or US Letter. If your labels use characters outside the standard PDF fonts (for example Chinese, Arabic or emoji), the PDF uses a high-resolution image instead and tells you.
- CSV and .json: your data, or the whole chart with its settings, to re-open later.
When to use a area chart
- Showing how a total and its components change over time.
- Emphasising volume or cumulative magnitude, such as total energy produced.
- Showing changing shares over time with a 100% stacked area chart.
When to choose a different chart
- You need to read exact values of the middle layers. Only the bottom layer has a flat baseline; use a line graph or grouped bars.
- Series values are negative or cross zero, which makes stacking confusing.
- You have only a few time points. A stacked bar chart is easier to read.
Common mistakes to avoid
Overlapping opaque areas
In overlapping mode, an opaque area in front hides the ones behind it. Keep the fill opacity below about 50%, or switch to stacked mode.
Misreading stacked layers
In a stacked chart, the top edge of a layer is the running total, not that series’ value. Tooltips and the data table show each series’ actual value.
Stacking things that don’t add up
Only stack series whose sum means something, such as departments that make up a company total. Stacking temperatures from three cities is meaningless.
Practical examples
Electricity by source
Solar, wind and hydro generation per year, stacked, showing both the growing total and solar’s rising contribution.
Website traffic mix
Monthly sessions by channel as a 100% stacked area, highlighting how the share of mobile traffic grew.
Two products compared
Two overlapping areas with 30% opacity to compare the seasonal sales patterns of two products.
Stacked vs. 100% stacked area charts
A stacked area chart puts each series on top of the previous one. The top edge shows the overall total, which is ideal when the total matters, such as company revenue split by product line.
A 100% stacked chart divides each point by its total, so every column reaches 100%. It shows shares, not size: a product can grow in absolute terms while its share shrinks. Choose the mode that matches the question your audience is asking.
Frequently asked questions
What happens to blank cells in a stacked area chart?
They are drawn as zero so the layers stay continuous, and the tool shows a warning so you know. In overlapping mode, blanks appear as gaps.
Can I make a 100% stacked area chart?
Yes. Choose “100% stacked” under Multiple series. Values must be zero or positive.
How is an area chart different from a line chart?
It shows the same information, but the filled area emphasises volume and, when stacked, the contribution of each part to the total.
Can I change the order of the layers?
Layers are stacked in the order of the columns from bottom to top. To reorder, duplicate a series and remove the original, or re-import your data with the columns in the order you want.
Is the export the same as the preview?
Yes. Previews and downloads are drawn by the same rendering engine, so colors, labels and layout match.
Your data stays private
Charts are drawn by your browser. Your data isn’t uploaded to our servers; it is kept only in this browser’s storage, for autosave and saved charts, until you clear it. See our privacy policy.