Dashboard chart colours (again)

The colours used on charts are derived from these 9 config values
image
When a line chart has more than 9 different series, or a bar chart uses Series: none, they loop back to repeat the same 9 values eg
image

Can the node config be changed so rather than 9 fixed colours we can add more, in the style of button-group and radio-group options?

I think the code which sets the colours is this

backgroundColor: colorByIndex ? this.props.colors : this.props.colors[sLabels.length % this.props.colors.length],

So I guess this FR allows us to customise the array this.props.colors.

That is what the 3x3 color grid modifies, it's just limited to the 9 cells (copied from Dashboard 1.0.

Absolutely valid request to add in more colours.

Yes, what I am trying to suggest is to remove the hard-coded matrix of 9 and replace it with a variable length set of options similar to the options inputs for button groups.
The options would have to be pre-populated with the 9 values of course.

But Dashboard 1 had many more than 9 colours.
There was [presumably] a fudge to get around the 9 colours limit by defining 24 more in the code:

Since dashboard 2 charts do not copy this feature, they can display much less colourful charts than the old dashboard
A DB 1 chart (DB1 does not repeat the colour sequence):

1 Like

Yep, sensible - please do detail it here in a Feature Request: Sign in to GitHub · GitHub

I am wondering if it perhaps would be useful to put such stuff in an EditableList, where you add a row for each series?

Asking because @Paul-Reed had another question related to ui-chart.

Moreover I can imagine that someone wants to draw series A as a thin solid blue line, and series B as a thick dotted red line. These properties are on series level, so an editableList could allow you to specify such config per series. Only a few basic settings, because space is limited.

1 Like

It does look like a sensible approach to styling line charts too.
There are already config fields "Point style" and "Radius" at widget level for line and scatter charts though.

This is something I had plans for, even beyond the styling, of defining the full x/y properties for each series, as well as its styling, etc.

It'd be a big shift from Dashboard 1.0, and generally a big peiece of dev work that I've not been able to justify spending the time on at the moment

This was the issue I had created for it: UI Chart - Change config UI for multiple "Series" definitions · Issue #1072 · FlowFuse/node-red-dashboard · GitHub

From the issues you have shared above, I assume that it is not an option for you to use a standard editableList? Because then the columns are fixed, so you could never configure mixed charts. So you want something like we implemented for the svg node, where there is a collapsible row per animation?

image

That indeed is quite a lot of work, compared to a standard editableList.

Personally I like Paul's idea:

  • Only make some basic properties adjustable via the config screen (e.g. in an editableList).
  • Afterwards you can make (those and) other properties adjustable via msg.ui_update.xxx.

Hey @jbudd,
Could you please explain that a bit more. I have not much the chart node yet. Are those settings available on the config screen?

1 Like

Whilst thia could be okay for a first iteration, I'm really trying to lower the low-code level of Dashboard, and so don't want to rely on the ui_update of we can avoid it.

I can put some UI designs together for how I think it could structure, but yes, I think it would breach the capabilities of the editableList

This is the config for a line chart

And it's effect
image

2 Likes

You can see the options listed here: Chart ui-chart | Node-RED Dashboard 2.0

I also published this today if you're interested: https://youtu.be/Ecno0EuLyKQ?si=d8sjtapUJmJyRQrX

1 Like

What is very wrong about having countless amount of colors is that humans can't really read anything out of the chart. I really can't understand the request. If more than five colors needed for chart it is wrong tool in use.

Some time ago we also had some issues (for the dropdown options on the ui-form node) that the editableList widget wasn't sufficient. I do completely agree with that. But to develop a new widget to support such features is unfortunately not achievable within my free time. Then my custom ui nodes would never see the D2 daylight ...

Yeah, this is very much something I see us taking up at some point, just have other priorities on atm

1 Like

Is this something that the new FT developer will work on?

Quite possibly yes. @gayanSandamal is our new FT dashboard dev and has been with us for 3 months.