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.

2 Likes

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.

Yes please, 100% this. I would like to be able to send in data for a series 'knowing' that they result in specific colours. Currently work arounds is to setup a 3x3, and then 'pace in' null values for each series, in sequence, so that subsequent ones follow the desired colour-for-the-series= not ideal. Programmatic would be best of course.

@samos,

Yes but there are a number of other feature requests available for the ui-chart node, which should all work together. One of the related issues is to allow users to set not only the color but also other settings (line color, ...) for each dataset in a chart. But it is quite complex to visualize all of this on a config screen. An editableList isn't suficient because it can only show a few columns, and the columns may vary per dataseries type (line, scatter, bar, ...). So a new fancy widget is required, but implementing such a widget is a lot of work. And there are many many other issues reported for the dashboard, so there isn't room at the moment to develop such a widget.

Personal opinion: that is what you get when almost nobody from our community want to help contributing to the dashboard. We have currently reached the threshold of 300 issues on Github, so all help is welcome...

You can find the discussion about that here.

If by "Editable list" you mean this (eg from a button group node)


then I agree it's not infinitely extensible sideways and you quickly get a vertical scrollbar as more options are added.

Perhaps an alternative approach is to permit color (and other visual effects) to be specified via the input data keys alongside X and Y.

If no key value selected, use the current standard colours.

Colour is a valid option for line, bar, pie etc charts.
Other chart types might benefit from extra /different options.

1 Like

I really want to prevent the need for modifications to any underlying data structures in order to configure your charts. I want to keep Dashboard as low-code as possible, and so will adding this as an option to the configuration editor supports that.