Skip to content
Vega-Lite templates

Stacked Area

Stacked area chart over time with three series.

Template previewVega-Lite
Rendering…

Make it your own.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": { "values": [
    {"t":1,"s":"A","v":3},{"t":1,"s":"B","v":4},{"t":1,"s":"C","v":2},
    {"t":2,"s":"A","v":5},{"t":2,"s":"B","v":4},{"t":2,"s":"C","v":3},
    {"t":3,"s":"A","v":6},{"t":3,"s":"B","v":3},{"t":3,"s":"C","v":4},
    {"t":4,"s":"A","v":7},{"t":4,"s":"B","v":5},{"t":4,"s":"C","v":5}
  ]},
  "mark": {"type":"area","interpolate":"monotone"},
  "encoding": {
    "x":{"field":"t","type":"quantitative","title":"Time"},
    "y":{"field":"v","type":"quantitative","title":"Value","stack":"zero"},
    "color":{"field":"s","type":"nominal"}
  },
  "width":400,"height":260
}