JSFiddle - React, Tailwind, and code Playground
HTML
<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>
JavaScript
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=large-dataset.json&callback=?', function (data) {
// Create a timer
var start = +new Date();
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
this.setTitle(null, {
text: 'Built chart in ' + (new Date() - start) + 'ms'
});
}
},
zoomType: 'x'
},
rangeSelector: {
buttons: [{
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
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
title: {
text: 'Hourly temperatures in Vik i Sogn, Norway, 2009-2015'
},
subtitle: {
text: 'Built chart in ...'
},
series: [{
name: 'Temperature',
data: data.data,
allowPointSelect: true, // point selection is turned on
pointStart: data.pointStart,
pointInterval: data.pointInterval,
marker: {
radius: 6,
fillColor: 'red',
states: {
select: {
radius: 6,
fillColor: 'red'
...