shev123
Posts: 2
Joined: Wed Sep 28, 2022 6:12 am

mapZoom not working after highcharts version upgrade

I was using highcharts version 9.0.1 with React. We have zoom controls in our chart, which were implemented using 'mapZoom' method:
Example :
for ZoomIn --> chartRef.current.mapZoom(zoomInRatio)
for ZoomOut --> chartRef.current.mapZoom(zoomOutRatio)
for Reset --> chartRef.current.mapZoom()

This was working perfectly with version 9, but is broken after upgrading to version 10.
I tried to use it with new 'zoomBy' method as --> 'chartRef.current.mapView.zoomBy()' but it doesn't seem to work. (error - mapView not available)

I am not able to find much documentation regarding zooming with new highchart version. Please assist.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: mapZoom not working after highcharts version upgrade

HI shev123!
Welcome to our forum and thanks for contacting us with your question!

I was trying to reproduce your problem, but in my case, everything is working correctly. You can check the demo below to see an example. I assume, that you didn't get into chart object from reference and that's why zoomBy produced an error. mapZoom method is deprecated instead of this you should use zoomBy. Below you can find also some API docs about methods.

Demo: https://codesandbox.io/s/highcharts-rea ... ked-pjvo1p
API Reference: https://api.highcharts.com/class-refere ... iew#zoomBy
https://api.highcharts.com/class-refere ... #addSeries

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer
ak!!!!!
Posts: 5
Joined: Fri Feb 10, 2023 12:28 pm

Re: mapZoom not working after highcharts version upgrade

even i am facing this exact same problem when i am trying to upgrade highcharts to version 10.2.0 from version 9.0.0
mapZoom not working at all.

one more question is this `mapView` property available on normal highchart chart instance or only highMaps charts instance ?

@hubert.k in the above example you have used highMaps. can't we use zoomIn/zoomOut functionality with normal highcharts like line chart and all ? if so then can you redirect me to some example
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: mapZoom not working after highcharts version upgrade

Welcome to our forum and thanks for contacting us with your question!

As in the previous answer, mapZoom method is deprecated so you should use zoomBy instead. If you can't get it working in version 10.2.0, please provide me a live demo so I will be able to help you.

Regarding the second question, mapView property is not available in Highcharts but there are some other ways to handle zooming.

I prepared a live demo where I show you 2 different ways of zooming a line chart:
#1 chart.zooming.type
Using this property you can zoom the chart by dragging the mouse, it can be set to zooming only one axis or both.
#2 xAxis.setExtremes
I created a button that enables you to zoom X2 using setExtremes. You can also zoom on yAxis with this method.

Demo: https://jsfiddle.net/BlackLabel/oerb2afj/
API: https://api.highcharts.com/highcharts/c ... oming.type
https://api.highcharts.com/class-refere ... etExtremes

I hope you will find it useful

Kind regards
Jakub
ak!!!!!
Posts: 5
Joined: Fri Feb 10, 2023 12:28 pm

Re: mapZoom not working after highcharts version upgrade

Thank you jakub for replying quickly

let me go in details history and explain you

we were adding highchart to highmaps in order to get mouse-wheel zoom functionality in normal highcharts (v 9.0.0)

code snippets which shows how we were adding highchart to highmaps
async function addHighChartsToHighMaps() {
const HighCharts = await import('highcharts');
const addHighMaps = (await import('highcharts/modules/map')).default;
addHighMaps(HighCharts);
}
we invoke this function at very first during module bootstrap

we need all 3 types of zoom functionality
1. drag with mouse zoom ( set chart.zooming.type working in 9.0.0 and 10.2.0)
2. buttons to zoom in/zoom out ( multiple ways one of which you showed by setting chart extremes currently we have directly used mapZoom as highmaps was available but as you guys suggested it is deprecated we need to use zoomBy but zoomBy not available in highcharts 10.2.0)
3. mouse wheel zoom ( since highmaps was added it was working out of the box in 9.0.0 but it is not working in 10.2.0)

so after upgrading highcharts to v10.2.0, 2nd and 3rd type of zoom not working.


we are not directly using highmaps modules because our charts are simple line charts but we need that mousewheel zoom so we have done that `addHighChartsToHighMaps`
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: mapZoom not working after highcharts version upgrade

Hello again,

When you are using Highcharts, there is no need to use zoomBy.
I prepared a demo so that 2nd and 3rd type of zoom you mentioned are working using setExtremes in Highcharts v10.2.0 so you can implement it in your project.

Demo: https://jsfiddle.net/BlackLabel/gskeufca/
I hope you will find it useful.

Let me know if you have any further questions!
Jakub
ak!!!!!
Posts: 5
Joined: Fri Feb 10, 2023 12:28 pm

Re: mapZoom not working after highcharts version upgrade

Thanks Jakub, above solution worked for me :)
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: mapZoom not working after highcharts version upgrade

That's great to hear!
In case of any further questions, feel free to contact us again.

Kind regards
Jakub

Return to “Highcharts Usage”