Shruthi
Posts: 9
Joined: Wed Jul 22, 2020 10:25 am

In highmaps the mouse wheel scroll feature is not working.

We are using Highcharts version 9.2.2.In Highmaps,i wanted to use mouse wheel scroll feature to zoom in and out .But that is not happening.Wanted to know on how to use this feature with the same version on HighMaps.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: In highmaps the mouse wheel scroll feature is not working.

Hello Shruthi!
We highly recommend upgrading Highcharts to the newest version, which is 10.2.0 (https://www.highcharts.com/blog/changel ... ps-v10.2.0) as it should most likely fix the issue. If that is not possible, please reproduce the issue in an online editor that I could work on. You can start here: https://jsfiddle.net/BlackLabel/2tmpzkc6/

Regards!
Hubert Kozik
Highcharts Developer
Shruthi
Posts: 9
Joined: Wed Jul 22, 2020 10:25 am

Re: In highmaps the mouse wheel scroll feature is not working.

I cannot update the Highcharts version at this point of time. I need to use 9.2.2 version of Highcharts only.
https://jsfiddle.net/gh/get/library/pur ... ght-routes sample can be used with version 9.2.2 version to replicate the mouse scroll issue. Do let me know if any workaround can be done to use this feature without upgrading the version.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: In highmaps the mouse wheel scroll feature is not working.

Shruthi,
I have prepared the official demo using Highcharts Maps 9.2.2. If I set mapNavigation.enableMouseWheelZoom to true the mouse wheel scroll feature if working if you use it with clicked key Shift.

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

Kind regards!
Hubert Kozik
Highcharts Developer
Shruthi
Posts: 9
Joined: Wed Jul 22, 2020 10:25 am

Re: In highmaps the mouse wheel scroll feature is not working.

I tried mouse wheel scroll on the https://jsfiddle.net/BlackLabel/gm3Lto2z/ , I am still unable to scroll using mouse. Do i have to do anything else.
The zoom out feature is not happening using mouse scroll , after i use mouse wheel + shift key to zoom in.
Both zoom -in and zoom-out should happen. Let me know how this can be achieved.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: In highmaps the mouse wheel scroll feature is not working.

Shruthi,
I apologize, I have found recently that it was a bug in version 9.2.2, you can find the GitHub ticket here: https://github.com/highcharts/highcharts/issues/15656

I have prepared a small plugin for you to fix that issue, using version 9.2.2. You can find the demo with the plugin here: https://jsfiddle.net/BlackLabel/cypnhxfq/

Feel free to ask any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer
Shruthi
Posts: 9
Joined: Wed Jul 22, 2020 10:25 am

Re: In highmaps the mouse wheel scroll feature is not working.

https://jsfiddle.net/BlackLabel/cypnhxfq/ seems to match my requirement for both zoom in and zoom out without pressing Shift key.
1)Let me know what all code I need to include in my project to use this.
2)We use angular project, so is there any change in the code.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: In highmaps the mouse wheel scroll feature is not working.

Shruthi,
The plugin you need to use in your project is code inside IIFE function.

Code: Select all

(function(H) {
  const defined = H.defined;
  let totalWheelDelta = 0,
    totalWheelDeltaTimer;

  H.Pointer.prototype.onContainerMouseWheel = function(e) {
    const chart = this.chart;

    e = this.normalize(e);

    const delta = (defined(e.wheelDelta) && -(e.wheelDelta) / 120) || e.deltaY || e.detail;

    if (Math.abs(delta) >= 1) {
      totalWheelDelta += Math.abs(delta);
      if (totalWheelDeltaTimer) {
        clearTimeout(totalWheelDeltaTimer);
      }
      totalWheelDeltaTimer = setTimeout(() => {
        totalWheelDelta = 0;
      }, 50);
    }

    if (totalWheelDelta < 10 && chart.isInsidePlot(
        e.chartX - chart.plotLeft,
        e.chartY - chart.plotTop
      )) {
      chart.mapZoom(
        Math.pow(
          (chart.options.mapNavigation).mouseWheelSensitivity,
          delta
        ),
        chart.xAxis[0].toValue(e.chartX),
        chart.yAxis[0].toValue(e.chartY),
        e.chartX,
        e.chartY,
        Math.abs(delta) < 1 ? false : void 0
      );
    }
  }
}(Highcharts))
To load it in Highcharts using Angular you can read the information here: https://github.com/highcharts/highchart ... -a-wrapper

Here is an example of loading another plugin into Highcharts-angular: https://stackblitz.com/edit/highcharts- ... mPlugin.ts

Feel free to ask any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer
Shruthi
Posts: 9
Joined: Wed Jul 22, 2020 10:25 am

Re: In highmaps the mouse wheel scroll feature is not working.

The above code plugin worked.
Thanks Hubert!!!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: In highmaps the mouse wheel scroll feature is not working.

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Maps”