# Values color - gauge

**URL:** <https://discourse.nodered.org/t/values-color-gauge/8633>\
**Category:** Dashboard\
**Created:** [5 March 2019 15:33 UTC](https://discourse.nodered.org/t/values-color-gauge/8633 "2019-03-05T15:33:38Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![aabbas](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@aabbas](https://discourse.nodered.org/u/aabbas)\
**Post date:** [5 March 2019 15:33 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/1 "2019-03-05T15:33:38Z")

</div>

Hi,  
I'm using some template as a gauge. I changed the text color but I need to change the values color. ![PNG](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d285707b40c76fb27f1cd5629fad51f7acd52352.jpeg)  
 ![13](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/362a70e0419bc3ce210df9b9e8260f7648508c1e.png)

regards,

---

<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 March 2019 16:19 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/2 "2019-03-05T16:19:06Z")

</div>

Does this help ?

> <https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md>

---

<div class="post-metadata">

**Author:** ![aabbas](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@aabbas](https://discourse.nodered.org/u/aabbas)\
**Post date:** [5 March 2019 16:57 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/3 "2019-03-05T16:57:00Z")

</div>

Not to much! 😣😅

---

<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 March 2019 17:11 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/4 "2019-03-05T17:11:20Z")

</div>

Most of gauge elements have inline styles so overriding is not an option here. Sadly.

---

<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 March 2019 19:09 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/5 "2019-03-05T19:09:07Z")

</div>

Really. The justgage options expose valueFontColor

---

<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 March 2019 19:48 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/6 "2019-03-05T19:48:34Z")

</div>

To change gauge options with msg

```auto
msg = {payload:25,ui_control:{options:{valueFontColor:"#00ff00"}}}
return msg;

```

---

<div class="post-metadata">

