JSFiddle - React, Tailwind, and code Playground

by chogger

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id='container' style='width: 2000px; height: 550px; margin: 0 auto'></div>

JavaScript

var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						defaultSeriesType: 'line',
						marginRight: 50,
						marginBottom: 175
					},
					credits: {
						enabled: false
					},
					title: {
						text: '',
						x: -20 //center
					},
					xAxis: {
						min: 0,
						categories: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60','61','62','63','64','65','66','67','68','69','70','71','72','73','74','75','76','77','78','79','80',],
						labels: {
							rotation: 90,
							step: 3
						}
					},
					yAxis: {
						reversed: true,
						allowDecimals: false,
						showFirstLabel: false,
						showLastLabel: false,
						min: 0,
						max: 18,
						tickInterval: 1,
						gridLineWidth: 0,
						title: {
							text: 'Position'
						},
						plotLines: [{
							value: 0,
							width: 0,
							color: '#808080'
						}]
					},
					tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br>Lap '+
								this.x + '<br>Position '+ this.y;
						}
					},
					legend: {
						align: 'bottom',
						verticalAlign: 'middle',
						borderWidth: 0,
						itemWidth: 200,
						y: 200,
						x: 10
					},
					series: [{ name: 'Christoph Kiel', data: [12, 11, 11, 11, 11, 10, 10, 10, 16, 17, 17, 16, 16, 16, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 14, 13, 14, 14, 14, 13, 12, 12, 12, 12, 12, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 11, 11, 11, 11, 10, 10, 6, 5, 7, 7, 7, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, ]}, { name: 'Daniel Adam', data: [11, 14, 14, 13, 13, 13, 14, 14, 12, 12, 13, 11, 13, 12, 12, 12, 12, 12, 12, 12, 13, 13, 12, 2, 8, 14, 13, 12, 12, 11, 11, 10, 10, 10, 11,...