Highcharts - zoom xAxis and pan along axis

0
votes

I have in excess of three years data being shown along the xAxis of a graph.

I'd like a user to be able to zoom into the xAxis to view data points more closely (yAxis doesn't need to change), by clicking buttons that will show "1 month", "6 months", "1 year" worth of data points in the visible chart area.

I can achieve this zoom using chart.xAxis[0].setExtremes(startDate, endDate) but I'd then like the user to be able to scroll along the xAxis at the specified zoom level to view the data that is off the side of the visible chart area and this I can't work out.

I imagine the issue is that setExtremes sets specific start and end points to the visible area, whereas what I really want to do is limit the view by a generic time period.

Appreciate any pointers!

2
highchartszooming
Use highstock instead of highcharts, it has what you need by default: highcharts.com/stock/demo. – ewolden

2 Answers

0
votes

I recommend you to use Highstock. You will be able to create a stock chart with additional features that you need or create a chart with scrollbar.

scrollbar: {
  enabled: true
}

Live demo: http://jsfiddle.net/BlackLabel/8L0aj1wt/

0
votes

Thanks for the Highstock recommendations @ewolden & @ppotaczek I can see it does have the right kind of functionality, but I managed to solve it by adding the following (panning, panKey and pinchType) to my chart options:

chart: {
      type: 'spline',
      panning: true,
      panKey: 'shift',
      pinchType: 'x',
}