Area chart (Vega-Lite)

Updated
View as text
Open in Confluence
Open in ChatGPT Open in Claude

An area chart is a bar chart's cousin for continuous data. Stacked, it shows how a total is composed as it grows.

#What this example shows

  • Stacking, applied to an area mark.

  • A temporal axis with a chosen format.

  • Opacity, so the bands remain distinguishable.

#A worked example

Open it, edit it, or copy the source below.

Area chart (Vega-Lite)

The source, which you can paste into a new diagram and edit:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Storage used by content type",
  "width": 380,
  "height": 220,
  "data": {"values": [
    {"month": "2026-04-01", "kind": "Attachments", "gb": 210},
    {"month": "2026-05-01", "kind": "Attachments", "gb": 246},
    {"month": "2026-06-01", "kind": "Attachments", "gb": 289},
    {"month": "2026-07-01", "kind": "Attachments", "gb": 341},
    {"month": "2026-04-01", "kind": "Diagrams", "gb": 34},
    {"month": "2026-05-01", "kind": "Diagrams", "gb": 48},
    {"month": "2026-06-01", "kind": "Diagrams", "gb": 71},
    {"month": "2026-07-01", "kind": "Diagrams", "gb": 96},
    {"month": "2026-04-01", "kind": "Page content", "gb": 88},
    {"month": "2026-05-01", "kind": "Page content", "gb": 94},
    {"month": "2026-06-01", "kind": "Page content", "gb": 99},
    {"month": "2026-07-01", "kind": "Page content", "gb": 108}
  ]},
  "mark": {"type": "area", "opacity": 0.85, "line": true},
  "encoding": {
    "x": {"field": "month", "type": "temporal", "title": "Month", "axis": {"format": "%b"}},
    "y": {"field": "gb", "type": "quantitative", "title": "GB used", "stack": "zero"},
    "color": {"field": "kind", "type": "nominal", "title": null}
  }
}

#Making it your own

  • Put the series people care about at the bottom; it is the only one with a flat baseline.

  • line: true draws the boundary between bands, which helps a lot.

  • Do not stack values that are not additive.

A real chart in about ten lines.