In Vega trying to show the number in percentage form

[gaurav1]

I am new to Kibana and trying to create a Vega visualization for displaying percentage of effort. The data (result of an analysis) we need to display is in percentage. As text in Vega are based on position. When results appears 100% it shows as expected, in another scenario where we have results less than 100% and greater than or equal to 10 we find there is a gap between number and percentage symbol (like 88 %, ideally we want it as 88%). Please advice.

[aaron-nimocks]

How are you setting the %? You can use the D3 Format functions like below.

You can do this with one transformation I just broke it out into two so you can see the steps. When you add a % it will multiply the value by 100 so if you have a whole number you need to divide by 100 to start with.

Specification

{
  "$schema": "https://vega.github.io/schema/vega/v5.0.json",
  "data": [
    {
      "name": "table",
      "values": [{"value": 0}, {"value": 12}, {"value": 56}, {"value": 100}],
      "transform": [
        {
          "type": "formula",
          "expr": "datum.value/100",
          "as": "divide"
        },
        {
          "type": "formula",
          "expr": "format(datum.divide,'~p')",
          "as": "percent"
        }        
      ]
    }
  ]
}

Output