# Color one value in Node-Red Dashboard differently
**URL:** https://discourse.nodered.org/t/color-one-value-in-node-red-dashboard-differently/83831
**Category:** Dashboard
**Tags:** node-red-dashboard
**Created:** [19 December 2023 12:24 UTC](https://discourse.nodered.org/t/color-one-value-in-node-red-dashboard-differently/83831 "2023-12-19T12:24:22Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@Gawan](https://discourse.nodered.org/u/Gawan)
#### Post date: [19 December 2023 12:24 UTC](https://discourse.nodered.org/t/color-one-value-in-node-red-dashboard-differently/83831/1 "2023-12-19T12:24:22Z")
Hi,
I have a bar chart looking like this:
Is there a quick possibility to color one (or more) bars in different colors ?
This is a timeline and I would like to color the actual hour e.g. in green or in red.
BR
Gawan
---
### Author:  [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)
#### Post date: [19 December 2023 16:01 UTC](https://discourse.nodered.org/t/color-one-value-in-node-red-dashboard-differently/83831/2 "2023-12-19T16:01:01Z")
@Gawan
I don't have much xp with dashboard, I only use it to monitor battery levels.
But I don't think there is an easy way out of the box.
You see, the `topic` serves as the timestamp I believe, and as each `topic` is different each time for your setup (time) there are many topics, not 2...
Where I was going, is to use 2 topics (`isOnHour`, `isOffHour`), and that will use the first 2 colour selections in the editor, but this will effect your setup considerably, and will remove the time values.
as said, my xp with dashboard is next to nil, so not to say someone doesn't have a way here.
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [19 December 2023 16:59 UTC](https://discourse.nodered.org/t/color-one-value-in-node-red-dashboard-differently/83831/3 "2023-12-19T16:59:57Z")
Not really a quick way, or even that clean, you could stack the bar chart, and use Javascript or Jsonata to create the look, but will not be perfect.
e.g.
```auto
[{"id":"fa5f6d3530e9471c","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"ui_control","v":"{\"options\":{\"scales\":{\"xAxes\":[{\"stacked\":true}],\"yAxes\":[{\"stacked\":false}]}}}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{ \"value\": 0, \"time\": 1703046577886 }, { \"value\": 1, \"time\": 1703042977886 }, { \"value\": 0, \"time\": 1703039377886 }, { \"value\": 0, \"time\": 1703035777886 }, { \"value\": 2, \"time\": 1703032177886 }, { \"value\": 1, \"time\": 1703028577886 }, { \"value\": 2, \"time\": 1703024977886 }, { \"value\": 5, \"time\": 1703021377886 }, { \"value\": 2, \"time\": 1703017777886 }, { \"value\": 0, \"time\": 1703014177886 }, { \"value\": 4, \"time\": 1703010577886 }, { \"value\": 5, \"time\": 1703006977886 }, { \"value\": 2, \"time\": 1703003377886 }, { \"value\": 1, \"time\": 1702999777886 }, { \"value\": 0, \"time\": 1702996177886 }, { \"value\": 2, \"time\": 1702992577886 }, { \"value\": 5, \"time\": 1702988977886 }, { \"value\": 3, \"time\": 1702985377886 }, { \"value\": 1, \"time\": 1702981777886 }]","payloadType":"json","x":110,"y":2580,"wires":[["3b0ea93180614553"]]},{"id":"3b0ea93180614553","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"[\t {\t \"series\" :[\"Temps\", \"Temps Now\"],\t \"data\": [\t [$$.payload.($moment($.time).format(\"H\") != $moment().format(\"H\") ? $.value : 0)],\t [$$.payload.value]\t ],\t \"labels\": [$$.payload.$moment($.time).format(\"HH:mm\")]\t }\t]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":270,"y":2580,"wires":[["abaeb04516e31a06"]]},{"id":"abaeb04516e31a06","type":"ui_chart","z":"d1395164b4eec73e","name":"Solar Chart","group":"b9d366f18ff7ae74","order":3,"width":"12","height":"9","label":"Solar Chart","chartType":"bar","legend":"true","xformat":"D/M","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#ff0000","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":450,"y":2580,"wires":[["2068c95cbaa22268"]]},{"id":"2068c95cbaa22268","type":"debug","z":"d1395164b4eec73e","name":"debug 2460","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":670,"y":2520,"wires":[]},{"id":"b9d366f18ff7ae74","type":"ui_group","name":"test","tab":"ffba43d73860d25d","order":1,"disp":true,"width":12,"collapse":false},{"id":"ffba43d73860d25d","type":"ui_tab","name":"Level","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
```
---
### Author:  [@Gawan](https://discourse.nodered.org/u/Gawan)
#### Post date: [20 December 2023 20:37 UTC](https://discourse.nodered.org/t/color-one-value-in-node-red-dashboard-differently/83831/4 "2023-12-20T20:37:38Z")
thanks to both of you !
this is a really good idea and I will solve it exactly that way
this gives additional possibilites I did not think about int he beginning
---
### Author:  [@Gawan](https://discourse.nodered.org/u/Gawan)
#### Post date: [18 January 2024 17:01 UTC](https://discourse.nodered.org/t/color-one-value-in-node-red-dashboard-differently/83831/5 "2024-01-18T17:01:16Z")
hob did you manage to have this nice axis naming - that does not work for me at all
I would like to have date and hour on the bottom of the chart
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [17 February 2024 17:01 UTC](https://discourse.nodered.org/t/color-one-value-in-node-red-dashboard-differently/83831/6 "2024-02-17T17:01:43Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.