Search code examples
javascriptjqueryhighchartsmousewheel

Mouse wheel event in highchart reduce xaxis height

I added a mouse wheel event in highcharts with the following reference: http://jsfiddle.net/d3r8pb7c/

But i Found one problem with wheel event when i keep moving the mouse wheel xaxis bar height reducing. Please find the image below.

enter image description here

I tried to fix this by adding height to the chart but nothing is worked out. Please help if anyone knows. The following code i tried to improve the height of the chart when nothing works out.

 chart: {
                height: 500}
Solution

  • Your wrap function incorrectly calculates the axis extremes, when you scroll to the edge. You should use the following calculation:

            if (chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
            extr = axis.getExtremes();
            step = (extr.max - extr.min) / 5 * delta;

            if ((extr.min + step) <= dataMin) {
                newExtrMin = dataMin;
                newExtrMax = dataMin + (extr.max - extr.min);
            } else if ((extr.max + step) >= dataMax) {
                newExtrMin = dataMax - (extr.max - extr.min);
                newExtrMax = dataMax;
            } else {
                newExtrMin = extr.min + step;
                newExtrMax = extr.max + step;
            }

            axis.setExtremes(newExtrMin, newExtrMax, true, false);

        }

    Live demo: http://jsfiddle.net/BlackLabel/9mbycpqu/