JSFiddle - React, Tailwind, and code Playground

by samwhite

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://www.highcharts.com/samples/static/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/samples/static/highslide.config.js" charset="utf-8"></script>

<div class="charting_div">
  <div id="container"></div>
</div>

CSS

.charting_div { width: 850px; margin: 0 auto; }

JavaScript

Highcharts.chart('container', {
    chart: {
      type: 'line',
    },
    title: {
      text: "GME Absolute Number of Shares Hedged in Option Trading",
      align: 'left',
      style: {
        fontSize: '20px',
        fontWeight: 'bold',
      }
    },
    subtitle: {
      text: 'Data source: OPRA and Bloomberg',
      align: 'left'
    },
    credits: { enabled: false },
    xAxis: {
      crosshair: true,
      title: { text: 'Date' },
      categories: ['Jan 04', 'Jan 11', 'Jan 18', 'Jan 25'],
      tickmarkPlacement: 'on'
    },
    yAxis: {
      tickInterval: 10,
      min: 5,
      max: 40,
      title: {
        text: '# of Shares (mm)'
      },
      gridLineWidth: 0,
      minorGridLineWidth: 0
    },
    legend: {
      title: { text: 'Option Series' },
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle'
    },
    series: [{
      name: 'GME Call',
      color: "#00429d",
      data: [18.40345395, 18.32595087, 19.15087983, 19.16410026, 18.55687485, 20.95533447, 20.4068335, 30.04684925, 33.73630533, 32.00319773, 20.66296168, 20.77395832, 23.55373851, 38.30826413, 29.98265297, 34.92300725, 32.19425239, 28.27697149, 31.92597248],
      marker: { enabled: false },
      label: { enabled: false }
    }, {
      name: 'GME Net',
      color: "#009c56",
      data: [3.981667259, 3.699835889, 5.707331914, 5.583661701, 4.031818851, 9.716787874, 8.218344693, 24.91298209, 29.72145703, 27.10696218, 15.76613521, 15.21344769, 18.31385242, 33.94138296, 24.14691476, 30.91437069, 30.15361859, 24.33123219, 29.52458396],
      marker: { enabled: false },
      label: { enabled: false }
    }, {
      name: 'GME Put',
      color: "#f79646",
      data: [-14.42178669, -14.62611498, -13.44354791, -13.58043856, -14.525056, -11.2385466, -12.18848881, -5.133867153, -4.014848306, -4.896235549, -4.896826466, -5.560510629, -5.239886084, -4.366881175, -5.835738209, -4.00863656, -2.040633802, -3.945739308, -2.401388521],
      marker: { enabled:...