elasticsearch – How do I make the charts c two type: normal and stacked? – Code Utility

[

I want to have two typecharts in one visual.
Desired example
Current example, Editor

,

You can use 2 layers having bar chart instead of column. First layer will be a stacked layer in which filter is applied for used and free fields. Second layer can have the total field. Using xOffset you can position both the bar charts. Refer the code below or editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "config": {"view": {"stroke": "transparent"}, "axis": {"domainWidth": 1}},
  "width": 300,
  "data": {
    "values": [
      {"branch": "V", "free": 300, "used": 800, "total": 1000},
      {"branch": "K", "free": 100, "used": 400, "total": 500},
      {"branch": "D", "free": 100, "used": 200, "total": 300}
    ]
  },
  "transform": [
    {"calculate": "[ datum.used, datum.free, datum.total]", "as": "table"},
    {"calculate": "['used', 'free', 'total']", "as": "headline"},
    {"flatten": ["table", "headline"]},
    {
      "calculate": "datum.headline +':'+ datum.table + ' ('+round(datum.table *100/ datum.total)+'%)'",
      "as": "tooltip"
    }
  ],
  "encoding": {
    "y": {"aggregate": "sum", "field": "table", "axis": {"grid": false}},
    "x": {
      "field": "branch",
      "axis": {"grid": false, "domain": false, "labelAngle": 0, "ticks": false},
      "sort": {"op": "sum", "field": "table", "order": "descending"}
    },
    "tooltip": {"field": "tooltip", "type": "nominal"},
    "color": {
      "field": "headline",
      "type": "nominal",
      "scale": {"range": ["#409b66", "#878787", "#1b5c9e"]}
    }
  },
  "layer": [
    {
      "transform": [
        {"filter": {"field": "headline", "oneOf": ["used", "free"]}}
      ],
      "mark": {"type": "bar", "width": 15, "xOffset": -10}
    },
    {
      "mark": {"type": "bar", "width": 15, "xOffset": 8},
      "encoding": {
        "y": {"field": "total", "axis": {"grid": false}, "stack": false}
      }
    }
  ]
}

]