Skip to content
Vega-Lite templates

Stacked Area Chart (Vega-Lite)

Composition over time as a stacked area chart.

Template previewVega-Lite
Rendering…

Make it your own.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"month": "Jan", "source": "Organic", "v": 120}, {"month": "Jan", "source": "Paid", "v": 60}, {"month": "Jan", "source": "Referral", "v": 30},
      {"month": "Feb", "source": "Organic", "v": 150}, {"month": "Feb", "source": "Paid", "v": 80}, {"month": "Feb", "source": "Referral", "v": 40},
      {"month": "Mar", "source": "Organic", "v": 200}, {"month": "Mar", "source": "Paid", "v": 90}, {"month": "Mar", "source": "Referral", "v": 55}
    ]
  },
  "mark": "area",
  "encoding": {
    "x": {"field": "month", "type": "ordinal", "sort": null, "title": null},
    "y": {"field": "v", "type": "quantitative", "stack": "zero", "title": "Signups"},
    "color": {"field": "source", "type": "nominal", "title": "Source"}
  }
}