# Dashboard chart colours (again)
**URL:** https://discourse.nodered.org/t/dashboard-chart-colours-again/92375
**Category:** Dashboard
**Tags:** feature-request, dashboard-2
**Created:** [14 October 2024 13:30 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375 "2024-10-14T13:30:35Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [14 October 2024 13:30 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/1 "2024-10-14T13:30:35Z")
The colours used on charts are derived from these 9 config values
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
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
```auto
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`.
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [14 October 2024 13:42 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/2 "2024-10-14T13:42:45Z")
> [@jbudd](#):
>
> So I guess this FR allows us to customise the array
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.
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [14 October 2024 14:02 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/3 "2024-10-14T14:02:06Z")
> [@joepavitt](#):
>
> That is what the 3x3 color grid modifies
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.
> [@joepavitt](#):
>
> copied from Dashboard 1.0
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):
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [14 October 2024 14:52 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/4 "2024-10-14T14:52:38Z")
Yep, sensible - please do detail it here in a Feature Request: [Sign in to GitHub · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/new/choose)
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [14 October 2024 18:20 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/5 "2024-10-14T18:20:18Z")
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](https://github.com/FlowFuse/node-red-dashboard/issues/1372) 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.
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [14 October 2024 18:49 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/6 "2024-10-14T18:49:17Z")
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.
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [14 October 2024 18:52 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/7 "2024-10-14T18:52:43Z")
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](https://github.com/FlowFuse/node-red-dashboard/issues/1072)
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [14 October 2024 19:56 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/8 "2024-10-14T19:56:56Z")
> [@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?
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`.
> [@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?
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [14 October 2024 20:28 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/9 "2024-10-14T20:28:59Z")
> [@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`
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [14 October 2024 20:29 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/10 "2024-10-14T20:29:33Z")
> [@BartButenaers](#):
>
> Are those settings available on the config screen?
This is the config for a line chart
And it's effect
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [14 October 2024 20:30 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/11 "2024-10-14T20:30:44Z")
> [@BartButenaers](#):
>
> I have not much the chart node yet
You can see the options listed here: [Chart ui-chart | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-chart.html#properties)
I also published this today if you're interested: [https://youtu.be/Ecno0EuLyKQ?si=d8sjtapUJmJyRQrX](https://youtu.be/Ecno0EuLyKQ?si=d8sjtapUJmJyRQrX)
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [14 October 2024 20:42 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/12 "2024-10-14T20:42:45Z")
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.
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [14 October 2024 21:39 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/13 "2024-10-14T21:39:39Z")
> [@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 ...
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [15 October 2024 09:44 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/14 "2024-10-15T09:44:56Z")
> [@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
---
### Author:  [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [15 October 2024 16:12 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/15 "2024-10-15T16:12:19Z")
Is this something that the new [FT developer](https://discourse.nodered.org/t/dashboard-chart-performance-gain-with-data-decimation-plugin/89847/5) will work on?
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [15 October 2024 16:13 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/16 "2024-10-15T16:13:42Z")
Quite possibly yes. @gayanSandamal is our new FT dashboard dev and has been with us for 3 months.
---
### Author:  [@samos](https://discourse.nodered.org/u/samos)
#### Post date: [23 October 2024 02:02 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/17 "2024-10-23T02:02:24Z")
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.
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [23 October 2024 05:03 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/18 "2024-10-23T05:03:59Z")
@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](https://github.com/FlowFuse/node-red-dashboard/issues) on Github, so all help is welcome...
You can find the discussion about that [here](https://github.com/FlowFuse/node-red-dashboard/issues/1372#issuecomment-2430346837).
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [23 October 2024 08:33 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/19 "2024-10-23T08:33:45Z")
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.
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [23 October 2024 11:38 UTC](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375/20 "2024-10-23T11:38:48Z")
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.
[Next page](https://discourse.nodered.org/t/dashboard-chart-colours-again/92375.md?page=2)