Highstock return to panning after using zoom - reactjs

Question

Hello Highstock Community,
How can I turn off zooming so a user can pan the graph again after zooming in using highstock tools?
Eg looking at this highstock sample we user likes to do the following:
Zoom in with the zoom buttons on the left
Pan again (no way to leave zooming again.)
Thx really appreciate your help!
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json', function (data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length,
i = 0;
for (i; i < dataLength; i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
Highcharts.stockChart('container', {
yAxis: [{
labels: {
align: 'left'
},
height: '80%',
resize: {
enabled: true
}
}, {
labels: {
align: 'left'
},
top: '80%',
height: '20%',
offset: 0
}],
tooltip: {
shape: 'square',
headerShape: 'callout',
borderWidth: 0,
shadow: false,
positioner: function (width, height, point) {
var chart = this.chart,
position;
if (point.isHeader) {
position = {
x: Math.max(
// Left side limit
chart.plotLeft,
Math.min(
point.plotX + chart.plotLeft - width / 2,
// Right side limit
chart.chartWidth - width - chart.marginRight
)
),
y: point.plotY
};
} else {
position = {
x: point.series.chart.plotLeft,
y: point.series.yAxis.top - chart.plotTop
};
}
return position;
}
},
series: [{
type: 'ohlc',
id: 'aapl-ohlc',
name: 'AAPL Stock Price',
data: ohlc
}, {
type: 'column',
id: 'aapl-volume',
name: 'AAPL Volume',
data: volume,
yAxis: 1
}],
responsive: {
rules: [{
condition: {
maxWidth: 800
},
chartOptions: {
rangeSelector: {
inputEnabled: false
}
}
}]
}
});
});
#container {
max-height: 800px;
min-height: 75vh;
}
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/modules/annotations-advanced.js"></script>
<script src="https://code.highcharts.com/modules/price-indicator.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>
<script src="https://code.highcharts.com/modules/stock-tools.js"></script>
<div id="container" class="chart"></div>

Answer 1

Update #1
I understood you better now I think.
Is this what you wanted?
Can use the zoom tool from the toolbar, then pan using 'alt' + mouse click & drag.
https://jsfiddle.net/marensiusb/rjs60a37/3/
If I understood you correctly, you want to:
Zoom in
Pan
Then zoom out
You can zoom in using the rangeSelector (1m, 3m, 6, YTD, 1y, all), then pan and zoom out using the rangeSelector ('ALL').
You can also disable the rangeSelector and enable chart.zoom and chart.pan
Then the user can pan using alt + mouse and reset using the 'Reset Zoom' button.
https://jsfiddle.net/marensiusb/z6tn28w4/4/