JSFiddle - React, Tailwind, and code Playground

by Kevin Rostagni

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

JavaScript

$(function () {
	var options = {
	    chart: {
	        type: 'scatter',
            panning: true
	    },

		xAxis: {
		 	type: 'datetime',
			min: 1417161437595,
			max: +new Date(),
            plotLines: [{
                color: '#FF0000',
                width: 1,
				dashStyle: 'Dot',
                value: 1418371485486,
				label: {
					text: 'Now',
					rotation: 0,
					verticalAlign: 'bottom'
                },
				zIndex: 5
            }]
		},
	    
	    series: [
			{
            marker: {
                enabled: true
            },
			        data: [
{ x: 1410444900022, y: 0}, 
{ x: 1410786746435, y: 0}, 
{ x: 1410788673693, y: 0}, 
{ x: 1410945014300, y: 0}, 
{ x: 1410945194162, y: 0}, 
{ x: 1410952366889, y: 0}, 
{ x: 1410954169041, y: 0}, 
{ x: 1410966771659, y: 0}, 
{ x: 1411144973005, y: 0}, 
{ x: 1411371815266, y: 0}, 
{ x: 1411391564267, y: 0}, 
{ x: 1411488777344, y: 0}, 
{ x: 1411578764018, y: 0}, 
{ x: 1411715573509, y: 0}, 
{ x: 1411728105439, y: 0}, 
{ x: 1412583209365, y: 0}, 
{ x: 1412593750751, y: 0}, 
{ x: 1412601153693, y: 0}, 
{ x: 1412768684241, y: 0}, 
{ x: 1412860493631, y: 0}, 
{ x: 1413900026692, y: 0}, 
{ x: 1413965611647, y: 0}, 
{ x: 1414148202258, y: 0}, 
{ x: 1414149155361, y: 0}, 
{ x: 1414163614852, y: 0}, 
{ x: 1415017069510, y: 0}, 
{ x: 1415031493928, y: 0}, 
{ x: 1415357023900, y: 0}, 
{ x: 1415627863629, y: 0}, 
{ x: 1415876266205, y: 0}, 
{ x: 1415877981891, y: 0}, 
{ x: 1415886976621, y: 0}, 
{ x: 1416216380877, y: 0}, 
{ x: 1416498977712, y: 0}, 
{ x: 1416815815107, y: 0}, 
{ x: 1416914781184, y: 0}, 
{ x: 1417677972601, y: 0}, 
{ x: 1417679772594, y: 0}, 
{ x: 1417692389195, y: 0}, 
{ x: 1417701390436, y: 0}, 
{ x: 1417712168097, y: 0}, 
{ x: 1417771569774, y: 0}, 
{ x: 1418115393117, y: 0}, 
{ x: 1418232400306, y: 0}, 
{ x: 1418234072693, y: 0}, 
{ x: 1418286387062, y: 0}, 
{ x: 1418313378206, y: 0}
			]
            },{data:[{ x: 1418435999999, y: 0}], color:...