# In Vega trying to show the number in percentage form

**URL:** https://discuss.elastic.co/t/in-vega-trying-to-show-the-number-in-percentage-form/265476
**Category:** Kibana
**Tags:** vega
**Created:** [February 25, 2021, 12:06pm UTC](https://discuss.elastic.co/t/in-vega-trying-to-show-the-number-in-percentage-form/265476 "2021-02-25T12:06:09Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![gaurav1](https://avatars.discourse-cdn.com/v4/letter/g/ee59a6/32.png) [@gaurav1](https://discuss.elastic.co/u/gaurav1)
#### Post date: [February 25, 2021, 12:06pm UTC](https://discuss.elastic.co/t/in-vega-trying-to-show-the-number-in-percentage-form/265476/1 "2021-02-25T12:06:09Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![aaron-nimocks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/aaron-nimocks/32/73965_2.png) [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)
#### Post date: [February 25, 2021, 12:20pm UTC](https://discuss.elastic.co/t/in-vega-trying-to-show-the-number-in-percentage-form/265476/2 "2021-02-25T12:20:13Z")

</div>

How are you setting the %? You can use the [D3 Format](https://github.com/d3/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**

```auto
{
  "$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**

![image](https://us1.discourse-cdn.com/elastic/original/3X/9/0/90c49eb531981a19984709bd9d2d9d67699cf9b9.png)

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)
#### Post date: [March 25, 2021, 12:21pm UTC](https://discuss.elastic.co/t/in-vega-trying-to-show-the-number-in-percentage-form/265476/3 "2021-03-25T12:21:03Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.