ponmudi
Posts: 7
Joined: Wed Sep 14, 2022 9:07 am

highcharts.css removes all the gradient applied to the column

Adding highcharts.css removes all the gradient applied to the column.
Looks like fill from css file is overriding the in-element style.

css is added at application level as we have many other charts too. Any work around for this?

with styles: https://jsfiddle.net/1vwaLdru/
without styles: https://jsfiddle.net/BlackLabel/xbvp8he7/
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: highcharts.css removes all the gradient applied to the column

Hello,

As a general suggestion, if you are not planning on using the styledMode in Highcharts, then there is no point in using a Highcharts CSS in your project.

But if you would still insist on using it, as I workaround I'd suggest using the CSS as a normal file (instead of importing it via URL), and then deleting the highcharts-color-0 class from it.
DEMO (line 236 in CSS): https://jsfiddle.net/BlackLabel/9v1otra8/

Do not hesitate to contact us with any further questions,
Best regards!
Kamil Musiałowski
Highcharts Developer
wvhn
Posts: 11
Joined: Tue Nov 15, 2022 12:02 pm

Re: highcharts.css removes all the gradient applied to the column

Hi Kamil,

I have the same problem. My product is an open source smart home visualization framework where multiple types of charts are used - configurable by the user with a unified styling provided by the great feature of "styledMode". So highcharts.css is imported by default. Some users want to create more sophisticated graphs with more options than styled mode provides. My expectation was that setting "styledMode" to false would do the job but the CSS definitions in highcharts.css override many settings configured in the chart / series options.

So it would be a great improvement if highcharts.css could be "switched off" on demand. Your solution - deleting the unwanted properties - works of course but is a bit dirty (sorry for that ;-) ). Maybe in some graphs we need these properties while in other graphs they are disturbing.

So my proposal to the problem in this thread is to add a class "unstyled" to the container in html and write ".styled" in front of the highcharts-color-0 class. See this fiddle: https://jsfiddle.net/wvhn_/kq2Lzf9o/7/ and toggle the class to "styled" in html in order to change styling.
At the same time I am asking you to consider this as a "feature request" for the mixed use of "styledMode" an "nonStyledMode" in different Highcharts charts on the same page.

Thanks and best regards
Wolfram
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: highcharts.css removes all the gradient applied to the column

Hello there Wolfram,

Thank you for your inside on this one - your solution is really good!

If you would like to create an official feature request, please do not hesitate to create a new GitHub thread here https://github.com/highcharts/highchart ... new/choose and mark it as a feature request. With enough user votes we will consider adding it to the core.

Thank you,
Regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”