Pan One Of Multiple Y Axis For Highchart

I am new to highchart javascript. And I don't have sample to show it. But I have seen a chart has two Y Axis, left and right. I can drag up and down one of the axis without affect

Solution 1:

You can specify a second yAxis like this:

yAxis: [{
        min: -50,
        tickInterval: 500,
        startOnTick:false,
        endOnTick:false
    },{
        min: -50,
        opposite:true,
        tickInterval: 500,
        startOnTick:false,
        endOnTick:false
    }],

and plot some data on it like tihs:

series: [{
        data: [929.9, 971.5, 1106.4, 1129.2, 1144.0, 1176.0, 1135.6, 1148.5, 2216.4, 1194.1, 995.6, 954.4]        
    },{yAxis:1,
        data: [929.9, 971.5, 1106.4, 1129.2, 1144.0, 1176.0, 1135.6, 1148.5, 2216.4, 1194.1, 995.6, 954.4]        
    }]

If you do that in the fiddle you posted, you get one axis which doesn't move, and one which does.

http://jsfiddle.net/hUt72/

The scrolling behaviour can be modified by changing this routine:

    .mousemove(function(e) {
    var wasDragging = isDragging;
    if (wasDragging) {
        yVar=mouseY-e.pageY; 
       if(yVar<-20 || yVar > 20) {
           mouseY = e.pageY;
            yVarDelta=yVar/10*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));
        }
    }
})

http://jsfiddle.net/Em2P3/

Try changing the line

 if(yVar<=20 || yVar > 20) {

or the line

yVarDelta=yVar/10*yDataRange;

to make the scroll smoother/faster.