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%"
    }
  }
};


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



  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'line',
    },
    title: {
      text: ''
    },
    xAxis: {
      categories: ['']
    },
    plotOptions: {
      series: {
        allowPointSelect: true,
        cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                    		//var clone = _.clone(this, true);
                        console.log('click through here');
                    }
                }
            }
      },
    },
    credits: {
      enabled: false,
    },
    tooltip: {
        
        formatter: function() {return ' ' +
       ...