FREEIn your browser · No signup

Make an Area Chart

Show trend and volume together. Use it for cumulative traffic, evolving share, or stacking multiple series for comparison.

Browser-only PNG / SVG / CSV export Mobile-ready
Preview
Long-press to save image
Start from a sample
Enter data

First row is the header; paste data from row 2 onward.

Adjust appearance

What is an area chart?

An area chart fills the space below a line chart so that "area" expresses volume. It shows the trend with a line while also conveying accumulated magnitude visually, which makes it ideal for situations where you want readers to feel the size of a quantity changing over time.

Trend + volume = area chart

Where a line chart shows only the movement of the line itself, an area chart shows movement plus the accumulated volume underneath. Perfect when you want a sense of magnitude alongside a trend in traffic or sales.

When to use it

Traffic trend
Express daily or weekly sessions and pageviews with a sense of volume.
Cumulative-feel sales
Fill in monthly sales to visually emphasize the scale.
Multi-channel comparison
Compare social platforms or traffic sources by overlaying series.
Inventory or utilization trends
Show variation in usage rates or stock levels by time of day at a glance.

Tips for making one well

1. Limit to about three series

Because the fills overlap, area charts get harder to read with more series. Beyond three, consider stacking or switching to a line chart.

2. Mind the transparency

When series overlap, lowering the fill opacity makes the series behind easier to read.

3. Put the main series on top

Adjust the draw order so the series you want to highlight isn't hidden behind the others. Setting its color a touch darker also helps it stand out.

4. Start the Y-axis at zero

Since area encodes magnitude, the Y-axis must start at zero. Starting partway up exaggerates the area itself.

FAQ

For reading subtle changes, line. For conveying volume or cumulative weight, area. Area works particularly well in presentations and overview-style charts.
Limit yourself to three series, or stack them like a stacked bar chart. Lowering the fill opacity also helps.
Pick a color palette, or change individual colors with the per-item color picker. The fill is automatically set as a translucent version of the line color.
Yes — toggle "Hide the line and show only the fill" under "Adjust appearance." The line outline disappears, and markers are hidden along with it.

Related charts