# 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:** 4\ **Page:** 1

**Author:** ![Grazor](https://avatars.discourse-cdn.com/v4/letter/g/977dab/32.png) [@Grazor](https://discourse.nodered.org/u/Grazor)\ **Post date:** [23 November 2018 20:13 UTC](https://discourse.nodered.org/t/bar-graph-colors-determined-by-values/5156/1 "2018-11-23T20:13:55Z")

Loving the dashboard, many thanks for the work gone into making it. With regards to bar graphs, would it be possible to control the color of the bar with the value being passed into it, in a similar way to the min, seg1, seg2, and max variables work with the gauge graph? For example I'm using the dashboard bar graphs to monitor battery levels and it would be great to color the bar green for good, amber for low, and red for depleted. If this can already be achieved via code I'd love to know how. Thanks again. Graham ---

**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:** [23 November 2018 20:39 UTC](https://discourse.nodered.org/t/bar-graph-colors-determined-by-values/5156/2 "2018-11-23T20:39:56Z")

No easy way - though there was a discussion fairly recently on how to use a template to achieve it. I think it may have been this one [Battery gauge load msg.payload into javascript [Resolved]](https://discourse.nodered.org/t/battery-gauge-load-msg-payload-into-javascript-resolved/2639) ---

**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:** [24 November 2018 08:14 UTC](https://discourse.nodered.org/t/bar-graph-colors-determined-by-values/5156/3 "2018-11-24T08:14:26Z")

Also see this post [Led icon changed](https://discourse.nodered.org/t/led-icon-changed/656/11) ---

**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)