**Author:** ![aabbas](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@aabbas](https://discourse.nodered.org/u/aabbas)\
**Post date:** [20 March 2019 17:27 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/7 "2019-03-20T17:27:11Z")

</div>

It's doesn't work 😕

---

<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:** [20 March 2019 20:20 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/8 "2019-03-20T20:20:39Z")

</div>

Share your flow.

---

<div class="post-metadata">

**Author:** ![aabbas](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@aabbas](https://discourse.nodered.org/u/aabbas)\
**Post date:** [20 March 2019 21:08 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/11 "2019-03-20T21:08:03Z")

</div>

[{"id":"a1686925.d3c5a8","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"7f5513d2.af4a1c","type":"ui\_template","z":"a1686925.d3c5a8","group":"d30fde8b.f7dc7","name":"Mesures","order":0,"width":"6","height":"40","format":"\n #CabaneDeGardian\_Mesures,\n #CabaneDeGardian\_Mesures md-card {\n background : rgba(205,205,205,0);\n border: rgba(205,205,205,0);\n height: 200px; \n font-size: 25px;\n color: lime;\n position: center;\n }\n\n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":900,"y":340,"wires":[]},{"id":"b6d28dfd.a4b6","type":"ui\_gauge","z":"a1686925.d3c5a8","name":"CO2","group":"d30fde8b.f7dc7","order":5,"width":0,"height":0,"gtype":"gage","title":"CO2","label":"ppm","format":"{{msg.payload}}","min":"350","max":"40000","colors":["#00b500","#e6e600","#ca3838"],"seg1":"1000","seg2":"2000","x":1010,"y":400,"wires":},{"id":"bb0b50e5.5e48f","type":"function","z":"a1686925.d3c5a8","name":"","func":"var buf = Buffer.from(msg.payload);\nvar s = buf.readUInt8() \>\> 7 === 0 ? 0 : 2048;\nvar m = (buf.readUInt16BE() & 0b0000011111111111) - s;\nvar e = (buf.readUInt8() & 0b01111000) \>\> 3;\nmsg.payload = 0.01 \* m \* Math.pow(2, e);\nmsg.payload = msg.payload.toFixed(1);\nreturn msg","outputs":1,"noerr":0,"x":770,"y":400,"wires":[["b6d28dfd.a4b6"]]},{"id":"96e22936.e103a8","type":"change","z":"a1686925.d3c5a8","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.value","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":400,"wires":[["bb0b50e5.5e48f"]]},{"id":"17967275.e6a46e","type":"switch","z":"a1686925.d3c5a8","name":"CO2","property":"payload.dstgad","propertyType":"msg","rules":[{"t":"eq","v":"6/6/2","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":310,"y":400,"wires":[["96e22936.e103a8"]]},{"id":"d30fde8b.f7dc7","type":"ui\_group","z":"","name":"Mesures","tab":"4f409648.8d9438","order":6,"disp":false,"width":"6","collapse":false},{"id":"4f409648.8d9438","type":"ui\_tab","z":"","name":"CabaneDeGardian","icon":"home","order":1}]

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [20 March 2019 21:46 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/12 "2019-03-20T21:46:52Z")

</div>

Unfortunately your flow isn’t currently importable.Please read the following post [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506?u=ukmoose) and then edit the above message.

---

<div class="post-metadata">

**Author:** ![aabbas](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@aabbas](https://discourse.nodered.org/u/aabbas)\
**Post date:** [21 March 2019 07:32 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/13 "2019-03-21T07:32:23Z")

</div>

```auto
[{"id":"6aad5549.ea5dec","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"936f2449.6e5f18","type":"ui_template","z":"6aad5549.ea5dec","group":"d30fde8b.f7dc7","name":"Mesures","order":0,"width":"6","height":"40","format":"<style>\n #CabaneDeGardian_Mesures,\n #CabaneDeGardian_Mesures md-card {\n background : rgba(205,205,205,0);\n border: rgba(205,205,205,0);\n height: 200px; \n font-size: 25px;\n color: lime;\n position: center;\n }\n\n</style>\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":900,"y":340,"wires":[[]]},{"id":"ade47aa8.9f0a58","type":"ui_gauge","z":"6aad5549.ea5dec","name":"CO2","group":"d30fde8b.f7dc7","order":5,"width":0,"height":0,"gtype":"gage","title":"CO2","label":"ppm","format":"{{msg.payload}}","min":"350","max":"40000","colors":["#00b500","#e6e600","#ca3838"],"seg1":"1000","seg2":"2000","x":1010,"y":400,"wires":[]},{"id":"85c3fd77.0bb5f","type":"function","z":"6aad5549.ea5dec","name":"","func":"var buf = Buffer.from(msg.payload);\nvar s = buf.readUInt8() >> 7 === 0 ? 0 : 2048;\nvar m = (buf.readUInt16BE() & 0b0000011111111111) - s;\nvar e = (buf.readUInt8() & 0b01111000) >> 3;\nmsg.payload = 0.01 * m * Math.pow(2, e);\nmsg.payload = msg.payload.toFixed(1);\nreturn msg","outputs":1,"noerr":0,"x":770,"y":400,"wires":[["ade47aa8.9f0a58"]]},{"id":"d30fde8b.f7dc7","type":"ui_group","z":"","name":"Mesures","tab":"4f409648.8d9438","order":6,"disp":false,"width":"6","collapse":false},{"id":"4f409648.8d9438","type":"ui_tab","z":"","name":"CabaneDeGardian","icon":"home","order":1}]

```

---

<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:** [21 March 2019 13:48 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/14 "2019-03-21T13:48:14Z")

</div>

I don't see that you are trying to use the option I suggested

> [@hotNipi](#):
>
> msg = {payload:25,ui\_control:{options:{valueFontColor:"#00ff00"}}} return msg;

---

<div class="post-metadata">

**Author:** ![aabbas](https://avatars.discourse-cdn.com/v4/letter/a/3be4f8/32.png) [@aabbas](https://discourse.nodered.org/u/aabbas)\
**Post date:** [21 March 2019 15:56 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/15 "2019-03-21T15:56:30Z")

</div>

> [@hotNipi](#):
>
> msg = {payload:25,ui\_control:{options:{valueFontColor:"#00ff00"}}} return msg;

like this?

```auto
[{"id":"feba725a.782358","type":"function","z":"6aad5549.ea5dec","name":"","func":"msg = {payload:25,ui_control:{options:{valueFontColor:\"#00ff00\"}}} \nreturn msg;","outputs":1,"noerr":0,"x":770,"y":440,"wires":[["ade47aa8.9f0a58"]]}]

```

---

<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:** [21 March 2019 16:28 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/16 "2019-03-21T16:28:43Z")

</div>

True. It does not work for Node-RED theme, but works with Angular theme. Weird.

---

<div class="post-metadata">

**Author:** ![zainisma](https://avatars.discourse-cdn.com/v4/letter/z/aeb1de/32.png) [@zainisma](https://discourse.nodered.org/u/zainisma)\
**Post date:** [14 May 2020 06:22 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/17 "2020-05-14T06:22:21Z")

</div>

Sorry for bringing this topic back up again.

My Node Red stats 1.0.5, node,js 12.16.2 npm 6.14.4 : Windows 10

Using the Dark Theme dashboard

But has anyone found a solution to this problem? To change the font color of the value in a gauge... circled in red below

![chg_gg_font_color](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/f/1f42e413ffc964152a4ae05bba406f2689ee9c1f.png)

I tried to change it using change node set as shown below... but no dice...

 ![chg_node_chg_gg_font_color](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/75a9fc3a1307a8b08772f31accf1a77cd364d22a.png)

my flow looks like this

 ![flow_chg_gg_font_color](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/f/8f8a3ed63f67c678b5f377f0fc151ada87051c7b.png)

```auto
[{"id":"77eb42c6.23338c","type":"ui_ui_control","z":"e01199f.ec54c68","name":"","x":1000,"y":1940,"wires":[["a9dbd5ef.9fb0d8"]]},{"id":"a9dbd5ef.9fb0d8","type":"delay","z":"e01199f.ec54c68","name":"","pauseType":"delay","timeout":"40","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":1150,"y":1940,"wires":[["bcfd12fe.95b6"]]},{"id":"bcfd12fe.95b6","type":"change","z":"e01199f.ec54c68","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.valueMinFontSize","pt":"msg","to":"24","tot":"str"},{"t":"set","p":"ui_control.options.valueFontColor","pt":"msg","to":"#32cd32","tot":"str"},{"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":1320,"y":1940,"wires":[["e2822e5c.111f6"]]},{"id":"e2822e5c.111f6","type":"ui_gauge","z":"e01199f.ec54c68","name":"HP Steam from Refinery","group":"c03ae725.373378","order":4,"width":5,"height":3,"gtype":"gage","title":"<center><b><i><font size=\"4\" color=\"gold\">{{msg.payload.Tag}}</font></i></b></center>","label":"tph","format":"{{msg.payload.Value}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"33","seg2":"66","x":1550,"y":1940,"wires":[]},{"id":"94aed295.a7a6a","type":"function","z":"e01199f.ec54c68","name":"Set GET and request Value","func":"var tag = msg.payload;\n\nvar PIAF_Tag_flowname_pair = flow.get(\"PIAF_TAG_flowname_pair\");\nvar retObj = PIAF_Tag_flowname_pair.filter(function(i) {\n return i.PIAF_Tag === tag;\n});\n\nmsg.payload = {\"Tag\":tag,\"Value\":flow.get(retObj[0].flowname).Value, \"Date\":flow.get(retObj[0].flowname).date, \"Time\":flow.get(retObj[0].flowname).time};\n\nreturn msg;","outputs":1,"noerr":0,"x":1280,"y":1900,"wires":[["25d6ab8e.00be04","e2822e5c.111f6","fb7f64.05c210a","bacbe340.117ea"]]},{"id":"c03ae725.373378","type":"ui_group","z":"","name":"OUTPUT","tab":"152d2da.753f2d2","order":3,"disp":true,"width":"20","collapse":false},{"id":"152d2da.753f2d2","type":"ui_tab","z":"","name":"High Pressure Steam Balance","icon":"dashboard","disabled":false,"hidden":false}]

```

Any feedback on this is much appreciated.

---

<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:** [14 May 2020 07:08 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/18 "2020-05-14T07:08:22Z")

</div>

If you choose Node-RED theme everywhere, you can't use this option. Colors for value, unit and min/max depend on

```auto
.nr-dashboard-theme .nr-dashboard-gauge text {
    fill: #eeeeee;
    margin: 8px;
}

```

With Angular theme justgauge options can still be adjusted.  
This may be design decision or may be here just by mistake.  
Probably @dceejay has something to say about it.

---

<div class="post-metadata">

**Author:** ![zainisma](https://avatars.discourse-cdn.com/v4/letter/z/aeb1de/32.png) [@zainisma](https://discourse.nodered.org/u/zainisma)\
**Post date:** [15 May 2020 05:18 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/19 "2020-05-15T05:18:06Z")

</div>

How do I enable angular Theme in Node Red?

---

<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:** [15 May 2020 05:21 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/20 "2020-05-15T05:21:11Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/1/c103b41e6e8ad56fe083e1e13683f9cc4494c99a.png)

---

<div class="post-metadata">

**Author:** ![zainisma](https://avatars.discourse-cdn.com/v4/letter/z/aeb1de/32.png) [@zainisma](https://discourse.nodered.org/u/zainisma)\
**Post date:** [15 May 2020 06:13 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/21 "2020-05-15T06:13:59Z")

</div>

Thanks for sharing hotNipi

---

<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:** [15 May 2020 06:24 UTC](https://discourse.nodered.org/t/values-color-gauge/8633/22 "2020-05-15T06:24:50Z")

</div>

Yes we set it as part of the theme so the text matches across the whole dashboard. Not sure if you could override with !important. I’ve not tried it.

[Next page](https://discourse.nodered.org/t/values-color-gauge/8633.md?page=2)