$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=large-dataset.json&callback=?', function(data) {
// Create a timer
var start = +new Date();
var thresholdvalue = 30;
var _fullData = data;
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
this.setTitle(null, {
text: 'Built chart in ' + (new Date() - start) + 'ms'
});
this.rangeSelector.clickButton(3)
}
},
zoomType: 'x'
},
rangeSelector: {
buttons: [
{
type: 'day',
count: 1,
text: '1D'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}
],
selected: 3
},
xAxis: {
events: {
setExtremes: function(e) {
if (e.trigger == "rangeSelectorButton") {
var series = this.chart.series[0];
var yAxis = this.chart.yAxis[0];
var threshold = thresholdvalue;
//I can't see _fullData here without doing this
var all_data = _fullData;
//Calculate values for a given range
//Use floor() here, just to be sure that indeses passed to slice() are integers
var values = all_data.data.slice(
Math.floor((e.min - all_data.pointStart) / all_data.pointInterval),
Math.floor((e.max - all_data.pointStart) / all_data.pointInterval) + 1
);
//Add threshold value to the array
values.push(thresholdvalue);
//Calculate min and max including threshold
let minY = Math.min.apply(null, values);
let maxY = Math.max.apply(null, values);
series.update({
threshold: threshold
}, false);
yAxis.update({
plotLines: [{
//value: threshold,
value: threshold,
color: 'green',
dashStyle: 'shortdash',
width: 2,
visible: true,
label: {
text: 'Last quarter minimum'
}
}],
//Add min and max to the graph
min: minY,
max: maxY
});
}
},
}
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: thresholdvalue,
color: 'green',
dashStyle: 'shortdash',
visible: true,
width: 2,
label: {
text: 'Last quarter minimum'
}
}]
},
title: {
text: 'Hourly temperatures in Vik i Sogn, Norway, 2009-2015'
},
subtitle: {
text: 'Built chart in ...' // dummy text to reserve space for dynamic subtitle
},
series: [{
name: 'Temperature',
data: data.data,
pointStart: data.pointStart,
pointInterval: 3600000,
tooltip: {
valueDecimals: 1,
valueSuffix: '°C'
},
negativeColor: 'red',
threshold: thresholdvalue
}]
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
