# Customize ui\_gauge

**URL:** <https://discourse.nodered.org/t/customize-ui-gauge/15144>\
**Category:** Dashboard\
**Created:** [5 September 2019 09:48 UTC](https://discourse.nodered.org/t/customize-ui-gauge/15144 "2019-09-05T09:48:32Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jochen1980](https://avatars.discourse-cdn.com/v4/letter/j/8dc957/32.png) [@Jochen1980](https://discourse.nodered.org/u/Jochen1980)\
**Post date:** [5 September 2019 09:48 UTC](https://discourse.nodered.org/t/customize-ui-gauge/15144/1 "2019-09-05T09:48:33Z")

</div>

Hello,  
is there any way to customize the ui\_gauge a bit further than the "normal" settings?  
I would like to hide the "needle" using the gauge mode.  
In addition I would like to get rid of the space the label uses cause I don't need the label.  
Are there any solutions - maybe with use of ui\_template?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [5 September 2019 09:52 UTC](https://discourse.nodered.org/t/customize-ui-gauge/15144/2 "2019-09-05T09:52:46Z")

</div>

Here's a full reference of the dashboard node fields you can set using `msg.ui_control` : [https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md)

---

<div class="post-metadata">

**Author:** ![Jochen1980](https://avatars.discourse-cdn.com/v4/letter/j/8dc957/32.png) [@Jochen1980](https://discourse.nodered.org/u/Jochen1980)\
**Post date:** [5 September 2019 10:03 UTC](https://discourse.nodered.org/t/customize-ui-gauge/15144/3 "2019-09-05T10:03:50Z")

</div>

@zenofmud: I knoww those settings. My question was if there is any other way to configure this control, maybe by use of ui\_template

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [5 September 2019 10:09 UTC](https://discourse.nodered.org/t/customize-ui-gauge/15144/4 "2019-09-05T10:09:30Z")

</div>

and did you read down as far as...

"  
The gauge options can accept any of the [Justgage parameters](https://github.com/toorshia/justgage/blob/master/justgage.js#L42) for example:

```auto
 {"options":{"pointer":false,"gaugeWidthScale":1.5}}
 {"options":{"pointer":true,"gaugeWidthScale":0.4,"reverse":true}}

```

The first example hides the needle.

---

<div class="post-metadata">

**Author:** ![Jochen1980](https://avatars.discourse-cdn.com/v4/letter/j/8dc957/32.png) [@Jochen1980](https://discourse.nodered.org/u/Jochen1980)\
**Post date:** [5 September 2019 11:35 UTC](https://discourse.nodered.org/t/customize-ui-gauge/15144/5 "2019-09-05T11:35:35Z")

</div>

Sorry, I didn't see realize that section - my fault!  
Could you please help we where to put this option? into Value format?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [5 September 2019 11:41 UTC](https://discourse.nodered.org/t/customize-ui-gauge/15144/6 "2019-09-05T11:41:34Z")

</div>

Sorry. I thought you had now read the first sentence of that doc.

---

<div class="post-metadata">

**Author:** ![Jochen1980](https://avatars.discourse-cdn.com/v4/letter/j/8dc957/32.png) [@Jochen1980](https://discourse.nodered.org/u/Jochen1980)\
**Post date:** [5 September 2019 11:56 UTC](https://discourse.nodered.org/t/customize-ui-gauge/15144/7 "2019-09-05T11:56:10Z")

</div>

@dceejay: Thanks for your help and patience. Now I found out what the both of you meant!  
But if I add this to the msg.ui\_control the control gets continiously refreshed.

---

<div class="post-metadata">

**Author:** ![Jochen1980](https://avatars.discourse-cdn.com/v4/letter/j/8dc957/32.png) [@Jochen1980](https://discourse.nodered.org/u/Jochen1980)\
**Post date:** [5 September 2019 12:01 UTC](https://discourse.nodered.org/t/customize-ui-gauge/15144/8 "2019-09-05T12:01:23Z")

</div>

I did try this using a change node and also just edited the msg.ui\_control and each time it refreshes on its own!?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [5 September 2019 12:11 UTC](https://discourse.nodered.org/t/customize-ui-gauge/15144/9 "2019-09-05T12:11:34Z")

</div>

Do you mean refresh after deploy? If so, then there is a little trick you can use

```auto
[{"id":"e24c988b.699b78","type":"change","z":"15462191.80250e","name":"","rules":[{"t":"set","p":"ui_control.options.minLabelMinFontSize","pt":"msg","to":"16","tot":"num"},{"t":"set","p":"ui_control.options.maxLabelMinFontSize","pt":"msg","to":"16","tot":"num"},{"t":"set","p":"ui_control.options.labelMinFontSize","pt":"msg","to":"16","tot":"str"},{"t":"delete","p":"payload","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":520,"y":340,"wires":[["8c14a7d9.681bb8"]]},{"id":"8c14a7d9.681bb8","type":"ui_gauge","z":"15462191.80250e","name":"","group":"39b7a5c6.1e9a8a","order":0,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value|number:2}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"3","seg2":"7","x":690,"y":400,"wires":[]},{"id":"22d7d976.1fa2c6","type":"inject","z":"15462191.80250e","name":"","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":false,"onceDelay":0.1,"x":390,"y":400,"wires":[["f0bfbde4.1a8cf"]]},{"id":"f97cda05.dde058","type":"ui_ui_control","z":"15462191.80250e","name":"","x":180,"y":200,"wires":[["95ef6d63.e77fd"]]},{"id":"2d8d8dd6.8c2a82","type":"comment","z":"15462191.80250e","name":"To send options when dashboard connects","info":"","x":270,"y":160,"wires":[]},{"id":"95ef6d63.e77fd","type":"delay","z":"15462191.80250e","name":"","pauseType":"delay","timeout":"40","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":320,"y":260,"wires":[["e24c988b.699b78"]]},{"id":"250f93b0.a9b97c","type":"comment","z":"15462191.80250e","name":"Let gauge to be initialized before change any options","info":"There will be browser errors otherwise ","x":460,"y":220,"wires":[]},{"id":"d94b0f1f.2a6f6","type":"comment","z":"15462191.80250e","name":"Change the options","info":"gauge scales according to predefined card size\ndefined font sizes are not absolute values but minimum values\nFor example if you make your gauge smaller, the changed font sizes may happen to be too large and will overlap.\n\nminLabelMinFontSize - minimum size of min field // number\nmaxLabelMinFontSize - minimum size of max field // number\nlabelMinFontSize - minimum size of units field // numbert\n\ndelete msg.payload cos it does not contain proper value","x":520,"y":300,"wires":[]},{"id":"f0bfbde4.1a8cf","type":"function","z":"15462191.80250e","name":"random","func":"msg.payload = Math.random()*10\nreturn msg;","outputs":1,"noerr":0,"x":530,"y":400,"wires":[["8c14a7d9.681bb8"]]},{"id":"a651e851.2a2a28","type":"comment","z":"15462191.80250e","name":"generate random value","info":"","x":470,"y":440,"wires":[]},{"id":"39b7a5c6.1e9a8a","type":"ui_group","z":"","name":"Default","tab":"ad12ad91.ab672","disp":true,"width":"6","collapse":false},{"id":"ad12ad91.ab672","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Jochen1980](https://avatars.discourse-cdn.com/v4/letter/j/8dc957/32.png) [@Jochen1980](https://discourse.nodered.org/u/Jochen1980)\
**Post date:** [5 September 2019 12:17 UTC](https://discourse.nodered.org/t/customize-ui-gauge/15144/10 "2019-09-05T12:17:37Z")

</div>

This is the trick, thank you!

---

<div class="post-metadata">

**Author:** ![angelpeluk](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/angelpeluk/32/16204_2.png) [@angelpeluk](https://discourse.nodered.org/u/angelpeluk)\
**Post date:** [23 May 2020 11:33 UTC](https://discourse.nodered.org/t/customize-ui-gauge/15144/11 "2020-05-23T11:33:37Z")

</div>

Hello

I was trying to apply the example you have commented above, but I am not able to change the text size of the value obtained by the temperature sensor.

Can you help me in what I am doing wrong?

Thank you very much in advance.

![gauge](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/2/329ffcae84d5afae6260665f73208b937f149bd8.jpeg)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [23 May 2020 12:10 UTC](https://discourse.nodered.org/t/customize-ui-gauge/15144/12 "2020-05-23T12:10:19Z")

</div>

For value field do following:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/d/fd146060fe3ff0e0f56c661aa383b2bbb1ff70f6.png)

---

<div class="post-metadata">

**Author:** ![angelpeluk](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/angelpeluk/32/16204_2.png) [@angelpeluk](https://discourse.nodered.org/u/angelpeluk)\
**Post date:** [24 May 2020 16:31 UTC](https://discourse.nodered.org/t/customize-ui-gauge/15144/13 "2020-05-24T16:31:30Z")

</div>

Hello

I have tried with the value that you indicated, but I do not observe changes in the size of the text.

Could it be because of the size of the "widget"?

Thanks again!!!!

 ![183014](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/c/8cc0e681a96fa720652eef9ba7eade3703ad8ce0.jpeg)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [24 May 2020 17:20 UTC](https://discourse.nodered.org/t/customize-ui-gauge/15144/14 "2020-05-24T17:20:49Z")

</div>

Works fine form me  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/5/d50cceeba64de3ad25f50fc034333aa391d31e85.png)  
With dashboard options  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/e/0e2d54406e3fe7ff03883b8300d585a18d21ba7d.png)