KarlBaumann
Posts: 39
Joined: Fri Jul 06, 2018 4:47 pm

Highlight current cursor position on the axis

Hi!

What would be the easiest way to get that 185 on Y axis?

Image

Thank you in advance!
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Highlight current cursor position on the axis

Hello there,

Thanks for contacting us again!

I would recommend simply rendering a custom SVG element as this solution gives you the greatest opportunities to customize.

I have prepared a demo for better visualization. Note that on the chart's load the element is being rendered and then on every chart rerender it is being moved by its width to place it as in your screen and make it responsive, take a look: https://jsfiddle.net/BlackLabel/ny2awmj3/

Let me know if the solution meets your needs,
Kind Regards!
Kamil Kubik
Highcharts Developer
KarlBaumann
Posts: 39
Joined: Fri Jul 06, 2018 4:47 pm

Re: Highlight current cursor position on the axis

thanks @kamil.k!

Now I know how to create a static svg element. Do you have any tips how to make it move together with mouse pointer and display current Y axis value?
I guess I need to obtain current mouse pointer coordinates and then redraw the svg on every mouse move.
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Highlight current cursor position on the axis

As you mentioned, redrawing the SVG element on every mouse move is the right way to achieve that. Apart from that, you need to know the exact y value based on the mouse coordinates. I have updated the example with a simple solution based on the ticks' coordinates, which in my opinion is the easiest way to achieve that, take a look: https://jsfiddle.net/BlackLabel/u9p75b6k/

Let me know if the solution works for you,
Regards!
Kamil Kubik
Highcharts Developer

Return to “Highcharts Usage”