# Chart line colours

**URL:** <https://discourse.nodered.org/t/chart-line-colours/7296>\
**Category:** Dashboard\
**Created:** [27 January 2019 08:06 UTC](https://discourse.nodered.org/t/chart-line-colours/7296 "2019-01-27T08:06:30Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [27 January 2019 08:06 UTC](https://discourse.nodered.org/t/chart-line-colours/7296/1 "2019-01-27T08:06:30Z")

</div>

(Sorry, I've read a couple of suggestions, but I am still not getting it.)

I have a chart and I am feeding 2 data sets into it.

I get that they have to have different `topics` so the chart shows them correctly.

But where I am sticking is where/how to set the colours?

If it is one series, sure there is the colour selection thing in the chart box.

But 2 series? There isn't a second/third/etc colour selector.

I've tried setting msg.color to a value, but that doesn't seem to be working.

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [27 January 2019 09:28 UTC](https://discourse.nodered.org/t/chart-line-colours/7296/2 "2019-01-27T09:28:57Z")

</div>

Solved!

For the sake of anyone who is also stuck and want to know how to set colours on a chart with multiple lines.

When you open the CHART icon and scroll down to the colour selection section.

The colour/s for the sets of data are:  
From top left to the right, then down to the next row, left to right.

So, if you have ONE set of data, it will use the top right colour.  
If you have TWO sets of data, set #1 will use the top right colour, the set #2 will use the next colour which is to the right of that first colour.

I have only two sets. If you have three sets of data, the third set will use the top right colour.

I have seen a lot of people stuck on this problem.

I hope this helps others.

See attached picture to show the colour selection order.

The red numbers are the number for which set of data.

 ![Screenshot%20from%202019-01-27%2020-29-17](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/94b842c515a1a4c29cb3450b6bad82f40cf9d762.png)

---

<div class="post-metadata">

**Author:** ![justone](https://avatars.discourse-cdn.com/v4/letter/j/b3f665/32.png) [@justone](https://discourse.nodered.org/u/justone)\
**Post date:** [27 March 2019 14:25 UTC](https://discourse.nodered.org/t/chart-line-colours/7296/3 "2019-03-27T14:25:50Z")

</div>

You also also set the colors using a  
msg.ui\_control = {"colors":['#FF0000', '#00FF00', '#0000FF', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000']};  
right before the final  
return msg;  
in any object in front of the chart node.  
Example would turn first 3 attached sources into red, green, blue .....  
And as long as you ensure the order of the msgs being served all remains pretty static.  
Though it doesn't work straight out of the box since it does require an update on the displayed webpage after such a change. Means if the flow gets started by an injection most times nothing happens until the next inject does take place of if you simply press the update button on the displaying browserpage.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [27 March 2019 14:53 UTC](https://discourse.nodered.org/t/chart-line-colours/7296/4 "2019-03-27T14:53:56Z")

</div>

> [@Trying\_to\_learn](#):
>
> So, if you have ONE set of data, it will use the top right colour.

Isn't that 'top left colour' etc?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [28 March 2019 07:37 UTC](https://discourse.nodered.org/t/chart-line-colours/7296/5 "2019-03-28T07:37:16Z")

</div>

I stand corrected.

Sorry: left/right. I easily get them confused.

Luckily now while driving though.

---

<div class="post-metadata">

**Author:** ![redDawn](https://avatars.discourse-cdn.com/v4/letter/r/77aa72/32.png) [@redDawn](https://discourse.nodered.org/u/redDawn)\
**Post date:** [22 October 2019 20:45 UTC](https://discourse.nodered.org/t/chart-line-colours/7296/6 "2019-10-22T20:45:49Z")

</div>

Node-RED version: v1.0.1  
Node.js version: v10.16.3  
Dashboard version 2.17.0 started at /ui

I'm sending msg={topic:'RH',payload:45}; to a single line chart. The color of the line (payload) is now determined by the top middle box color.

Here's a dump of the saved output:

```auto
[{"series":["","RH"],"data":[[],[{"x":1571733636484,"y":47.57},{"x":1571733908802,"y":47.61},{"x":1571734176840,"y":47.43},{"x":1571734453500,"y":47.65},{"x":1571734725844,"y":48.01},{"x":1571735000379,"y":48.25},{"x":1571735272726,"y":48.24},{"x":1571735547240,"y":48.44},{"x":1571735819555,"y":48.57},{"x":1571736092987,"y":48.35},{"x":1571736364246,"y":48.2},{"x":1571736636588,"y":47.84},{"x":1571736908885,"y":47.34},{"x":1571737176765,"y":45.96},{"x":1571737445685,"y":44.74},{"x":1571737719033,"y":44.6},{"x":1571737991306,"y":44.93},{"x":1571738264677,"y":45.26},{"x":1571738531538,"y":45.7},{"x":1571738804934,"y":45.79},{"x":1571739078314,"y":46.13},{"x":1571739350614,"y":46.02},{"x":1571739621793,"y":46.31},{"x":1571775748456,"y":41.54},{"x":1571776016460,"y":42.12},{"x":1571776289893,"y":42.24},{"x":1571776562222,"y":43.35},{"x":1571776833339,"y":42.82}]],"labels":[""]}]

```

---

<div class="post-metadata">

**Author:** ![redDawn](https://avatars.discourse-cdn.com/v4/letter/r/77aa72/32.png) [@redDawn](https://discourse.nodered.org/u/redDawn)\
**Post date:** [22 October 2019 21:08 UTC](https://discourse.nodered.org/t/chart-line-colours/7296/7 "2019-10-22T21:08:30Z")

</div>

...looks like the color array is determined by the series, which would explain why, in this case, "series[0]" is "". and series[1] maps to colors[1] which is the payload.

"colors":["#1F77B4","#AEC7E8","#FF7F0E","#2CA02C","#98DF8A","#D62728","#FF9896","#9467BD","#C5B0D5"]

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [29 April 2021 22:42 UTC](https://discourse.nodered.org/t/chart-line-colours/7296/8 "2021-04-29T22:42:36Z")

</div>

Left, right.... Yeah. Sorry. My bad.

Thanks Paul. I am lisdexic.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [30 April 2021 08:02 UTC](https://discourse.nodered.org/t/chart-line-colours/7296/9 "2021-04-30T08:02:33Z")

</div>

> [@Trying\_to\_learn](#):
>
> I am lisdexic

...and late replying too 😆😆😆

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [30 April 2021 09:29 UTC](https://discourse.nodered.org/t/chart-line-colours/7296/10 "2021-04-30T09:29:30Z")

</div>

What can I say?

😉

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [30 April 2021 10:12 UTC](https://discourse.nodered.org/t/chart-line-colours/7296/11 "2021-04-30T10:12:40Z")

</div>