Chart line colours

Dashboard
1

(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.

2

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
Screenshot from 2019-01-27 20-29-17.png1360Ă—768 123 KB

2 Likes
3

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.

2 Likes
4

Isn't that 'top left colour' etc?

2 Likes
5

I stand corrected.

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

Luckily now while driving though.

6

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:

[{"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":[""]}]
7

...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"]

8

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

Thanks Paul. I am lisdexic.

9

...and late replying too :laughing::laughing::laughing:

2 Likes
10

What can I say?

:wink: