What an area chart shows
An area chart is a line graph with the space between the line and the baseline filled in. The filled area turns the line into a shape whose size the eye reads as volume, which makes it well suited to quantities that accumulate or represent an amount: website traffic, energy use, downloads, revenue per week. This area chart maker draws one or several series from a simple table.
Example
Week,Desktop,Mobile
W1,1200,1800
W2,1350,2100
W3,1280,2350
W4,1500,2600
W5,1620,2900Both series are drawn from the zero baseline with semi-transparent fills, so where they overlap you can still see the one behind. The chart makes it obvious that mobile traffic is both larger and growing faster.
Overlapping, not stacked
Series are layered on top of each other from the same baseline rather than stacked. That keeps each series' true value readable on the y-axis. If you want to show how series add up to a total, add a "Total" column to your data, or show shares with the pie chart maker.
Area chart maker options
- Smooth (on by default) – curved lines for a softer look. Turn it off for exact straight segments between data points.
- Show points – adds dots at each data point, off by default to keep the fill clean.
- Colors – a comma-separated list of CSS colors; the fill uses the same color at lower opacity.
- Title, axis labels, legend, width and height – as in the other chart makers.
The y-axis always starts at zero for area charts, because the filled area would be misleading if the baseline were cut off.
Common mistakes with area charts
- Unordered categories. The fill between points suggests continuity, so an area chart only makes sense when the x-axis has a natural order such as days, weeks or years. For regions, products or survey answers, use bars instead.
- Uneven time steps. Each row is placed at the same distance along the x-axis. If your data jumps from January to June, add the missing months (empty cells leave a gap) so the slope is not misleading.
- Series on very different scales. A series in the thousands flattens one in single digits into a thin line at the bottom. Draw them as two separate charts.
- Showing cumulative growth. If you want the filled area to show a running total, calculate it in your spreadsheet first; the chart plots the values exactly as given.
Tips for readable area charts
- Put the series with the largest values first so smaller ones remain visible on top.
- Use two or three series at most; more overlapping fills become muddy.
- For precise comparisons of individual values, a line graph is clearer.
- Empty cells create a gap in the area instead of dropping to zero.
Paste data straight from a spreadsheet, or use JSON including the Chart.js {labels, datasets} format. The SVG download stays sharp in reports and slides. For categorical comparisons, try the bar graph maker. Charts are drawn as SVG by JavaScript in your browser without any chart library or server; your data is never uploaded.