# Percentage symbol in vega bar graphs

**URL:** https://discuss.elastic.co/t/percentage-symbol-in-vega-bar-graphs/262794
**Category:** Kibana
**Created:** [February 1, 2021, 7:48am UTC](https://discuss.elastic.co/t/percentage-symbol-in-vega-bar-graphs/262794 "2021-02-01T07:48:14Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Pranusha119](https://avatars.discourse-cdn.com/v4/letter/p/47e85d/32.png) [@Pranusha119](https://discuss.elastic.co/u/Pranusha119)
#### Post date: [February 1, 2021, 7:48am UTC](https://discuss.elastic.co/t/percentage-symbol-in-vega-bar-graphs/262794/1 "2021-02-01T07:48:15Z")

</div>

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

![image](https://us1.discourse-cdn.com/elastic/original/3X/4/6/46c965e1835013888a7f3b3968eee39521246e45.png)

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

---

<div class="post-metadata">

### Author: ![azasypkin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/azasypkin/32/42216_2.png) [@azasypkin](https://discuss.elastic.co/u/azasypkin)
#### Post date: [February 1, 2021, 10:58am UTC](https://discuss.elastic.co/t/percentage-symbol-in-vega-bar-graphs/262794/2 "2021-02-01T10:58:34Z")

</div>

Hi @Pranusha119 ,

Have you tried adding proper `format`?

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

```

Best,  
Oleg

---

<div class="post-metadata">

### Author: ![Pranusha119](https://avatars.discourse-cdn.com/v4/letter/p/47e85d/32.png) [@Pranusha119](https://discuss.elastic.co/u/Pranusha119)
#### Post date: [February 3, 2021, 12:05pm UTC](https://discuss.elastic.co/t/percentage-symbol-in-vega-bar-graphs/262794/3 "2021-02-03T12:05:01Z")

</div>

thank u

---

<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 3, 2021, 12:05pm UTC](https://discuss.elastic.co/t/percentage-symbol-in-vega-bar-graphs/262794/4 "2021-03-03T12:05:07Z")

</div>

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