JSFiddle - React, Tailwind, and code Playground
HTML
<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: 310px; max-width: 700px; height: 500px; margin: 0 auto; padding-bottom:100px"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'arearange',
zoomType: 'x',
spacingBottom: 100,
spacingRight: 60
},
title: {
text: 'Forward Curves Series'
},
xAxis: {
title: {
text: "Delivery"
},
categories: ["Sept'16","Oct'16-Nov'16","Oct'16-Dec'16","Nov'17","Dec'16","Jan'17","Jan'17-Mar'17"]
},
yAxis: {
title: {
text: " USD / t"
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: 'USD / t',
positioner: function(boxWidth, boxHeight, point) {
return {
x: point.plotX ,
y:400
};
}
},
legend: {
enabled: false
},
series: [{
name: 'Contributor 1',
data:[
[ 122, 135],
[120, 126],
null,
null,
[126, 129],
[ 127, 130],
[128, 133]
]
},
{
name: 'Contributor 2',
data:[
[121, 123],
[122, 123],
[123, 123],
[124, 126],
[122, 126],
[121, 126],
[122, 126]
]
}
]
});
});