JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 2
},
series: [{
name: 'Temperatures1',
type: 'columnrange',
data: [
[1230771600000, -5.8, 0.1],
[1230858000000, -4.1, 1.4],
[1230944400000, -0.5, 4.1],
[1231030800000, -8.9, -0.7]]
},{
name: 'Temperatures2',
type: 'columnrange',
data: [
[130771600010, -5.8, 0.1],
[130858000000, -4.1, 1.4],
[130944400000, -0.5, 4.1],
[131030800000, -8.9, -0.7]]
},{
name: 'Temperatures',
type: 'line',
data: [
[1230771600000, 10],
[1230858000000, 3],
[1230944400000, 1],
[1231030800000, 5]]
}]
});
});