# Bar Graph Colors determined by values **URL:** \ **Category:** Dashboard\ **Created:** [23 November 2018 20:13 UTC](https://discourse.nodered.org/t/bar-graph-colors-determined-by-values/5156 "2018-11-23T20:13:55Z")\ **Posts on this page:** 1\ **Showing post:** 4

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\ **Post date:** [24 November 2018 13:23 UTC](https://discourse.nodered.org/t/bar-graph-colors-determined-by-values/5156/4 "2018-11-24T13:23:22Z")

Also see this post [Method to interact bewteen node-red/JS/HTML/CSS ui\_template](https://discourse.nodered.org/t/method-to-interact-bewteen-node-red-js-html-css-ui-template/4229) Below example flow uses this code to achieve what you want. You can modify it to add how many color segments you want as well as the associated colors. ```auto let pay = msg.payload; let col = "lime"; switch (true) { case (pay >70): col = "lime"; break; case (pay >50): col = "orange"; break; case (pay >0): col = "red"; break; } msg.color = col; return msg; ``` ```auto [{"id":"e0816f8b.d98e6","type":"tab","label":"SOC - 3 - Simplified - without scope.$watch","disabled":false,"info":""},{"id":"a7d3387d.fa7518","type":"ui_template","z":"e0816f8b.d98e6","group":"9145e585.5ef2e8","name":"Batt_NEW","order":0,"width":0,"height":0,"format":"\n\n\n\n\n\n\n\n\n

{{msg.payload}}%

\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":650,"y":180,"wires":[[]]},{"id":"4f78d16a.b9de9","type":"inject","z":"e0816f8b.d98e6","name":"Trigger","topic":"","payload":"","payloadType":"date","repeat":"0.9","crontab":"","once":true,"onceDelay":0.1,"x":140,"y":180,"wires":[["1e94b315.e8ea7d"]]},{"id":"1e94b315.e8ea7d","type":"change","z":"e0816f8b.d98e6","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload%100","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":180,"wires":[["7d5ca2fe.e0561c"]]},{"id":"3da31f26.c9d51","type":"comment","z":"e0816f8b.d98e6","name":"Modified: removed scope.$watch","info":"","x":170,"y":120,"wires":[]},{"id":"7d5ca2fe.e0561c","type":"function","z":"e0816f8b.d98e6","name":"Set color","func":"let pay = msg.payload;\nlet col = \"lime\";\n\nswitch (true) {\n case (pay >70):\n col = \"lime\";\n break;\n case (pay >50):\n col = \"orange\";\n break; \n case (pay >0):\n col = \"red\";\n break;\n}\n\nmsg.color = col;\nreturn msg;","outputs":1,"noerr":0,"x":480,"y":180,"wires":[["a7d3387d.fa7518"]]},{"id":"9145e585.5ef2e8","type":"ui_group","z":"","name":"Car Data","tab":"a2516971.840328","order":3,"disp":true,"width":"12","collapse":false},{"id":"a2516971.840328","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}] ``` EDIT: in order to work properly this flow should be configured with **Theme = Light** and configured to use "Angular theme in ui\_template" ![r-01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/2cb11cf962d949d1f1754d39869a65c9432a41aa.png) --- _[View the full topic](https://discourse.nodered.org/t/bar-graph-colors-determined-by-values/5156)._