JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function() {
var endTime = 1456198143933 + 3600 * 1000,
data = [
[1456187667884, 10],
[1456187670916, 10],
[1456187671364, 10],
[1456187671562, 10],
[1456188795998, 15],
[1456188824877, 99],
[1456189436947, 15],
[1456189479375, 25],
[1456189597814, 15],
[1456189606222, 0],
[1456189626203, 15],
[1456191553211, 0],
[1456191604041, 15],
[1456191684985, 22],
[1456191911371, 15],
[1456191911922, 0],
[1456192571955, 15],
[1456192775431, 19],
[1456193247974, 15],
[1456193248525, 0],
[1456193273059, 15],
[1456198143933, 0]
];
data.push([endTime, data[data.length - 1][1]]);
$('#container').highcharts({
chart: {
zoomType: 'x',
spacingRight: 20,
type: 'line'
},
title: {
text: 'Rate'
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime'
},
yAxis: {
labels: {
format: 'valeu'
}
},
plotOptions: {
area: {
step: 'left'
}
},
series: [{
name: 'Time/Date',
data: data
}]
});
});