# How to display smaller unit on gauge

**URL:** <https://forum.inductiveautomation.com/t/how-to-display-smaller-unit-on-gauge/75927>\
**Category:** Ignition\
**Created:** [July 5, 2023, 11:28am UTC](https://forum.inductiveautomation.com/t/how-to-display-smaller-unit-on-gauge/75927 "2023-07-05T11:28:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![chaoliang](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@chaoliang](https://forum.inductiveautomation.com/u/chaoliang)\
**Post date:** [July 5, 2023, 11:28am UTC](https://forum.inductiveautomation.com/t/how-to-display-smaller-unit-on-gauge/75927/1 "2023-07-05T11:28:44Z")

</div>

I am trying to use the gauge for value display.  
But the unit is displaying the same size as the process value.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/8/68ee854a61690525c069dba0c16637d17feb5f96.png)

Is there any way to display the unit a bit smaller than the value, better if it can sit below the value, same as the template below.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/d/ad03167ace4fc6352c543f7e44c80f36bb69988e.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 5, 2023, 11:57am UTC](https://forum.inductiveautomation.com/t/how-to-display-smaller-unit-on-gauge/75927/2 "2023-07-05T11:57:10Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/f/7fbc77e3f2e75095a1557626b53f18ef19d7b55c.png)  
you can split it up with a new line

after that its not to hard to target the second element edit it with css

```auto
[data-component="ia.chart.simple-gauge"] g > text:nth-child(2) {
    font-size: 10px;
}

```

adding in text-anchor:middle is also nice, you'll have to adjust the offset a little tho

```auto
[data-component="ia.chart.simple-gauge"] g > text{
text-anchor:middle
}

```

offsetx 20 seems nice for 3 numbers  
offsetx 14 for 1 and 2

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/a/da5ccec029be7a628d13a0a4ad86fd7934371b12.png)

---

<div class="post-metadata">

**Author:** ![chaoliang](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@chaoliang](https://forum.inductiveautomation.com/u/chaoliang)\
**Post date:** [July 6, 2023, 5:24am UTC](https://forum.inductiveautomation.com/t/how-to-display-smaller-unit-on-gauge/75927/3 "2023-07-06T05:24:59Z")

</div>

Just noticed that you have done the round corner of the bar.

Can you advise how you did it?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 6, 2023, 6:52am UTC](https://forum.inductiveautomation.com/t/how-to-display-smaller-unit-on-gauge/75927/4 "2023-07-06T06:52:39Z")

</div>

props.arc.cornerRadius

---

<div class="post-metadata">

**Author:** ![chaoliang](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@chaoliang](https://forum.inductiveautomation.com/u/chaoliang)\
**Post date:** [July 7, 2023, 2:04am UTC](https://forum.inductiveautomation.com/t/how-to-display-smaller-unit-on-gauge/75927/5 "2023-07-07T02:04:03Z")

</div>

Thank you. it works.