# Kibana Vega : Right Aligned Five Digit Padding

**URL:** <https://discuss.elastic.co/t/kibana-vega-right-aligned-five-digit-padding/276148>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [June 16, 2021, 1:20pm UTC](https://discuss.elastic.co/t/kibana-vega-right-aligned-five-digit-padding/276148 "2021-06-16T13:20:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ankitdevnalkar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ankitdevnalkar/32/46158_2.png) [@ankitdevnalkar](https://discuss.elastic.co/u/ankitdevnalkar)\
**Post date:** [June 16, 2021, 1:20pm UTC](https://discuss.elastic.co/t/kibana-vega-right-aligned-five-digit-padding/276148/1 "2021-06-16T13:20:10Z")

</div>

I am using Kibana vega visualization to show metrics. I would like to achieve the right align five-digit padding. What can be the property name to achieve the same?

My vega code :

```auto
marks: [
    {
      type: text
      from: {data: "latestTotalBalance"}
      encode: {
        update: {
          text: {signal: "format(datum.totalUnitAmount, ',')"}
          align: {value: "center"}
          baseline: {value: "middle"}
          xc: {signal: "width/2"}
          yc: {signal: "height/2"}
          fontSize: {signal: "min(width/20, height)/1.3"}
          "fill": {"value": "white"}
          "fontWeight":{"value": "bold"}
        }
      }
    }
  ]

```

The result with above code is :  
 ![Selection_183](https://us1.discourse-cdn.com/elastic/original/3X/1/3/1377a9c9f74d8a1cc8aceb9f7a9f5c7b14c8bbb9.png)

Expected result :  
 ![Selection_185](https://us1.discourse-cdn.com/elastic/original/3X/a/6/a65257b22617c7f7025d1cdf21530f7924fe1b03.png)

---

<div class="post-metadata">

**Author:** ![lukeelmers](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/lukeelmers/32/35230_2.png) [@lukeelmers](https://discuss.elastic.co/u/lukeelmers)\
**Post date:** [June 16, 2021, 5:14pm UTC](https://discuss.elastic.co/t/kibana-vega-right-aligned-five-digit-padding/276148/2 "2021-06-16T17:14:32Z")

</div>

> [@ankitdevnalkar](#):
>
> would like to achieve the right align five-digit padding

Looks like [format](https://vega.github.io/vega/docs/expressions/#format) requires a [d3 format specifier](https://github.com/d3/d3-format#locale_format). I haven't tested this, but based on d3's docs I think something like this would do what you are looking for:

```auto
          text: {signal: "format(datum.totalUnitAmount, ',.5f')"}

```

---

<div class="post-metadata">

**Author:** ![ankitdevnalkar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ankitdevnalkar/32/46158_2.png) [@ankitdevnalkar](https://discuss.elastic.co/u/ankitdevnalkar)\
**Post date:** [June 17, 2021, 4:48am UTC](https://discuss.elastic.co/t/kibana-vega-right-aligned-five-digit-padding/276148/3 "2021-06-17T04:48:47Z")

</div>

Awesome! 🙌 That worked. Thanks @lukeelmers

---

<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:** [July 15, 2021, 4:48am UTC](https://discuss.elastic.co/t/kibana-vega-right-aligned-five-digit-padding/276148/4 "2021-07-15T04:48:57Z")

</div>

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