Examples · Area chart

Area chart examples

An area chart is a line graph that shades the space down to zero, so the ink itself carries a sense of quantity. Use it when the amount accumulated matters as much as the direction — downloads served, storage used, hours logged.

When to use it

  • Volumes over time where the filled weight helps — traffic, downloads, consumption
  • Emphasizing how much has accumulated, not only the direction
  • A single dominant series that deserves visual mass

Not the right shape?

Several overlapping series — fills hide each other. Two lines compare better than two areas.

Real-world examples

Storage filling up

The fill makes 'how close to the limit are we' visible before anyone reads the axis; the target marks the plan's ceiling.

Open in maker with this data

View the spec 
{
  "type": "area",
  "theme": "editorial",
  "title": "Storage used (GB)",
  "source": "Infrastructure dashboard",
  "options": {
    "target": {
      "value": 500,
      "label": "Plan limit"
    }
  },
  "data": {
    "labels": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep"
    ],
    "series": [
      {
        "name": "GB used",
        "values": [
          180,
          205,
          230,
          262,
          291,
          334,
          371,
          415,
          468
        ]
      }
    ]
  }
}

Quiet period, then growth

Areas dramatize inflection points: the flat months and the takeoff are one continuous shape.

Open in maker with this data

View the spec 
{
  "type": "area",
  "theme": "ink",
  "title": "Newsletter subscribers",
  "source": "Email platform",
  "data": {
    "labels": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct"
    ],
    "series": [
      {
        "name": "Subscribers",
        "values": [
          410,
          425,
          440,
          452,
          470,
          610,
          890,
          1240,
          1610,
          2050
        ]
      }
    ]
  }
}
Open this chart in a maker Line graph maker from scratch

Questions people ask

Area chart or line graph?

Same skeleton, different emphasis. The line shows direction; the area adds weight, which suits quantities that pile up. If two or more series overlap, drop the fill and use lines — an area hiding another area helps nobody.

Does the fill have to start at zero?

Here, yes. The filled region reads as an amount, and an amount measured from anywhere but zero misleads. This engine always draws the area down to the zero baseline.