JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<h1>
Highcharts Tutorial
</h1>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
https://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=jQuery21308746522116422886_1497658380841&_=1497658380842

JavaScript

var data = [("# ----------------------------------------\n# highcharts.com\n# Audience Overview\n# 20130309-20130408\n# ----------------------------------------\nDay,Visits,Unique Visitors\n3/9/13,5691,4346\n3/10/13,5403,4112\n3/11/13,15574,11356\n3/12/13,16211,11876\n3/13/13,16427,11966\n3/14/13,16486,12086\n3/15/13,14737,10916\n3/16/13,5838,4507\n3/17/13,5542,4202\n3/18/13,15560,11523\n3/19/13,18940,14431\n3/20/13,16970,12599\n3/21/13,17580,13094\n3/22/13,17511,13234\n3/23/13,6601,5213\n3/24/13,6158,4806\n3/25/13,17353,12639\n3/26/13,17660,12768\n3/27/13,16921,12389\n3/28/13,15964,11686\n3/29/13,12028,8891\n3/30/13,5835,4513\n3/31/13,4799,3661\n4/1/13,13037,9503\n4/2/13,16976,12666\n4/3/13,17100,12635\n4/4/13,15701,11394\n4/5/13,14378,10530\n4/6/13,5889,4521\n4/7/13,6779,5109\n4/8/13,16068,11599\n")];

$(document).ready(function() {
   var title = {
      text: 'Daily visits at www.highcharts.com'   
   };
   var subtitle = {
      text: 'Source: Google Analytics'
   };
   var xAxis = {
      tickInterval: 7 * 24 * 3600 * 1000, // one week
      tickWidth: 0,
      gridLineWidth: 1,
      labels: {
         align: 'left',
         x: 3,
         y: -3
      }
   };
   var yAxis = [{ // left y axis
         title: {
            text: null
         },
         labels: {
            align: 'left',
            x: 3,
            y: 16,
            format: '{value:.,0f}'
         },
         showFirstLabel: false
      },{ // right y axis
         linkedTo: 0,
         gridLineWidth: 0,
         opposite: true,
         title: {
            text: null
         },
         labels: {
            align: 'right',
            x: -3,
            y: 16,
            format: '{value:.,0f}'
         },
         showFirstLabel: false
      }
   ];   

   var tooltip = {
      shared: true,
      crosshairs: true
   }

   var legend = {
      align: 'left',
      verticalAlign: 'top',
      y: 20,
      floating: true,
      borderWidth: 0
   };

   var plotOptions = {
     ...