Highcharts bug with zooming after scroll, overwrite e.chartX, e.chartY values

Workaround wrapping Pointer.prototype.normalize

by Umesh Patil

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<h3>Zoom in the chart, scroll down with mouse wheel, and try scroll horizontally inside the chart. Unexpected zoom-in happens.</h3>
<div id="container">
  <div id="chart"></div>
</div>

CSS

body { background-color: gray; }
#container { width: 450px; height: 300px; overflow: scroll; background-color: salmon; padding: 20px; }
#chart { width: 400px; height: 400px; }

JavaScript

const generateData = length => {
  return Array.from({length}).map(v => {
    return [Math.random(), Math.random()];
  });
};

Highcharts.wrap(Highcharts.Pointer.prototype, 'normalize', function (proceed) {

  const e = proceed.apply(this, Array.prototype.slice.call(arguments, 1));

  e.chartX = arguments[1].offsetX;
  e.chartY = arguments[1].offsetY;

  return e;
});


Highcharts.chart('chart', {
  chart: {
    type: 'scatter',
    zoomType:'xy',
    title: ''
  },
  
  series: [{
    data: generateData(100),
    stickyTracking: false,
    animation: false
  }],

  legend: {
    enabled: false
  },
  
  xAxis: {
    scrollbar: {
      enabled: true,
      showFull: false
    }
  },
  yAxis: {
    scrollbar: {
      enabled: true,
      showFull: false
    }
  }
});