TypicalCoder
Posts: 2
Joined: Thu Mar 23, 2023 6:28 pm

Possible to add a shadow to a solid gauge chart?

Is it possible to add a shadow to a solid gauge chart? I'm trying to get as close to this possible to this:

Image

Here's what I currently have:

https://jsfiddle.net/TypicalCoder/x8cybrjp/7/

Thanks in advance!
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Possible to add a shadow to a solid gauge chart?

Hello,

Welcome to our forum and thanks for contacting us with your question!

Although there's no built-in functionality to add shadow to solid gauge, it can be easily achieved by using SVG filters. You can play around with dropShadow values until it suits your needs best.

Demo: https://jsfiddle.net/BlackLabel/b48jrm3x/

You might also find interest in this StackOverflow answer: https://stackoverflow.com/a/47760126.

References:
https://css-tricks.com/adding-shadows-t ... g-filters/
https://developer.mozilla.org/en-US/doc ... ent/filter
https://developer.mozilla.org/en-US/doc ... DropShadow

Let me know if that was what you were looking for.
Best regards!
Jędrzej Ruta
Highcharts Developer
TypicalCoder
Posts: 2
Joined: Thu Mar 23, 2023 6:28 pm

Re: Possible to add a shadow to a solid gauge chart?

This looks like this will do the trick. Thanks a lot!
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Possible to add a shadow to a solid gauge chart?

Glad I could help!

In case of any other questions related to Highcharts, feel free to ask.
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Usage”