Is it possible to have columns of donut chart with gray arc indicating the missing part?

Question

Currently, the donut chart assumed that the max value is 100%. What I would like is for the category Chinese to have a percentage of 50% with gray arc indicating the missing 50%. The two other donut charts will behave similarly in their respective column.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple donut chart with embedded data.",
  "data": {
    "values": [
      {"category": "English", "value": 4},
      {"category": "Malay", "value": 6},
      {"category": "Chinese", "value": 10}
    ]
  },
  "mark": {"type": "arc", "innerRadius": 80},
  "encoding": {
    "column": {"field": "category"},
    "theta": {"field": "value", "type": "quantitative"},
    "color": {"field": "category", "type": "nominal"}
  },
  "view": {"stroke": null}
}

Answer 1

It's a bit more complex, but one way to do this is to use a transform to calculate the total, and then a layer chart to plot that total in the background.

Here is an example (open in editor):

{
  "data": {
    "values": [
      {"category": "English", "value": 4},
      {"category": "Malay", "value": 6},
      {"category": "Chinese", "value": 10}
    ]
  },
  "transform": [
    {"joinaggregate": [{"op": "sum", "field": "value", "as": "total"}]}
  ],
  "facet": {"column": {"field": "category"}},
  "spec": {
    "layer": [
      {
        "mark": {"type": "arc", "innerRadius": 80, "color": "lightgray"},
        "encoding": {"theta": {"field": "total", "type": "quantitative"}}
      },
      {
        "mark": {"type": "arc", "innerRadius": 80},
        "encoding": {
          "theta": {"field": "value", "type": "quantitative"},
          "color": {"field": "category"}
        }
      }
    ],
    "view": {"stroke": null}
  }
}