How to display smaller unit on gauge

Ignition
1

I am trying to use the gauge for value display.
But the unit is displaying the same size as the process value.
image

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

2

image
you can split it up with a new line

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

[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

[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
image734×244 16.9 KB

5 Likes
3

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

Can you advise how you did it?

4

props.arc.cornerRadius

1 Like
5

Thank you. it works.