Area chart maker — stacked or overlapping areas from a table

How to use the area chart maker

1. Paste your table into Chart data: first column the periods in order (months, weeks, years), then one column per series, such as Month,Online,In store.
2. Choose Areas: Stacked (the default) or Overlapping.
3. Tick Smooth the edges if you prefer curves to straight segments.
4. Add a Chart title, X-axis title and Y-axis title, then pick a Colour theme and Background (white, transparent or dark).
5. Set Width and Height in pixels, then use Copy SVG or download area-chart.svg. The table Chart data (as parsed) shows what the tool read and downloads as CSV.

What it does and when to use it

An area chart is a line chart with the space below each line filled in. The fill adds a sense of volume, which helps when the size of the total matters as much as its direction: orders by channel, or hours per project each week.

Stacked areas answer two questions at once: how the total moved and which part drove it. They are weaker at showing how a middle layer changed, because its base moves too. If that is your question, switch to Overlapping or use the line chart maker. For a few periods only, a stacked bar chart is often easier to read than areas.

How it works

The first column becomes the x positions, spaced evenly in the order you typed. In stacked mode each series is added on top of the previous ones, so the second band runs from the first total up to the running sum. In overlapping mode each area starts at zero and is see-through (28% opacity when there are several series) so hidden parts stay visible.

Axis steps are rounded to 1, 2 or 5 × 10ⁿ. When there are many periods, only every second or third label is printed so they do not collide, but every point is still drawn. The SVG carries a <desc> that lists every value for screen readers. All of this runs in your browser.

Worked examples

Orders by channel (the sample). Online and In store for January to June, stacked. In June the bands reach 610 and 610 + 580 = 1,190. The parsed table ends with Jun | 610 | 580.

A gap in stacked mode. Week,Paid,Organic with W2’s Paid cell left empty. The chart still stacks Organic on top, and the notice reads:

Missing values were counted as zero in the stacked areas.

Two overlapping series. Mon,3,5 and Tue,4,2 in Overlapping mode. Both areas sit on the zero line and each is filled at 28% opacity, so you can see where B drops below A.

Limits and tips

• The x axis is categorical: dates are spaced evenly, not by real time, so include every period (with an empty cell if needed).
• Keep to about four or five series; more bands become hard to tell apart. The Okabe–Ito theme helps readers with colour-vision deficiency.
• The file is SVG only. If you need a PNG, use the SVG to PNG converter.