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.

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.

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

[image] joepavitt: I've not been able to justify spending the time on at the moment 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. [image] jbudd: There are already config fields "Point style" and "Radius" at widget level for line and scatter charts though. 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?

[image] BartButenaers: 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. 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

[image] BartButenaers: Are those settings available on the config screen? This is the config for a line chart [image] And it's effect [image]

[image] BartButenaers: I have not much the chart node yet 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

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.

[image] joepavitt: 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 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 ...

[image] BartButenaers: But to develop a new widget to support such features is unfortunately not achievable within my free time. Yeah, this is very much something I see us taking up at some point, just have other priorities on atm

Node-RED

Node-RED Forum

Dashboard chart colours (again)

Dashboard

Paul-Reed 15 October 2024 16:12 15

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

Topic		Replies	Views
Dashboard 2.0 - UI Chart Dashboard	1	137	23 September 2025
How to change the UI_chart series line color in dashboard 2 by message payload? Dashboard ui-chart	11	367	5 August 2025
Config more than 9 colours in bar chart Dashboard	3	1145	20 December 2020
How to specify colours for bar chart Dashboard	4	1609	22 October 2021
Dashboard2 ui-chart timeseries colors Dashboard dashboard-2	20	441	14 May 2024

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Dashboard chart colours (again)

Related topics