Highcharts Zooming with Scroll Bar - highcharts

Question

In Highcharts there is a nice feature to zoom and pane the area. But in order to use panning - it should be in combination with a shift key as mentioned in the example here. Is there a way to display a scroll bar on zoom in instead of panning?

Answer 1

You can use renderer and make your custom scrollbar with it:
http://api.highcharts.com/highcharts#Renderer.rect
You can make two rectangles, one for your scrollbar background and second for your scrolling button.
You can change their attributes using attr():
http://api.highcharts.com/highcharts#Element.attr
chart.renderer.rect(0, height - 60, width, 20)
.attr({
fill: '#666',
zIndex: 3,
visibility: 'hidden'
}).addClass('scroll')
.add();
You can use afterSetExtremes event and inside its callback function you can connect visibility of your scrollbar with visibility of your reset zoom button:
http://api.highcharts.com/highcharts#xAxis.events.afterSetExtremes
You need to calculate width of your scrollbar and x position. You can do it by simple math proportion of your axis min and max and width of your chart. For example you can set your width inside redraw event callback function:
redraw: function() {
var chart = this;
this.xAxis[0].displayBtn ? ($('.scrollBar').show() && $('.scroll').show()) : ($('.scrollBar').hide() && $('.scroll').hide())
width = chart.chartWidth;
newWidth = width * (max - min) / (oldMax - oldMin);
$('.scroll').attr({
width: width
});
$('.scrollBar').attr({
width: newWidth,
x: width * min / oldMax,
});
}
You need to add mousedown and mousemove events to your scrollbar. You can do it using jQuery. Inside mousemove event you need to recalculate x position of your scroll button basing on your mouse position:
$('.scrollBar').on('mousedown', function() {
var mousePos;
$(this).bind('mousemove', function(e) {
$(this).attr({
x: e.clientX + 70,
})
chart.xAxis[0].setExtremes(min - ((mousePos || e.clientX) - e.clientX) * oldMax / width, max - ((mousePos || e.clientX) - e.clientX) * oldMax / width, true, false);
mousePos = e.clientX;
});
})
Here you can see an example how it work:
http://jsfiddle.net/LnneuLoy/8/
Kind regards.