JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true,
renderTo: 'container',
},
tooltip: {
pointFormat: ""
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
categories:['1','2']
},
yAxis:{
labels: {
enabled: false
},
title: {
text: 'Months'
}
},
series: [{
data: [
{ low: Date.UTC(2015, 10, 01), high: Date.UTC(2015, 02, 04), color: 'red' },
{ low: Date.UTC(2014, 10, 01), high: Date.UTC(2014, 02, 04), color: 'blue' },
]
}],
legend: {
enabled: false
},
exporting: {
enabled: false
}
});
});