How to enable y-axis panning while zoom in highcharts? - highcharts

Question

I want to move in Y-Axis while i am in zoom in charts
Right now i am able to move on X-Axis while zooming
Bellow is the code for panning
chart: {
renderTo: 'container1',
type: 'column',
zoomType: 'xy',
panning: true,
panKey: 'shift',}
Any help would be appreciated

Answer 1

Possible solutions:
You could set vertical scrollbars in Highstock.
yAxis: {
scrollbar: {
enabled: true
}
},
Article: http://www.highcharts.com/news/224-scrollbars-for-any-axis
Demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/stock/yaxis/scrollbar/
Use a wrapper code (included below) based on the plugin suggested by Barbara that allows zooming (xy) and panning (xy).
The wrapper code:
(function (H) {
H.wrap(H.Chart.prototype, 'pan', function (proceed) {
var chart = this,
hoverPoints = chart.hoverPoints,
doRedraw,
e = arguments[1],
each = H.each;
// remove active points for shared tooltip
if (hoverPoints) {
each(hoverPoints, function (point) {
point.setState();
});
}
var mousePosX = e.chartX,
mousePosY = e.chartY,
xAxis = chart.xAxis[0],
yAxis = chart.yAxis[0],
startPosX = chart.mouseDownX,
startPosY = chart.mouseDownY,
halfPointRangeX = (xAxis.pointRange || 0) / 2,
halfPointRangeY = (yAxis.pointRange || 0) / 2,
extremesX = xAxis.getExtremes(),
newMinX = xAxis.toValue(startPosX - mousePosX, true) + halfPointRangeX,
newMaxX = xAxis.toValue(startPosX + chart.plotWidth - mousePosX, true) - halfPointRangeX,
extremesY = yAxis.startingExtremes,
newMaxY = yAxis.toValue(startPosY - mousePosY, true) + halfPointRangeY,
newMinY = yAxis.toValue(startPosY + chart.plotHeight - mousePosY, true) - halfPointRangeY;
if (xAxis.series.length && newMinX > Math.min(extremesX.dataMin, extremesX.min) && newMaxX < Math.max(extremesX.dataMax, extremesX.max) && newMinY > Math.min(extremesY.dataMin, extremesY.min) && newMaxY < Math.max(extremesY.dataMax, extremesY.max)) {
xAxis.setExtremes(newMinX, newMaxX, false, false, {
trigger: 'pan'
});
yAxis.setExtremes(newMinY, newMaxY, false, false, {
trigger: 'pan'
});
doRedraw = true;
}
chart.mouseDownX = mousePosX;
chart.mouseDownY = mousePosY;// set new reference for next run
if (doRedraw) {
chart.redraw(false);
}
});
}(Highcharts));
Starting extremes should be set in chart's callback or load event of a chart like:
}, function(chart){
chart.yAxis[0].startingExtremes = chart.yAxis[1].getExtremes();
});
Demo: http://jsfiddle.net/Lxjqed02/3/

Answer 2

Y-Axis panning isn't built into HighCharts. But, there is a plugin that does the trick: http://www.highcharts.com/plugin-registry/single/27/Y-Axis%20Panning
The examples show it working with highStock, but it works equally well with highCharts.