JSFiddle - React, Tailwind, and code Playground

by bryangrimes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js">placeholder</script>
<div id="container" style="height: 400px; min-width: 600px"></div>

JavaScript

$(function() {
Highcharts.theme = {
  "colors": [
    "#d35400",
    "#2980b9",
    "#2ecc71",
    "#f1c40f",
    "#2c3e50",
    "#7f8c8d"
  ],
  "chart": {
    "style": {
      "fontFamily": "Roboto",
      "color": "#666666"
    }
  },
  "title": {
    "align": "left",
    "style": {
      "fontFamily": "Roboto Condensed",
      "fontWeight": "bold"
    }
  },
  "subtitle": {
    "align": "left",
    "style": {
      "fontFamily": "Roboto Condensed"
    }
  },
  "legend": {
    "align": "right",
    "verticalAlign": "bottom"
  },
  "xAxis": {
    "gridLineWidth": 1,
    "gridLineColor": "#F3F3F3",
    "lineColor": "#F3F3F3",
    "minorGridLineColor": "#F3F3F3",
    "tickColor": "#F3F3F3",
    "tickWidth": 1
  },
  "yAxis": {
    "gridLineColor": "#F3F3F3",
    "lineColor": "#F3F3F3",
    "minorGridLineColor": "#F3F3F3",
    "tickColor": "#F3F3F3",
    "tickWidth": 1
  },
  "plotOptions": {
    "line": {
      "marker": {
        "enabled": false
      }
    },
    "spline": {
      "marker": {
        "enabled": false
      }
    },
    "area": {
      "marker": {
        "enabled": false
      }
    },
    "areaspline": {
      "marker": {
        "enabled": false
      }
    },
    "bubble": {
      "maxSize": "10%"
    }
  },
  credits: {
      enabled: false,
    },
};


// Apply the theme
Highcharts.setOptions(Highcharts.theme);

  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'column',
    },
    title: {
      text: ''
    },
    xAxis: {
      categories: ['']
    },
    yAxis: {
    	min: 4,
    	title: 'METRIC NAME',
      stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    plotOptions: {
      series: {
	      //pointWidth: 30,
        allowPointSelect: true,
        cursor: 'pointer',
            point: {
                events: {
               ...