Skip to content
plot.tools

Area chart maker

Show how a quantity grows over time and what it is made of. Paste your table and download the picture.

What this page does

  • Stacked areas that add up to the total
  • Overlapping translucent areas
  • Optional monotone smoothing
  • Axis always includes zero
Area chart: Visits by channel. 3 series (Search, Direct and Social) across 8 categories, from Jan to Aug. Search: up 86%, from 42 (Jan) to 78 (Aug). Search: highest 78 (Aug), lowest 42 (Jan). Direct: up 45%, from 20 (Jan) to 29 (Aug). Direct: highest 29 (Aug), lowest 20 (Jan). Social: up 213%, from 8 (Jan) to 25 (Aug). Social: highest 25 (Aug), lowest 8 (Jan).Visits by channelSample data, thousands per monthSearchDirectSocial020406080100120140JanFebMarAprMayJunJulAug
PNG scale

SVG 1600 × 900 px · PNG 3200 × 1800 px · 16:9

No account and no watermark. The file has the Inter font embedded, named layers and the chart’s alt text, so it looks the same in a slide, a document or a browser. Not every app reads alt text stored in a file, so also paste it into the image’s alt text field.

Alt text: Area chart: Visits by channel. 3 series (Search, Direct and Social) across 8 categories, from Jan to Aug. Search: up 86%, from 42 (Jan) to 78 (Aug). Search: highest 78 (Aug), lowest 42 (Jan). Direct: up 45%, from 20 (Jan) to 29 (Aug). Direct: highest 29 (Aug), lowest 20 (Jan). Social: up 213%, from 8 (Jan) to 25 (Aug). Social: highest 25 (Aug), lowest 8 (Jan).

Your data

First column: labels. Other columns: one series each. The file is read in your browser and is not uploaded.

Table

8 × 3

Label
Remove row

Design

Chart type

Text

Numbers

Colours

Output

Proportion

320 to 4000 px. PNG multiplies it by the scale.

Background
  1. Step 1: Pick a chart typeBar, line, pie, scatter, area or radar. You can switch at any time.
  2. Step 2: Put in your numbersPaste cells from Excel or Google Sheets, load a file, or type in the table.
  3. Step 3: Download the pictureA PNG for slides and documents, or an SVG you can edit.

Start from an example

Click one to load it in the editor, then replace the sample numbers with yours.

Other chart makers

Each page opens the editor on that chart, with a short guide to reading and drawing it well.

One column per series: stack them to show how the total is built, or overlap them to compare. The chart downloads as SVG or PNG with no account and no watermark.

How to make an area chart

  1. Put the dates or steps in the first column, in order.
  2. Put each series in its own column, with its name in the header.
  3. Paste the cells in the Data panel.
  4. Choose stacked or overlapping in the Design panel, then download.

Stacked or overlapping

Stacked areas sit on top of each other. The top edge is the total and each band is one series’ contribution. Use it when the parts add up to something real: visits by channel, revenue by product, energy by source.

Overlapping areas all start at zero and are drawn translucent. Use it for two or three series you want to compare directly. With more, the overlaps turn muddy and a line graph is clearer.

Do not stack series that cannot be added, such as an average and a maximum, or prices of different things. The total would be a number that means nothing.

Reading a stacked area

Only the bottom band has a flat baseline. The others ride on the bands below, so a band that looks as if it is rising may only be pushed up. Read the thickness of a band, not the height of its top edge. Put the series you most want readers to follow at the bottom: it is the first value column in your table.

Gaps and zeros

In an overlapping area an empty cell breaks the shape, as in a line graph. In a stacked area an empty cell counts as zero, because a missing band would make every band above it fall. If a value is unknown, a stacked chart is not the right form for that period.

Related charts

For totals at a few separate moments instead of a continuous period, stacked bars show the same idea with exact, labelled segments. For shares of one total at one moment, see the pie chart maker.

Why use Plot Tools

What you can check for yourself, without taking our word for it.

No account, no watermark
The download buttons work straight away. The exported file holds your chart, your text and the font, and nothing else.
Your data stays in the browser
Pasted cells and loaded files are parsed and drawn on this page. There is no upload step, and the site’s security policy only allows connections to itself.
The PNG matches the screen
The Inter font is embedded in the SVG before it is rasterised, so the labels in the PNG sit exactly where you saw them.
Decimal comma understood
1.234,56 and 3,5 are read correctly: the separator and the decimal mark are detected from the data, and you can override both.
Defaults a data editor would accept
Round axis marks, solid fills, one colour per series, bars that start at zero, and a square background that can be transparent.
Colour-blind-safe by default
The default palette is Okabe-Ito. A test in the code simulates red-green colour blindness and checks that its colours stay apart.
A link that carries the chart
“Copy link” packs the data and settings into the part of the address after #, which browsers do not send to servers.
Alt text written for you
A description is generated from the data and stored in the SVG and the PNG. Line and area charts also say how each of the first four series ends compared with its start. It is shown under the chart with a button to copy it.

Questions and answers

When is an area chart better than a line graph?

When the amount matters as well as the change: visits, volume, money. The filled area shows quantity. For rates, averages or temperatures, where the area under the line means nothing, a line graph is the honest choice.

What does stacking do?

Each series is drawn on top of the one before, so the top edge is the total. It answers “how is the total made up?”. Only the bottom series sits on a flat baseline, so the others are harder to read exactly.

Which series should go at the bottom of the stack?

The one you most want to read, or the steadiest one. Series are stacked in the order of the columns, so reorder the columns in your spreadsheet before pasting.

Why does the axis start at zero?

The filled area stands for quantity. Cutting the axis would cut the area and exaggerate the change, so area charts here always include zero.