JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/4.1.6/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
},
title: {
text: '_',
style: {
color: '#FFFFFF',
fontWeight: 'bold'
}
},
subtitle: {
text: '_',
style: {
color: '#FFFFFF',
fontWeight: 'bold'
}
},
xAxis: {
tickInterval: 5 * 60000,
type: 'datetime',
dateTimeLabelFormats: {
hour: '%H:%M',
day: '%e-%b-%Y',
month: '%b %Y',
},
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
},
startOnTick: true,
endOnTick: true
},
plotOptions: {
spline: {
marker: {
symbol: 'circle',
enabled: false,
radius: 0,
lineWidth: 0,
states: {
hover: {
enabled: true,
fillColor: 'white',
lineColor: 'black',
lineWidth: 1,
lineWidthPlus: 0,
radiusPlus: 0,
radius: 3
},
select: {
enabled: false,
radius: 0
}
}
}
}
}
});
//***************** END : BASIC FRAME *********************************
var chart = $('#container').highcharts();
chart.addAxis({ //...