JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

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

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

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                zoomType: 'x',
                type: 'line',
                marginRight: 70,
                marginTop: 75,
                marginBottom: 150
            },
            title: {
              text: 'Calls Offered vs Processed',
              x: -20
            },
            subtitle: {
              text: 'Source: Combined UK/US Statisics',
              x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                labels: {
                rotation: -90,
                align: 'right',
                style: {
                  fontWeight: 'normal'
                  }
              }
            },
            yAxis: [{
                lineWidth: 3,
                title: {
                  text: 'Amount of Calls'
                },
                plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'}]
              }, {
                lineWidth: 3,
                opposite: true,
                title: {
                  text: 'Availability Percentage'
                }
            }],
            tooltip: {
              formatter: function() {
                return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y;
              }
            },
         	  plotOptions: {
            area: {
              fillColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                stops: [
                  [0, 'rgba(0,0,0,.05)'],
                  [1, 'rgba(255,255,255,.05)']
                ]
              },
              lineWidth: 1,
              marker: {
                enabled: false,
                states: {
                  hover: {
                   ...