ovryu
Posts: 18
Joined: Fri Jul 17, 2020 12:04 am

Adding blur effect to Highcharts

Hello,

I would like to add a blur effect covering some points on my highcharts chart. I've attempted to do so by using CSS and having a div position on top with the CSS class

Code: Select all

backdrop-filter
. This achieves the look I want but my issue is that depending on the data for the graph the placement of the blur is not spot on. Is there a way to dynamically set this blur effect?

For example, add a backdrop-filter blur on all months after September?

Here is an example with jsfiddle: https://jsfiddle.net/dwk768zp/

Cheers.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Adding blur effect to Highcharts

Hi,

Thanks for contacting us with your question!

There is no background filter in the demo you sent. Could you resend them with this filter?
It will be easier for me to help you.

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
ovryu
Posts: 18
Joined: Fri Jul 17, 2020 12:04 am

Re: Adding blur effect to Highcharts

Strange was having issues saving my changes. I just added the styling to this link:

https://jsfiddle.net/tqkmg1cx/

Here is the code incase there's any issues on your end

Code: Select all

<div class="blur"></div>
<figure class="highcharts-figure">
    <div id="container"></div>

Code: Select all

.blur {
    width: 240px;
    height: 205px;
    position: absolute;
    right: 3%;
    top: 26%;
    z-index: 100;
    backdrop-filter: blur(10px);
}
Cheers
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Adding blur effect to Highcharts

Hi,

This time the demo was fine.

You can use chart.events.render() callback function to dynamically modify styles of blurred div.
And all the values ​​you need to position this element can be extracted from the chart object that is passed to this function by this.

Demo: https://jsfiddle.net/BlackLabel/wea2trbv/
API: https://api.highcharts.com/highcharts/c ... nts.render

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”