[Feature] Custom Default Colors Palette

[CME64]

What would you like to be added:
A way to customize the default colors palette per dashboard or panel

Why is this needed:
We're hosting grafana locally to show different dashboards for our clients. All of our clients have requested to have different coloring theme for the charts' series. Alias colors would have been fine if the series were a few/limited and they appear all the time. Sometimes the series are too many to count and may change anytime depending on the query selection. take for example showing the top 10 categories of articles which displays 10 different series aliases out of 1000 categories, it will be unreasonable to set the colors using aliases for 1000 changing aliases. The only way this could work dynamically while using your own custom palette is to provide a functionality to override the default colors per dashboard or panel as needed while using one instance of the system.

It's ready to be integrated 👍 :
I actually have implemented that for my company by defining colors in the JSON properties. But I went ahead and wanted to contribute to this great application that helped me a lot and amazed me at the same time. So I decided to build the full feature in a backward compatible manner and with full intuitive UI and I did,
you can refer to this PR for more details

Note: What adds more customization abilities can't hurt to add as a feature especially if it doesn't affect the workflow or performance.

[CME64]

18 likes so far and the pull request got closed without a stated reason. so much for welcoming contributions.

[bhozar]

Any chance this will ever be merged?

[phgogo]

Please Please please merge this! Building Dashboards compliant to a corporate design is a pain right now!

[pavlarez]

This would be an extremely useful feature. Please merge it in.

[techotron]

This would be a great feature. At the very least, perhaps some useful feedback as to why the PR was closed could be provided.

[topranks]

I'd also really like to see this.

[CME64]

@dprokop I messed things up after you changed the backlog just now. closed by mistake and reopened.

[dprokop]

No prob!

[justinnamilee]

This seems like an obvious feature to me, sad it's not included already in such a wonderful product!

+1 from me to have this included <3

[Dante4]

Please? It's already 3 years since this feature was first requested.

[Wittionary]

Correct me if I'm wrong, but this would also solve the problem of getting other admins to create dashboards that are accessible for all.
This feature would be key in creating an equitable experience for those who are color-blind.

[CME64]

This seems like an obvious feature to me, sad it's not included already in such a wonderful product!

+1 from me to have this included <3

I also would have loved it if it was integrated in future versions. But after the latest changes in UI I think this won't fit since it spreads colors horizontally and the space is too small in the new design with a side panel instead of a bottom wide panel. It may require a redesign and update .. lots of work has been done over the past years and I don't think I can redesign it to be rejected again.

Please? It's already 3 years since this feature was first requested.

and implemented!

Correct me if I'm wrong, but this would also solve the problem of getting other admins to create dashboards that are accessible for all.
This feature would be key in creating an equitable experience for those who are color-blind.

well an admin can configure a whole dashboard and specific panels to override the default color palette, if that is the case you are expecting then yes it can help you achieve that. but maybe you will need to duplicate the dashboard then apply the palette override on it one time.

[chylex]

Hard to believe that such an obvious feature is still missing..

[jdx-john]

Just seems a bit rude someone takes the time to make a contribution and nobody can even review the PR especially for such a popular request, for several years.
Green and yellow as default series colors get really dull especially when green and yellow are good choices for status (OK, warn, etc) and you lose contrast.

[CME64]

Just seems a bit rude someone takes the time to make a contribution and nobody can even review the PR especially for such a popular request, for several years. Green and yellow as default series colors get really dull especially when green and yellow are good choices for status (OK, warn, etc) and you lose contrast.

7 reactions on a new comment in less than one day!
You guys are encouraging me to redesign and integrate the control for the new UI but I can't do that if it is not going to get merged again.

[Wittionary]

@dprokop Would you be able to speak to why the PR wasn't merged or is there another person at Grafana Labs that can help us understand?

[p0wertiger]

Just had a simple case of a memory total/free graph, thought about using "Blue-Yellow-Red (by value)" but what I actually need is a REVERSE of this palette, with red being minimum of free. And I can't do this, neither can I define my own palette. Bizarre, given that the palettes are chosen per graph and I see no reason to not allow customization here.

