JSFiddle - React, Tailwind, and code Playground

by Mike Rawling

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
            colors: ['#fff19b', '#82c4e2', '#55d85e'],
                 chart: {
                   type: "area",
                   zoomType:"x"
                 },
                 plotOptions: {
                   area: {
                     marker: {
                       enabled: false
                     },
                     stacking: "normal"
                   }
                 },
                 title: {
                   text: "Video Starts in the Last 30 Days"
                 },
                 subtitle: {
                   text: "by Buying Channel",
                   x: -20
                 },
                 xAxis: {
                   categories: [
                     "20 Jun 2016",
                     "21 Jun 2016",
                     "22 Jun 2016",
                     "23 Jun 2016",
                     "24 Jun 2016",
                     "25 Jun 2016",
                     "26 Jun 2016",
                     "27 Jun 2016",
                     "28 Jun 2016",
                     "29 Jun 2016",
                     "30 Jun 2016",
                     "01 Jul 2016",
                     "02 Jul 2016",
                     "03 Jul 2016",
                     "04 Jul 2016",
                     "05 Jul 2016",
                     "06 Jul 2016",
                     "07 Jul 2016",
                     "08 Jul 2016",
                     "09 Jul 2016",
                     "10 Jul 2016",
                     "11 Jul 2016",
                     "12 Jul 2016",
                     "13 Jul 2016",
                     "14 Jul 2016",
                     "15 Jul 2016",
                     "16 Jul 2016",
                     "17 Jul 2016",
                     "18 Jul 2016",
                     "19 Jul 2016"
                   ]
                 },
                 yAxiS: {
                   title: {
                     text: "Video Starts"
                   },
                  ...