Skip to content
Vega-Lite templates

Math — Chart: Stacked Bar

Stacked composition across categories.

Template previewVega-Lite
Rendering…

Make it your own.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Stacked bar chart",
  "data": {"values": [
    {"group": "Q1", "part": "A", "value": 20},
    {"group": "Q1", "part": "B", "value": 15},
    {"group": "Q1", "part": "C", "value": 10},
    {"group": "Q2", "part": "A", "value": 25},
    {"group": "Q2", "part": "B", "value": 18},
    {"group": "Q2", "part": "C", "value": 12},
    {"group": "Q3", "part": "A", "value": 30},
    {"group": "Q3", "part": "B", "value": 12},
    {"group": "Q3", "part": "C", "value": 16}
  ]},
  "mark": "bar",
  "encoding": {
    "x": {"field": "group", "type": "nominal", "title": "Quarter"},
    "y": {"field": "value", "type": "quantitative", "aggregate": "sum", "title": "Total"},
    "color": {"field": "part", "type": "nominal", "title": "Part"}
  }
}