OneTaskBy Tim King · Updated
Area Chart Maker
Stacked or Overlapping Area Graph from CSV, Free SVG/PNG
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Area Chart Maker works
This area chart maker draws stacked or overlapping areas. An area chart is a line chart with the space under each line filled in, which makes the total visible as well as the trend. Paste a table with dates or labels in the first column and one value column per series, choose stacked, stacked to 100% or overlapping, and download the result as SVG or PNG.
Area chart maker: getting a good result
Data. The first column is the x axis and is read as dates when every entry looks like one, as numbers when every entry is numeric, and as evenly spaced categories otherwise. Every further column that contains numbers becomes a series. Blank cells count as zero, because a stacked area has to have a value at every x to keep the layers continuous; if a series genuinely has gaps, the line chart maker handles them better.
Stacked. The default piles each series on top of the one before it, so the top edge of the chart is the total and the thickness of each band is that series' share. It answers "how much in all, and made of what" at a glance. Series are stacked in column order, so put the most stable series first: the bottom band has a flat base and is easiest to read, while bands higher up inherit the wobble of everything beneath them.
Stacked 100%. Each x position is scaled so the total is 100%, and the y axis shows percentages. This throws away the total to show only the mix, and is the right choice when the question is "is mobile's share growing" rather than "is traffic growing". The Number format menu is ignored in this mode because the axis is always a percentage.
Overlapping. Each series is drawn from zero with a translucent fill, so the areas overlap and every series can be compared against the same axis. It works well for two or three series and gets muddy beyond that; for more series, stack them or use lines.
Style and export. Straight, Smooth and Step lines work as on the line chart maker: smooth is a monotone curve that never overshoots, step holds each value until the next. Title and axis labels are optional and a legend appears whenever there is more than one series. Download SVG gives a vector file, Download PNG renders it at 1×, 2× or 3× the preview width, and Copy SVG puts the markup on the clipboard. Everything happens in the browser.
FAQ
When should I use an area chart instead of a line chart?
When the total matters. Stacked areas show how a whole is composed over time; lines show each series independently. If the reader needs to compare individual series precisely, especially ones that cross, use lines. If they need the sum and its rough breakdown, use areas.
Why do the upper bands look bumpy?
Because a stacked band sits on top of every band below it and inherits their movement. Only the bottom band has a flat base. Put the smoothest or most important series in the first value column so it sits at the bottom, and consider Stacked 100% if the wobble hides the mix.
Can I show percentages instead of totals?
Yes. Set Series to Stacked 100% and every x position is rescaled to sum to 100%. The y axis switches to percent automatically. Use it to show a changing share; use plain Stacked when the overall size is part of the story.
What happens to blank cells?
They are treated as zero so the stack stays continuous. That is correct for counts that were genuinely zero, but if a cell is missing rather than zero, the band will dip to nothing at that point. Fill the gap or plot the series as lines instead.
See also: all Chart Makers tools, Images, Audio, Video & Screen, PDF, SVG, Simulations & Screensavers, Generative Art, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Line Chart Maker
Paste CSV, get a multi-series line graph; download SVG or PNG.
Bar Chart Maker
Paste CSV, get a grouped or stacked bar chart; download SVG or PNG.
Donut Chart Maker
Paste label,value rows, get a donut with the total in the middle.
CSV Formatter
Align CSV into readable columns or swap delimiters and fix quoting.
SVG To PNG
Rasterise an SVG to a PNG at any width.