NeBox
Posts: 41
Joined: Sun Feb 05, 2023 4:12 am

Mouse zoom on the chart

Hi.

I don't remember where I found this code anymore - https://jsfiddle.net/highcharts/5eyacxsm/

I liked the mouse zoom on the chart.
But, there was a question - how to turn off the zoom using the selection and leave only the mouse wheel?

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

Re: Mouse zoom on the chart

Hi!

Thanks for reaching out to us with your question!

To cancel the zoom by selecting range, you can override selection event behaviour by firing event.preventDefault method. This way, only zooming by mouse wheel will be possible.

Live demo: https://jsfiddle.net/BlackLabel/74sp0cnr/

API: https://api.highcharts.com/highcharts/c ... .selection

Let me know if that was what you were looking for.
Best regards!
Jędrzej Ruta
Highcharts Developer
NeBox
Posts: 41
Joined: Sun Feb 05, 2023 4:12 am

Re: Mouse zoom on the chart

Thank you for your reply.

That helps. But I'm testing so that the chart can be dragged with the mouse (like here https://jsfiddle.net/BlackLabel/Lz1pumsr/ ) or swiped. There should be no highlighting at all.

In your solution, the selection remains because the zooming type is added.

Is there any way to turn off the selection altogether, so that the chart can be dragged with the mouse. Then there is only zooming with the mouse wheel.
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Mouse zoom on the chart

Thanks for claryfing your objectives! In this case, you can add a custom property to zooming object, for example customZoomType, which then can be acessed from mouse wheel zoom plugin as the zoom type property. This way, there won't be any zooming or selection enabled on the chart, besides the mouse wheel. Notice that you need to change the zoomX and zoomY inside the plugin so it can work this way.

Live demo: https://jsfiddle.net/BlackLabel/u1d6pvqj/

Let me know if that was what you were looking for!
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Stock”