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.
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));
}
}
})
Try changing the line
if(yVar<=20 || yVar > 20) {
or the line
yVarDelta=yVar/10*yDataRange;
to make the scroll smoother/faster.
Post a Comment for "Pan One Of Multiple Y Axis For Highchart"