How to add '%' sign in text label over bar In vegaLite

Question

I am trying to create a group bar chart with text Labels. I am not able to find how to '%' in text label over bar.

Is there any way so that i can achive this? expected text over bar -> for 50 it should be display 50% on top of repectively bar Editor link

Answer 1

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"category": "A", "group": "x", "percentage": 10},
      {"category": "A", "group": "y", "percentage": 20},
      {"category": "A", "group": "z", "percentage": 40},
      {"category": "B", "group": "x", "percentage": 50},
      {"category": "B", "group": "y", "percentage": 60},
      {"category": "B", "group": "z", "percentage": 70},
      {"category": "C", "group": "x", "percentage": 50},
      {"category": "C", "group": "y", "percentage": 40},
      {"category": "C", "group": "z", "percentage": 30}
    ]
  },
  "encoding": {
    "x": {"field": "category"},
    "y": {
      "field": "percentage",
      "type": "quantitative",
      "axis": {"labelExpr": "datum.value+'%'"}
    },
    "xOffset": {"field": "group"}
  },
  "layer": [
    {"mark": "bar", "encoding": {"color": {"field": "group"}}},
    {
      "mark": {"type": "text", "align": "left", "baseline": "middle", "dx": -5},
      "encoding": {"text": {"value":{"expr": "datum.percentage + '%'"} }}
    }
  ]
}