JSFiddle - React, Tailwind, and code Playground
by rishad
JavaScript
var pChart = Highcharts.chart('lineChart', {
chart:{type:'line',zoomType:'xy',resetZoomButton:{theme:{display: 'none'}}},
title:{text:''},
credits:{enabled:false},
plotOptions:{series:{events:{legendItemClick:function(){updateChennelCookie(this.name,!this.visible);}}},area:{cropThreshold:2000}},
xAxis:{type: 'datetime',reversed: true},
yAxis: [
{startOnTick:false,endOnTick:false,showEmpty:false,labels:{format:'{value}'},title:{text:'\xB5g/m\xB3'},plotLines:[{value:50.0,color:'red',width:1,zIndex:2,label:{text:'Total particles trigger level',useHTML:true,style:{display:'block',border:'1px solid red',backgroundColor:'rgba(255,0,0,0.3)',padding:'1px 3px',borderRadius:'3px'}}},{value:30.0,color:'red',width:1,zIndex:2,label:{text:'PM10 particles trigger level',useHTML:true,style:{display:'block',border:'1px solid red',backgroundColor:'rgba(255,0,0,0.3)',padding:'1px 3px',borderRadius:'3px'}}},]},
{startOnTick:false,endOnTick:false,showEmpty:false,labels:{format:'{value}'},title:{text:'mtr/sec'},opposite:true,plotLines:[]},
{startOnTick:false,endOnTick:false,showEmpty:false,labels:{format:'{value}'},title:{text:'degrees'},plotLines:[]},
],
series:
[
{type:'spline',name:'Total particles',yAxis:0,tooltip:{valueSuffix:'\xB5g/m\xB3'},data:[[Date.UTC(2017,9,5,23,50,0),4.1],[Date.UTC(2017,9,6,0,0,0),4.6],[Date.UTC(2017,9,6,0,10,0),4.5],[Date.UTC(2017,9,6,0,20,0),4.4],[Date.UTC(2017,9,6,0,30,0),7.7],[Date.UTC(2017,9,6,0,40,0),6.5],[Date.UTC(2017,9,6,0,50,0),5.2],]},
{type:'spline',name:'PM10 particles',yAxis:0,tooltip:{valueSuffix:'\xB5g/m\xB3'},data:[[Date.UTC(2017,9,5,23,50,0),3.2],[Date.UTC(2017,9,6,0,0,0),3.1],[Date.UTC(2017,9,6,0,10,0),3.5],[Date.UTC(2017,9,6,0,20,0),3.6],[Date.UTC(2017,9,6,0,30,0),5.4],[Date.UTC(2017,9,6,0,40,0),5.0],[Date.UTC(2017,9,6,0,50,0),4.2],]},
{type:'spline',name:'PM2.5...