Chart Colours in next gen

Ask the Community Get Answers
1

I have just started playing around with the next gen builder, and cant seem to work out how to change the colours of the charts. They all seem to be in shades of purple, whereas in classic they where quite distinct colours making it easy to see the different segments. The AI chat bot seems to suggest its not possible in the builder, which doesn’t seem correct, given the new improvements with colopur choices for dark mark and light mode etc.

Is it really not possible in next gen to change the colours of the charts? Has anyone managed to do it in CSS / Javascript?

image
image742×543 26.4 KB

2

There is no built-in way to specify colors to individual sectors at the moment, but I think you can try using CSS, something like

:root {
--color-uk: #3b82f6 !important;      /* Blue */
--color-fr: #ef4444 !important;      /* Red */
--color-de: #22c55e !important;      /* Green */
--color-others: #a855f7 !important;  /* Purple */
--color-at: #f59e0b !important;      /* Amber */
--color-es: #ec4899 !important;      /* Pink */
--color-it: #06b6d4 !important;      /* Cyan */
--color-pl: #84cc16 !important;      /* Lime */
--color-ie: #f97316 !important;      /* Orange */
}
3

Hi,

Thanks for this. Its a shame its not in the next gen builder, however if we have to do it with CSS than so be it.

For the life of me i have been unable to get this working in next gen. One thing i did notice is that it seems to be adding in the additional ‘Others’ Category, with no way to switch it off. Its confusing as we have a category labelled ‘Other’ already. I plan on having another look at this later on as currently our app works well in classic. Maybe by then it will be part of the next gen builder. :crossed_fingers:

4

Hi @Chris8 ,

We currently show “Others” if there are more than 9 categories. We are changing this to be configurable though, after receiving some feedback like yours.

To change your chart colors, try this CSS as a starting point, it is working for my chart here.

[data-chart] {

  --color-building: #00DF22 !important;

  --color-electrical: #3B82F6 !important;

  --color-mechanical: #FF3399 !important;

  --color-plumbing: #FFcc66 !important;

}

Cheers,

Kara