Chart Colours in next gen

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?

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 */
}

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:

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

Hello,

Hopping on this thread about colors, as I have been struggling for days. In the old builder, I could use JavaScript Highcharts to change the default color scheme for the entire app, so any new charts would use those preset colors. After copying over the code and trying multiple CSS functions, I haven’t been able to modify the colors in the Next Gen Builder at all. I’ve even tried modifying a specific singular chart, but that’s not ideal since we have hundreds of charts, and I’m not about to do custom code for each one.

It seems that having a custom default color scheme for charts and graphs across the entire app would have been an ideal feature for the next-gen builder. I know I can choose one color, and it will create gradients of that color, but that’s not going to work for us. I would like to see some example code, not of modifying a specific chart with specific variables, but rather setting the default for the entire app.

Thank you!

Hi,

I ended up giving up on next gen as it was proving too problematic at the time, so sadly i cant give you any advice just yet. I plan to look at either next gen (or alternatives) next month as I need to create a new app (we currently have 1 app per year for our use case).

Ill keep an eye on this thread as it will be useful.

I fear that’s what we are going to have to do as well. I’m fine sticking with the classic, but some of the features of next-gen would be nice to have. But they aren’t worth it if we have to struggle to do basic things everywhere else. I also worry that eventually they might force everyone to switch, which is the main reason we are exploring it as an option. Our app is major, so changing it over would take months.

Thanks!

I’ve just started experimenting with the Next Gen Builder and can’t seem to figure out how to change the chart colours. At the moment, all the charts appear in different shades of purple, whereas in Classic they used much more distinct colours, making it easier to differentiate between segments.

The AI chatbot seems to suggest that changing chart colours isn’t possible in the Builder, which doesn’t seem right given the newer customization options for dark mode, light mode, and theme colours.

Is it really not possible to customize chart colours in Next Gen? Has anyone managed to do this using CSS or JavaScript?

hi,

i thinnk there is an issue with this as it targets the chart and not the legend of the chart? for example i have this working:

but as you can see the legend shows the original colour:

any advice?