make area gradient visible when hovering on series line (areaspline chart)

[diego711]

Hi everyone!

I'm trying to make the area gradient appear when I hover on the areaspline line only. And not in the area itself. I'm using styledMode, and don't know which class is asigned to the line.

Right now I'm using:

Code: Select all

.highcharts-area {
  fill-opacity: 0 !important;
}

.highcharts-series-1:hover .highcharts-area {
  fill-opacity: 1 !important;
  fill: url(#gradient-1) !important;
}

This sets the opacity of the area gradient to 0 by default. And to 1 when I hover over the area, but don't know how to do this when I hover on the line instead of the area.

hovering_on_area.png (142.81 KiB) Viewed 441 times

hovering_on_line.png (44.32 KiB) Viewed 441 times

Would appreciate any suggestion. Thanks!

[dawid.d]

Hi,

Thanks for contacting us with your question!

I think a better solution would be to use the functionality provided by the API, e.g. mouseOver and mouseOut events for series.
See: https://api.highcharts.com/highcharts/s ... .mouseOver

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

I hope you will find it useful
Best regards

[diego711]

Excellent! Thanks again @dawid.d ! The other solution you told me for the other issue solved this as well.

Thanks a lot and have a nice weekend!

[dawid.d]

That's great to hear!

Feel free to ask any further questions!
Best regards!