# Dashboard 2.0 ui-chart, prevent line color changes for certain data

**URL:** <https://discourse.nodered.org/t/dashboard-2-0-ui-chart-prevent-line-color-changes-for-certain-data/100214>\
**Category:** Dashboard\
**Tags:** dashboard-2, ui-chart\
**Created:** [21 January 2026 22:17 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-chart-prevent-line-color-changes-for-certain-data/100214 "2026-01-21T22:17:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sergii](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@Sergii](https://discourse.nodered.org/u/Sergii)\
**Post date:** [21 January 2026 22:17 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-chart-prevent-line-color-changes-for-certain-data/100214/1 "2026-01-21T22:17:13Z")

</div>

I have some data. For example, it's the temperatures of cold and hot water. I wanted to plot a temperature graph with two lines. Cold temperature water - blue line. Hot water - red line.  
I did it this way:

```auto
[{"id":"602a42b3526a11ca","type":"ui-chart","z":"1560eb5b71156b27","group":"9896c20104709e5e","name":"Ranrom Graph","label":"random","order":1,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"","yAxisPropertyType":"property","ymin":"0","ymax":"10","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":"10","removeOlderUnit":"60","removeOlderPoints":"","colors":["#ff0000","#0540f0","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"8","height":"6","className":"","interpolation":"linear","x":1080,"y":140,"wires":[[]]},{"id":"0f9a0e277b9575ec","type":"function","z":"1560eb5b71156b27","name":"func Cold","func":"msg.topic = \"Cold water\";\nmsg.series = \"Green\";\n\nreturn msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":900,"y":100,"wires":[["602a42b3526a11ca"]]},{"id":"a882cc56df05a259","type":"function","z":"1560eb5b71156b27","name":"RND 0-10","func":"function getRandomInt(min, max) {\n min = Math.ceil(min);\n max = Math.floor(max);\n msg.payload = Math.floor(Math.random() * (max - min)) + min; // The maximum is exclusive and the minimum is inclusive\n //msg.topic = \"Улица\";\n}\ngetRandomInt(0, 10);\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":100,"wires":[["0f9a0e277b9575ec"]]},{"id":"29631d97fbc429de","type":"inject","z":"1560eb5b71156b27","name":"","props":[{"p":"payload"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":590,"y":140,"wires":[["a882cc56df05a259","2e0f2ce0d29ac678"]]},{"id":"2e0f2ce0d29ac678","type":"function","z":"1560eb5b71156b27","name":"RND 0-10","func":"function getRandomInt(min, max) {\n min = Math.ceil(min);\n max = Math.floor(max);\n msg.payload = Math.floor(Math.random() * (max - min)) + min; // The maximum is exclusive and the minimum is inclusive\n //msg.topic = \"Улица\";\n}\ngetRandomInt(0, 10);\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":160,"wires":[["e0af45181bb79007"]]},{"id":"e0af45181bb79007","type":"function","z":"1560eb5b71156b27","name":"func Hot","func":"msg.topic = \"Hot water\";\nmsg.series = \"red\";\nreturn msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":900,"y":160,"wires":[["602a42b3526a11ca"]]},{"id":"9896c20104709e5e","type":"ui-group","name":"RNG Graph","page":"dea6077cf7050394","width":"8","height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"dea6077cf7050394","type":"ui-page","name":"TEST RND Graph","ui":"27d73580a0f044ca","path":"/page011","icon":"home","layout":"grid","theme":"a70602e73bbb2a95","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":-1,"className":"","visible":"true","disabled":"false"},{"id":"27d73580a0f044ca","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":false},{"id":"a70602e73bbb2a95","type":"ui-theme","name":"Admin Theme","colors":{"surface":"#454545","primary":"#d47e1c","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"b4eda1823615932a","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.1"}}]

```

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

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

As we can see, the color is not assigned to the data from the topic _msg.topic = "Cold water";_  
The color may change places with other data at some point.  
How to force line color for data?

I studied examples from here: [https://dashboard-demos.flowfuse.cloud/dashboard/charts-example](https://dashboard-demos.flowfuse.cloud/dashboard/charts-example)  
But it doesn't work here either. Let's see **Grouped Bar Chart Example**

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/3/d3283b24055f61813f0d8e1c8b09cd1855241f91.png)  
I move the slider _Slider 1 Yellow_ and the graph is displayed in green, although it was supposed to be drawn in yellow. It would be possible to strictly organize the sequence of data acquisition and not violate it, then the color does not mix. But this is a crutch.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [21 January 2026 22:37 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-chart-prevent-line-color-changes-for-certain-data/100214/2 "2026-01-21T22:37:16Z")

</div>

Inject the following into your ui\_chart node

```auto
[{"id":"d22ad445e1c91af8","type":"inject","z":"506727cd93754bdb","name":"","props":[{"p":"ui_update.chartOptions","v":"{\"series\": [{\"itemStyle\": {\"color\": \"red\"}}, {\"itemStyle\": {\"color\": \"blue\"}}]}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1170,"y":7260,"wires":[["647126cbc37f3067"]]}]

```

The colours might be the wrong way round

---

<div class="post-metadata">

**Author:** ![Sergii](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@Sergii](https://discourse.nodered.org/u/Sergii)\
**Post date:** [22 January 2026 07:30 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-chart-prevent-line-color-changes-for-certain-data/100214/3 "2026-01-22T07:30:53Z")

</div>

Thanks. I didn't know you could pass parameters like that.  
This code does change color. But it's still not linked to data. The first values ​​received will be red, the second ones blue. You need to add some parameters so that the color is linked to msg.topic, but how?  
P.S. I added a parameter `"name": "Cold water",` It seems to work.  
It turned out like this:

```auto
{
    "series": [
        {
            "name": "Cold water",
            "itemStyle": {
                "color": "blue"
            }
        },
        {
            "name": "Hot water",
            "itemStyle": {
                "color": "red"
            }
        }
    ]
}

```

How often should this be sent to _ui-chart_ ? With each new data?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 January 2026 08:14 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-chart-prevent-line-color-changes-for-certain-data/100214/4 "2026-01-22T08:14:56Z")

</div>

Look at the help text for the node, that includes an example of how to do it. You have to include the series name in the ui\_update message to link the name to the colour.

---

<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:** [21 February 2026 08:15 UTC](https://discourse.nodered.org/t/dashboard-2-0-ui-chart-prevent-line-color-changes-for-certain-data/100214/5 "2026-02-21T08:15:17Z")

</div>

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