Percentage symbol in vega bar graphs

[Pranusha119 (Pranusha)]

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A bar graph showing what activites consume what percentage of the day.",
  "data": {
    "values": [
      {"Activity": "Sleeping", "Time": 8},
      {"Activity": "Eating", "Time": 2},
      {"Activity": "TV", "Time": 4},
      {"Activity": "Work", "Time": 8},
      {"Activity": "Exercise", "Time": 2}
    ]
  },
  "transform": [{
    "window": [{
      "op": "sum",
      "field": "Time",
      "as": "TotalTime"
    }],
    "frame": [null, null]
  },
  {
    "calculate": "datum.Time/datum.TotalTime * 100",
    "as": "PercentOfTotal"
  }],
 
  "encoding": {
    "x": {
      "field": "PercentOfTotal",
      "type": "quantitative",
      "title": "% of total Time"
    },
    "y": {"field": "Activity", "type": "nominal"}
  },
  "layer": [ 
    {
    "mark": "bar"
  }, {
    "mark": {
      "type": "text",
      "align": "left",
      "baseline": "middle",
      "dx": 3
    },
    "encoding": {
      "text": {"field": "PercentOfTotal", "type": "quantitative","format" :".2f"}
    }
  }]
}

output :

May I know how can I show the count with % symbol (8.33 %) instead of just showing the count (8.33 ) in bar graph ?

[azasypkin]

Hi @Pranusha119 ,

Have you tried adding proper format?

{
    "mark": {
      "type": "text",
      "align": "left",
      "baseline": "middle",
      "dx": 3
    },
    "encoding": {
      "text": {"field": "PercentOfTotal", "type": "quantitative","format" :".0%"}
    }
  }

Best,
Oleg

[Pranusha119 (Pranusha)]

thank u