HighCharts: Panning in yAxis is happening too slowly - highcharts

Question

I made a small code for panning in yAxis, but its a little slow. it becomes faster if I increase the value of tickInterval. But the downside is that with increased tickInterval, the code starts working oddly when I drag the mouse for less than the tickInterval size (try changing tickInterval to 500 in my fiddle and then drag mouse for a minute increment.
My link to jsfiddle.
Pertinent Code:
var mouseY;
$(chart.container)
.mousedown(function(event) {
mouseY=event.offsetY;
yData=chart.yAxis[0].getExtremes();
yDataRange=yData.max-yData.min;
isDragging=true;
})
.mousemove(function(e) {
var wasDragging = isDragging;
if (wasDragging) {
yVar=mouseY-e.pageY;
if(yVar!=0) {
yVarDelta=yVar/500*yDataRange;
chart.yAxis[0].setExtremes((yData.min-yVarDelta),(yData.max-yVarDelta));
}
}
})
.mouseup(function (e) {
isDragging = false;
});
Will also appreciate if someone can provide an alternate route to converting pixels (e.pageY) to y co-ordinate. As you can see in code, currently I am doing a workaround.
EDIT
I included translate function in this jsfiddle and have put logic such that the panning happens only at mouseup and not at mousemove. The issue I am currently facing is that if the drag is less than tick interval, not only does the code pan, but it also zooms. I presume its happening because the change in yAxis min and max occurs at a floor for min and ceiling for max.

Answer 1

There are a few problems here. Firstly, when you call setExtremes, your range gets bigger ( causing the zoom effect). This is because you are not moving by an exact tick interval. You can cure this by setting set/end on tick on the y axis to false:
yAxis: {
min: -50,
tickInterval: 500,
startOnTick:false,
endOnTick:false
},
The way to convert pixels to coordinates is to use 'translate'. I changed your first jsfiddle as follows:
http://jsfiddle.net/uLHCx/
if(yVar<-50 || yVar > 50) {
mouseY = e.pageY;
yVarDelta=yVar/100*yDataRange;
yVarDelta = chart.yAxis[0].translate(e.pageY) - chart.yAxis[0].translate(e.pageY - yVarDelta);
chart.yAxis[0].setExtremes((yData.min-yVarDelta),(yData.max-yVarDelta));
}
You can change the scroll amount by changing the calculation of yVarDelta.
Note, I put a range check on the yVar so that we don't redisplay unless the mouse has moved a given amount, and reset the valu of mouseY.
This may not do exactly what you want, but it should be enough for you to modify it as required.