JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://highcharts.com/js/testing-stock.js"></script>
<div id="container" style="height: 300px"></div>
JavaScript
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
resetZoomEnabled: true,
zoomType: 'x',
//backgroundColor: '#000000'
alignTicks: false
},
plotOptions: {
line:{
lineWidth: 2,
marker: {
enabled: true,
radius: 3
}
}
},
tooltip: {
enabled: true,
xDateFormat: '%b %e, %Y, %H:%M:%S'
},
navigator: {
enabled: false
},
rangeSelector: {
enabled: false,
inputEnabled: false
},
credits: {
text: 'NewPort',
href: (function(){return false}()),
style: {
cursor: 'default'
}
},
xAxis: [{
type: 'datetime',
labels: {
formatter: function(){
return Highcharts.dateFormat('%H:%M:%S', this.value);
}
}
}],
yAxis:[{
alternateGridColor: null,
gridLineWidth:1,
opposite:false,
minorGridLineWidth: 0,
title: {
text: "Wattage",
style: {
color: colors[0]
}
},
lineWidth: 2,
lineColor: colors[0],
min: 0,
max: wattsLimit
},
{
alternateGridColor: null,
gridLineWidth:0,
opposite:false,
offset: 50,
minorGridLineWidth: 0,
title: {
...