vl_folded_bar

vl_folded_bar.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A folded bar chart with data labels showing the grand total of two Products for each category.",
  "data": {
    "values": [
      {"category": "A", "HotDrinks": 28, "ColdDrinks": 20},
      {"category": "B", "HotDrinks": 55, "ColdDrinks": 43},
      {"category": "C", "HotDrinks": 43, "ColdDrinks": 91},
      {"category": "D", "HotDrinks": 91, "ColdDrinks": 81},
      {"category": "E", "HotDrinks": 81, "ColdDrinks": 53},
      {"category": "F", "HotDrinks": 53, "ColdDrinks": 19},
      {"category": "G", "HotDrinks": 19, "ColdDrinks": 87},
      {"category": "H", "HotDrinks": 87, "ColdDrinks": 52}
    ]
  },
  "transform": [
    {
      "fold": ["HotDrinks", "ColdDrinks"],
      "as": ["Product", "Value"]
    },
    {
      "joinaggregate": [
        {"op": "sum", "field": "Value", "as": "TotalValue"}
      ],
      "groupby": ["category"]
    }
  ],
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "category", "type": "ordinal", "axis": {"title": "Category"}},
        "y": {"field": "Value", "type": "quantitative", "axis": {"title": "Value"}},
        "color": {
          "field": "Product",
          "type": "nominal",
          "scale": {"range": ["#EA98D2", "#659CCA"]},
          "legend": {"title": "Product"}
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "fontWeight": "bolder",
        "align": "center",
        "baseline": "bottom",
        "dy": -2
      },
      "encoding": {
        "x": {"field": "category", "type": "ordinal"},
        "y": {"field": "TotalValue", "type": "quantitative"},
        "text": {"field": "TotalValue", "type": "quantitative"},
        "color": {"value": "black"}
      }
    }
  ]
}