JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
Panning: <input id="panning" type="checkbox"/>
<div id="container" style="height: 400px; min-width: 310px"></div>
JavaScript
$(function() {
(function(H) {
H.wrap(H.Pointer.prototype, 'drag', function(p, e) {
if (this.chart.options.chart.panKey === 'highcharts' && $("#panning").is(":checked")) {
e.highchartsKey = 1;
}
p.call(this, e);
});
})(Highcharts);
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
zoomType: 'x',
panKey: 'highcharts',
panning: true
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});