# Change gauge color gradient

**URL:** <https://discourse.nodered.org/t/change-gauge-color-gradient/18808>\
**Category:** Dashboard\
**Created:** [5 December 2019 04:18 UTC](https://discourse.nodered.org/t/change-gauge-color-gradient/18808 "2019-12-05T04:18:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![NODE777](https://avatars.discourse-cdn.com/v4/letter/n/7993a0/32.png) [@NODE777](https://discourse.nodered.org/u/NODE777)\
**Post date:** [5 December 2019 04:18 UTC](https://discourse.nodered.org/t/change-gauge-color-gradient/18808/1 "2019-12-05T04:18:30Z")

</div>

Hi

I saw some other post about this topic but I don't know how apply to my case.  
I'm trying to use **msg. ui\_control** without success can someone help me with that?  
The following flow is just to test how it would works whet it comes to change gauge color gradient.

```auto
[{"id":"1f5495f4.9a15da","type":"ui_gauge","z":"2c9e8824.fd75b8","name":"","group":"bfffd362.67af3","order":5,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value|number:1}}","min":0,"max":"300","colors":["#c0c0c0","#c0c0c0","#c0c0c0"],"seg1":"","seg2":"","x":850,"y":60,"wires":[]},{"id":"e6c933ab.fe833","type":"inject","z":"2c9e8824.fd75b8","name":"","topic":"","payload":"140","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":390,"y":80,"wires":[["6064d8a3.3b07b8"]]},{"id":"6064d8a3.3b07b8","type":"function","z":"2c9e8824.fd75b8","name":"Change color","func":"var payload = msg.payload;\n\nif(payload>150) {\n msg.ui_gauge=[\"#ff4d4d\",\"#ff4d4d\",\"#ff4d4d\"];}\n\nelse{msg.ui_gauge=[\"#ffff66\",\"#ffff66\",\"#ffff66\"];\n \n}\nreturn msg;","outputs":1,"noerr":0,"x":670,"y":160,"wires":[["1f5495f4.9a15da","e5b6f3c2.fb53b"]]},{"id":"e5d232c7.1962d","type":"inject","z":"2c9e8824.fd75b8","name":"","topic":"","payload":"200","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":370,"y":160,"wires":[["6064d8a3.3b07b8"]]},{"id":"e5b6f3c2.fb53b","type":"debug","z":"2c9e8824.fd75b8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":910,"y":160,"wires":[]},{"id":"bfffd362.67af3","type":"ui_group","z":"","name":"Pressures","tab":"e14475ad.995118","order":2,"disp":true,"width":"6","collapse":false},{"id":"e14475ad.995118","type":"ui_tab","z":"","name":"Settings","icon":"dashboard","order":3}]

```

Thank you in advance

---

<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 December 2019 05:43 UTC](https://discourse.nodered.org/t/change-gauge-color-gradient/18808/2 "2019-12-05T05:43:57Z")

</div>

It is gauge's natural function to change color if value is above some threshold. Of course you can change it manually if you like but it seems impractical. However here is example how to how to change gauge colors. (you'll need latest version of dashboard)

```auto
[{"id":"5c4c5120.bb035","type":"ui_gauge","z":"91a358ea.bbbb98","name":"","group":"dc4d8303.df87","order":0,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value | number:1}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"5","seg2":"7","x":490,"y":180,"wires":[]},{"id":"b26a6748.70f428","type":"function","z":"91a358ea.bbbb98","name":"options","func":"msg.ui_control = {options:{customSectors: {\n percents: false, \n ranges: [{\n color : \"#009900\",\n lo : 0,\n hi : 2\n },{\n color : \"#33cccc\",\n lo : 2.1,\n hi : 4\n },{\n color : \"#3366ff\",\n lo : 4.1,\n hi : 6\n },{\n color : \"#ff00ff\",\n lo : 6.1,\n hi : 8\n },{\n color : \"#ff0000\",\n lo : 8.1,\n hi : 10\n }]\n \n}}}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"x":300,"y":280,"wires":[["5c4c5120.bb035"]]},{"id":"ef9011e5.8e00d","type":"ui_slider","z":"91a358ea.bbbb98","name":"","label":"slider","tooltip":"","group":"dc4d8303.df87","order":1,"width":0,"height":0,"passthru":true,"outs":"end","topic":"","min":0,"max":10,"step":"2","x":150,"y":180,"wires":[["5c4c5120.bb035"]]},{"id":"b2eb7e33.b3416","type":"ui_button","z":"91a358ea.bbbb98","name":"","group":"dc4d8303.df87","order":2,"width":0,"height":0,"passthru":false,"label":"2 colors","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":140,"y":240,"wires":[["22f666e0.f2ceda"]]},{"id":"d3416f08.ad98e","type":"ui_button","z":"91a358ea.bbbb98","name":"","group":"dc4d8303.df87","order":2,"width":0,"height":0,"passthru":false,"label":"5 colors","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":140,"y":280,"wires":[["b26a6748.70f428"]]},{"id":"22f666e0.f2ceda","type":"function","z":"91a358ea.bbbb98","name":"options","func":"msg.ui_control = {options:{customSectors: {\n percents: false, \n ranges: [{\n color : \"#ffff00\",\n lo : 0,\n hi : 5\n },{\n color : \"#3399ff\",\n lo : 5.01,\n hi : 10\n }]\n \n}}}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"x":300,"y":240,"wires":[["5c4c5120.bb035"]]},{"id":"dc4d8303.df87","type":"ui_group","z":"","name":"Charts","tab":"18e7297.06310d7","disp":true,"width":"6"},{"id":"18e7297.06310d7","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

```

---

<div class="post-metadata">

**Author:** ![NODE777](https://avatars.discourse-cdn.com/v4/letter/n/7993a0/32.png) [@NODE777](https://discourse.nodered.org/u/NODE777)\
**Post date:** [10 December 2019 02:58 UTC](https://discourse.nodered.org/t/change-gauge-color-gradient/18808/3 "2019-12-10T02:58:42Z")

</div>

Very interesting your nodes, thank you, I worked out my issue.