# Change color by value + or -

**URL:** <https://discourse.nodered.org/t/change-color-by-value-or/76642>\
**Category:** Dashboard\
**Created:** [16 March 2023 20:31 UTC](https://discourse.nodered.org/t/change-color-by-value-or/76642 "2023-03-16T20:31:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Becker](https://avatars.discourse-cdn.com/v4/letter/b/c77e96/32.png) [@Becker](https://discourse.nodered.org/u/Becker)\
**Post date:** [16 March 2023 20:31 UTC](https://discourse.nodered.org/t/change-color-by-value-or/76642/1 "2023-03-16T20:31:09Z")

</div>

Hi,  
is it possible that the color of a value is changing automaticly ?  
+: black  
-: red  
for example ?

![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/6/068e38bdeb63705ce82a77eaaa4026ec1e070e83.png)

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [16 March 2023 23:03 UTC](https://discourse.nodered.org/t/change-color-by-value-or/76642/2 "2023-03-16T23:03:33Z")

</div>

Hi .. you can use the `msg.className` and depending whether the number is positive or negative send a "warning / red" class to the ui text node .. quite a tedious process but i couldn't think of anything else.

Here is an example

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

```auto
[{"id":"88a1abde91dda0d2","type":"inject","z":"937cb040.d8e16","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"-123","payloadType":"num","x":310,"y":800,"wires":[["cb3952fb16ac8ba2"]]},{"id":"2b6afda8cf58a308","type":"ui_text","z":"937cb040.d8e16","group":"dc65816ac3f5a17f","order":0,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","className":"","x":690,"y":860,"wires":[]},{"id":"cb3952fb16ac8ba2","type":"function","z":"937cb040.d8e16","name":"add style","func":"if (msg.payload < 0) {\n msg.className = \"warning\"\n}\nelse {\n msg.className = \"\"\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":860,"wires":[["2b6afda8cf58a308","bdd7a947ffb90d4d"]]},{"id":"75b642c88c32662e","type":"inject","z":"937cb040.d8e16","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"345","payloadType":"num","x":310,"y":900,"wires":[["cb3952fb16ac8ba2"]]},{"id":"149778cdf7684859","type":"ui_template","z":"937cb040.d8e16","group":"","name":"warning styles","order":0,"width":0,"height":0,"format":"<style>\n .warning {\n color: red !important;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":820,"y":700,"wires":[[]]},{"id":"bdd7a947ffb90d4d","type":"debug","z":"937cb040.d8e16","name":"debug 36","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":590,"y":800,"wires":[]},{"id":"dc65816ac3f5a17f","type":"ui_group","name":"Default","tab":"27301abf42b47a3a","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"27301abf42b47a3a","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [17 March 2023 07:52 UTC](https://discourse.nodered.org/t/change-color-by-value-or/76642/3 "2023-03-17T07:52:44Z")

</div>

I use this method, no css involved, may be limited options, but works for me.

```auto
[{"id":"39af0df5fe1c06a2","type":"switch","z":"d1d5b47695a238e0","name":"","property":"payload","propertyType":"msg","rules":[{"t":"lt","v":"0","vt":"num"},{"t":"eq","v":"0","vt":"num"},{"t":"gt","v":"0","vt":"num"}],"checkall":"true","repair":false,"outputs":3,"x":570,"y":420,"wires":[["917b8d1e3d71db60"],["2385c18f0f324c76"],["a75de53149517996"]]},{"id":"c4dcf81b6c43aebd","type":"ui_button","z":"d1d5b47695a238e0","name":"","group":"0df4552f9d69039d","order":4,"width":3,"height":2,"passthru":false,"label":"Zero","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"0","payloadType":"num","topic":"topic","topicType":"msg","x":390,"y":420,"wires":[["39af0df5fe1c06a2"]]},{"id":"cf35e882013e04b0","type":"ui_button","z":"d1d5b47695a238e0","name":"","group":"0df4552f9d69039d","order":5,"width":3,"height":2,"passthru":false,"label":"+10","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"10","payloadType":"num","topic":"topic","topicType":"msg","x":390,"y":460,"wires":[["39af0df5fe1c06a2"]]},{"id":"2ff6f57ce6bbc73f","type":"ui_button","z":"d1d5b47695a238e0","name":"","group":"0df4552f9d69039d","order":2,"width":3,"height":2,"passthru":false,"label":"-10","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"-10","payloadType":"num","topic":"topic","topicType":"msg","x":390,"y":380,"wires":[["39af0df5fe1c06a2"]]},{"id":"917b8d1e3d71db60","type":"change","z":"d1d5b47695a238e0","name":"","rules":[{"t":"set","p":"fcolor","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":380,"wires":[["027c4571b7afc0e2"]]},{"id":"2385c18f0f324c76","type":"change","z":"d1d5b47695a238e0","name":"","rules":[{"t":"set","p":"fcolor","pt":"msg","to":"yellow","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":420,"wires":[["027c4571b7afc0e2"]]},{"id":"a75de53149517996","type":"change","z":"d1d5b47695a238e0","name":"","rules":[{"t":"set","p":"fcolor","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":460,"wires":[["027c4571b7afc0e2"]]},{"id":"027c4571b7afc0e2","type":"ui_text","z":"d1d5b47695a238e0","group":"0df4552f9d69039d","order":3,"width":9,"height":6,"name":"","label":"Value","format":"<font size=6><font color={{fcolor}}>{{msg.payload}}","layout":"row-spread","className":"","x":950,"y":420,"wires":[]},{"id":"0df4552f9d69039d","type":"ui_group","name":"DEFAULT","tab":"f3a8a67ff0904e39","order":1,"disp":false,"width":"12","collapse":false,"className":""},{"id":"f3a8a67ff0904e39","type":"ui_tab","name":"HOME","icon":"dashboard","order":17,"disabled":false,"hidden":false}]

```

![color](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/6/263954beae2362b6f75c6ee6d903d857638959b7.gif)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [17 March 2023 08:47 UTC](https://discourse.nodered.org/t/change-color-by-value-or/76642/4 "2023-03-17T08:47:09Z")

</div>

You can use angular to set the css  
e.g

```auto
[{"id":"2b6afda8cf58a308","type":"ui_text","z":"65617ffeb779f51c","group":"dc65816ac3f5a17f","order":0,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload < 0 ? '<span class=\"minus\">' + msg.payload + '</span>' : msg.payload}}","layout":"row-spread","className":"","x":310,"y":3800,"wires":[]},{"id":"88a1abde91dda0d2","type":"inject","z":"65617ffeb779f51c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"-123","payloadType":"num","x":150,"y":3740,"wires":[["2b6afda8cf58a308"]]},{"id":"75b642c88c32662e","type":"inject","z":"65617ffeb779f51c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"345","payloadType":"num","x":130,"y":3820,"wires":[["2b6afda8cf58a308"]]},{"id":"b1ac2980dabdcd31","type":"ui_template","z":"65617ffeb779f51c","group":"","name":"warning styles","order":0,"width":0,"height":0,"format":"<style>\n .minus {\n color: red !important;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":400,"y":3680,"wires":[[]]},{"id":"dc65816ac3f5a17f","type":"ui_group","name":"Default","tab":"27301abf42b47a3a","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"27301abf42b47a3a","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

```auto
{{msg.payload < 0 ? '<span class="minus">' + msg.payload + '</span>' : msg.payload}}

```

@dceejay But it does not support inline style `style="color:red !important;"` which is valid html?  
@smanjunath211 \<font\> is [not supported in html5](https://www.w3schools.com/tags/tag_font.asp)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [31 March 2023 08:47 UTC](https://discourse.nodered.org/t/change-color-by-value-or/76642/5 "2023-03-31T08:47:39Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.