[HorselessName]

I was thinking the same. I wish to create a "Power BI" pallete of colors just to match our other dashboards here made in Power BI, so it will look similarly on the monitors - Its kind of weird seeing dashboards on grafana that has totally different colors from the monitor on the side using other color palletes.

[Wittionary]

@torkelo Could you weigh in here?

[CME64]

I was thinking the same. I wish to create a "Power BI" pallete of colors just to match our other dashboards here made in Power BI, so it will look similarly on the monitors - Its kind of weird seeing dashboards on grafana that has totally different colors from the monitor on the side using other color palletes.

Actually you can do that with the current implementation, you just need to follow a different approach than the proposed one here and also know that you will be changing the colors palette for the whole system.

Go to the project's folder and find a config file if memory serves me right, open it and find "colors" variable which contains an array of color codes. You can change these colors or add new colors to the beginning so they get picked first. You may need to restart the instance to reload the new configurations.

[CME64]

Clodsd by mistake, I was trying to disable it. Github button was not user friendly

[torkelo]

It's an OSS project, anyone is welcomed to add more color schemes, or make it more customizable :) https://github.com/grafana/grafana/blob/main/packages/grafana-data/src/field/fieldColor.ts#L55

[HorselessName]

It's an OSS project, anyone is welcomed to add more color schemes, or make it more customizable :) https://github.com/grafana/grafana/blob/main/packages/grafana-data/src/field/fieldColor.ts#L55

Oh nice. Thanks for pointing it out.

[Wittionary]

It's an OSS project, anyone is welcomed to add more color schemes, or make it more customizable :) https://github.com/grafana/grafana/blob/main/packages/grafana-data/src/field/fieldColor.ts#L55

Glad to hear it, @torkelo . I believe that @CME64 has added the code in the PR here but it seems to have been closed without feedback - if I'm following the ~4 year old saga correctly 😅

[torkelo]

It was closed for technical reasons as it was making changes the old panel architecture (and old legacy graph)

[CME64]

@torkelo
It wasn't legacy at the time and I had contacted you directly before implementing it to make sure I'm not violating your roadmap strategy. You confirmed that you were migrating from angular to react so I developed it in react with compatibility of your latest components and features like named colors as well. A new control (colors line) was added to the UI to define the settings and was used by the dashboard settings as well as the production version graph panel.

The graph panel implementation was an example since it was the only panel bundled in the solution that uses series and the color palette. The implementation of this feature was not specific to the graph but it was a use case and it could have been implemented by any panel that uses automatic palette coloring easily the same way. I have implemented it for pie chart as well in no time by just including the control in its settings tab and utilizing the color override interface provided by the feature I exposed to all panels.

Had you told me it was not compatible at the time I would have made some adjustments as I have re-created this PR upon your request to follow the policies but it was also closed and for no valid reason other than and I quote from your closing comment "we are not sure this is the right thing to add right now" and "closing this until we see more interest in this feature".

[torkelo]

@CME64 yes, you are right. The new shared field config architecture and new graph panel were not in place at the time.

Feel bad now. It's hard to say no to features, especially PRs where there has been a lot of work to add something new. But all new features come with lots new complexity, support & maintenance cost.

I think we are in a better place now with a mored shared framework for assigning colors by index (patlettes) and and by value for different color scales. So are better posed to support such a feature without adding more complexity. There is still the question of where to store the new palettes and where to configure them. Doing it per dashboard does not feel like the right place.

[siegenthalerroger]

10/10 agree with the thoughts that having colours per-dashboard wouldn't be the best. It should definitely be accessible instance-wide so a colour scheme would be global in a way. From a UX/feature standpoint, it'd be important to consider this feature in conjunction with #221 as having "default" alias' would probably be configured in a similar manner.

[CME64]

@torkelo I'm glad you're open to discussing the implementation now. I have put in mind maintainability at the time of implementation and I made sure not many changes were done except for the completely new control that adds the colors to the new colors configuration of dashboard and/or panels. The colors palettes that were saved in both settings should not be enormous in size if they cover enough series. The worry about how many colors we should have in a palette is not the same as for when you created a generic fixed palette for an unknown number of possible series.

