JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'columnrange',
inverted: true
},
legend: {
enabled: false
},
'xAxis': {
'categories': ["Ltd 2D Marine"]
},
'yAxis': {
'title': 'Date',
'type': 'datetime',
'dateTimeLabelFormats': {
'month': '%b'
},
},
series: [{
name: 'Data',
data: [{
x: "Ltd 2D Marine",
low: Date.UTC(2012, 02, 01),
high: Date.UTC(2012, 05, 01),
color: "red"
}]
}]
});
});