JSFiddle - React, Tailwind, and code Playground

by Chitkala More

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="container"></div>

JavaScript

let hightChart = Highcharts.chart('container', {
				chart: {
					type: 'spline'
				},
				title: {
					text: 'Messages'
				},

				exporting: { enabled: false},
			
				subtitle: {
					text: ''
				},
			
				yAxis: {
					title: {
						text: 'Messages'
					},
					labels:{
						style:{
							color: '#76797c'
						}
					},
					gridLineDashStyle: 'ShortDash',
					plotLines: [{
						color: '#409cdd',
						width: 3,
						value: 30,
						dashstyle: 'Solid'
					}]
				},
			
				xAxis: {
					title: {
						text: 'Days',
						margin: 15
					},
					labels:{
						style:{
							color: '#76797c'
						}
					},
					startOnTick: true,
					categories: dateItems,
					lineColor: '#93b6ae',
					className: 'xaxis-border-top',
					plotLines: [{
						label: {
							textAlign: 'center',
							verticalAlign: 'middle'
						}
					},{
						value: dateItems,
						dashStyle: 'dash',
						width: 1,
						color: 'pink'
					}],
					lineWidth: 2,
					startOnTick: true,
					minPadding: 3
				},
			
				legend: {
					align: 'center',
					itemStyle: [{"fontSize": "11px", "color": "#00000", "padding-left": "30"}],
					navigaton: {
						enabled: false
					},
					verticalAlign: 'bottom',
					useHTML:true,
					symbolWidth:0,
					labelFormatter: function() {
						switch(this.name){
							case 'Threshold':
								return '<span class="legenditem"><img src="./img/baseline.jpg" width="13" height="13"></span> '+this.name;
								break;
							case 'Above Threshold':
								return '<span class="legenditem"> <img src="./img/above-average.jpg" width="13" height="13"></span> '+this.name;
								break;
							case 'Below Threshold':
								return '<span class="legenditem"><img src="./img/below-average.jpg" width="13" height="13"></span> '+this.name;
								break;
						
						}
					}
				},

				labels: {
					style: "{font-family: 'Open Sans', sans-serif; }"
				},
			
				plotOptions: {
					spline: {
						marker: {
							symbol:...