Zoom to a selected area with the middle mouse button (same functionality as left mouse button zoom)

[SimonWuensch-It-Studio-Rech]

Expected behavior
Chart zooming should also work with the middle mouse button.
It should somehow be possible to configure which button should be used for zooming.

Actual behavior
Chart zooming works only with the left mouse button.
In highcharts version 8 this also worked with the middle mouse button.

Live demo (Highcharts version 8.0.0)
The expected behavior has been working in an older version.
https://jsfiddle.net/BlackLabel/z0f6r7eL/

Product version
Highcharts v9.1.2

Affected browser(s)
all

[raf18seb]

Hi @SimonWuensch-It-Studio-Rech, thanks for creating the ticket.

This is intended behavior since v8.1.0. To allow zooming with the middle mouse button, please use this plugin (created and working in v9.1.2):

(function(H) {
  H.Pointer.prototype.onContainerMouseDown = function(e) {
    var isPrimaryButton = ((e.buttons || e.button) & 1) === 1;
    // Normalize before the 'if' for the legacy IE (#7850)
    e = this.normalize(e);
    // #11635, Firefox does not reliable fire move event after click scroll
    if (H.isFirefox &&
      e.button !== 0) {
      this.onContainerMouseMove(e);
    }
    // #11635, limiting to primary button (incl. IE 8 support)

    if (
      typeof e.button === 'undefined' ||
      isPrimaryButton ||
      e.button === 1 // for middle mouse button
    ) {
      this.zoomOption(e);
      // #295, #13737 solve conflict between container drag and chart zoom
      if (isPrimaryButton &&
        e.preventDefault) {
        e.preventDefault();
      }
      this.dragStart(e);
    }
  };
})(Highcharts);

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

[SimonWuensch-It-Studio-Rech]

Hi @raf18seb,

thank you very much for the quick reply.
It works great!