At this stage if we are serious about adding this feature, I believe the best approach is for me to fork it again instead of the merge hell I'd go through and assess the current architecture and components and find a way to add this feature with similar functionality (front end management for color series) with minimum maintainability effort and backward compatibility. I could take a look at the possibility of configuring it on the organization level as well. What worries me the most about implementing this feature into the current implementation is the vertical side view for settings where there is no room for the old control and I'll need to think of a new control to manage the colors. But your new colors palette manager/override seems like a good place to check for this possibility as well, it even displays the colors palette in a line somewhat like my old control :)

[iilei]

I would appreciate it so much if this feature will be added!
If I may contribute with a suggestion?
Is it considered to have a pluggable color palette mechanism, so one can simply configure color schemes by adding a plugin?
It could lend some inspiration from color palettes as implemented in Python Seaborn, as it's purpose is also plotting nice visuals based on data.

Edit; i would be willing to contribute code, too, if considered helpful

[bob454522]

Would love to see this as we have needed the ability to modify color pallets (esp. re: color schemes) several times now.
To summarize where this stands currently (Dec 8 2022):

1 - Grafana devs offered the only solution (currently), which is to fork/modify the code, add in your custom color pallets into the code, and re-comple your own custom grafana- version:
#17092 (comment)

2- @CME64 - Generously submitted a PR (#17145) , however Grafana Dev Team rejected this PR as they feel it needs work (specifically, the PR was designed for the older grafana Panel system (ie "Legacy Graph" < v7.x ), and in the mean time grafana has moved to a newer Panel system. (additionally @torkelo from the Grafana Dev Team feels this new feature / PR should NOT be applied on a per dashboard basis, but rather Globally / across all dashboards (ie across the entire grafana instance).

apologies if im incorrect, or mis-interpreting the current state, Im NOT making any judgments nor opinion here, just trying to help / sum-up the current status.
(as i would love to see this funcationaly added, and im not able to code / help at this level yet).
tks
(LOVE GRAFANA)

[k-o-t-i]

Actually you can do that with the current implementation, you just need to follow a different approach than the proposed one here and also know that you will be changing the colors palette for the whole system.

Go to the project's folder and find a config file if memory serves me right, open it and find "colors" variable which contains an array of color codes. You can change these colors or add new colors to the beginning so they get picked first. You may need to restart the instance to reload the new configurations.

Can anyone point to the config file that needs to be changed to alter the default color codes? I've been unable to find it (Linux installation of Grafana version 9.3.1).

[contentfree]

@torkelo What is the process for changing the default colors in the latest Grafana? (Having UI for this feature would be ideal but even just a documented way of changing it in a config would help.)

[TiggsPanther]

I really hope that something along these lines gets added soon.
I just want to be able to build out some custom palettes that I can then apply to related groups of data.

I know that's there's no such thing as "just a simple" change, ever. This is, however, a highly requested function that has many different use-cases. Including those who want to be able to apply corporate/departmental branding to their dashboards.

[elofu17]

I expected to be able to configure a custom palette for the series legends, and other Themes stuff as well in /etc/grafana/grafana.ini (Home > Administration > General > Settings).
Just like there's already a section to configure how to present date and time formats ([date_formats]) I'd expect a section for default colours and style.

Currently I can only switch the background between dark/light. That's it. :-/
I want to be able to customize the UI to use a theme that represent our company.

First, this mean customizing the "Classic Palette" to get our corporate colors in the graphs.
(I want to replace the default list with our corporate colors, with nice complementary colors every other value.)
(note: Our colors are also color-blind friendly, so that's a bonus. See https://venngage.com/tools/accessible-color-palette-generator)

Secondly, this also include being able to customize the "sky blue" color in all table titles, etc.
Because this shade of blue don't play well with our colors.

Meanwile... Like k-o-t-i asked above:
Is there some global file that we can edit to hardcode a custom palette and UI "sky blue"?
(I'm OK to edit .js files if that do the trick. I can let Puppet, Ansible or some shellscript do it.)