Change series color depending on if hovering above or below a polotline?

[aadu]

I want to create a column chart where I can highlight the parts of the columns above a horizontal plotline. To achieve this, I actually split the series up into 2, and stack them on top of each other. This works pretty well, and when you hover over a single column, I can change the color of the part that is above the plotline. Like so:



The problem is that I also want all the columns above the plotline to change color when the cursor is hovering anywhere on the chart above the plotline. The idea is that if the user's cursor is hovering above the plotline, the series above the plotline turn a faded red, and then if you hover directly on one column, that one becomes dark red. Here's a Figma showing the idea:

BEFORE:


AFTER:


Can anyone advise the best way to do this? I was trying to get a mouse hover event where I could calculate if the cursor was above or below a y coordinate (i.e. the plotline) but I couldn't find anything.

[jakub.j]

We appreciate you reaching out to us!

To set color of all the series over the plotLine, you need to put the data in two separate series, stacked on each other, and than using series.point.events.mouseOver and series.point.events.mouseOut I change the series color using series.update, see demo:

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

Let me know if you have any further questions!
Best regards
Jakub

[aadu]

We appreciate you reaching out to us!

To set color of all the series over the plotLine, you need to put the data in two separate series, stacked on each other, and than using series.point.events.mouseOver and series.point.events.mouseOut I change the series color using series.update, see demo:

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

Let me know if you have any further questions!
Best regards
Jakub

Hi Jakub,

Thank you, that is helpful. However, my question was if it was possible to trigger this exact event simply when the user's cursor is hovering anywhere above the chart's plotline, even if it is not hovering over a series?

For example, here is a demo where someone has created some sort of event that can detect what coordinates the user's cursor is at, and places a plotline there: http://jsfiddle.net/683Nd/ However, I think they are doing this outside of the Highcharts api? Furtheremore, I am using the Highcharts-React wrapper, and I'm not sure how such a thing can be achieved that way.

[jakub.j]

Hey!

Okey, now I get your point. I prepared a demo with a custom calculations based on mouse position on the screen. If the mouse is inside the plot and over the plotLine, the series changes it color to brown and than it goes back go black when it's needed.

There is no default API functionality like this, so it has to use JS events, it works quite well. If you will have troubles with integrating it with React, please send me a demo of your chart in React and than I will help you.

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

I hope you will find it useful
Best regards
Jakub

[aadu]

Hey!

Okey, now I get your point. I prepared a demo with a custom calculations based on mouse position on the screen. If the mouse is inside the plot and over the plotLine, the series changes it color to brown and than it goes back go black when it's needed.

There is no default API functionality like this, so it has to use JS events, it works quite well. If you will have troubles with integrating it with React, please send me a demo of your chart in React and than I will help you.

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

I hope you will find it useful
Best regards
Jakub

Hi, thank you again for your help Jakub. I am indeed struggling to get it to work in React. I would like to send you a demo, but I don't how to make a JSFiddle with Highcharts, React, and the official highcharts-react wrapper all in one, or even if that is possible?

[jakub.j]

Hey!

Yes, it's possible!
You can base your chart on this react demo.

Best regards
Jakub