JSFiddle - React, Tailwind, and code Playground

by Regisc

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="target" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

var opts = {
  chart: {
    "alignTicks": true,
      "animation": true,
      "backgroundColor": "#FFFFFF",
      "borderColor": "#4572A7",
      "borderRadius": 5,
      "borderWidth": 0,
      "ignoreHiddenSeries": true,
      "inverted": false,
      "plotBorderColor": "#C0C0C0",
      "plotBorderWidth": 0,
      "plotShadow": false,
      "reflow": true,
      "renderTo": "target",
      "resetZoomButton": {
      "position": {
        "verticalAlign": "bottom",
          "y": 30.0
      },
        "relativeTo": "plot"
    },
      "selectionMarkerFill": "rgba(69,114,167,0.25)",
      "shadow": false,
      "showAxes": false,
      "spacingBottom": 15,
      "spacingLeft": 10,
      "spacingRight": 10,
      "spacingTop": 10,
      "type": "bar",
      "zoomType": "x"
  },
  credits: {
    "enabled": true,
      "href": "http://www.koaly.com",
      "text": "Koaly EXP"
  },
  legend: {
    "align": "center",
      "borderColor": "#909090",
      "borderRadius": 5,
      "borderWidth": 1,
      "enabled": false,
      "floating": false,
      "itemMarginBottom": 0,
      "itemMarginTop": 0,
      "layout": "horizontal",
      "lineHeight": 16,
      "margin": 15,
      "padding": 8,
      "reversed": false,
      "rtl": false,
      "shadow": false,
      "symbolPadding": 5,
      "symbolWidth": 30,
      "useHtml": false,
      "verticalAlign": "bottom",
      "x": 0,
      "y": 0
  },
  title: {
    "align": "center",
      "floating": false,
      "useHTML": false,
      "verticalAlign": "top",
      "x": 0.0,
      "y": 15.0
  },
  xAxis: {
    categories: [ "foo", "bar", "com" ]
  },
  yAxis: {
    "title": {
       text: 'Appels',
    }
  },
  tooltip: {
    "animation": true,
      "enabled": true,
      "shadow": true,
      "shared": false,
      "useHTML": false,
      "xDateFormat": "%d/%m/%Y"
  },
  series: [{
    name: "Appel",
    "data": [["foo", 4], ["com", 5], ["bar", 1]]
  }]
};
chart = new Highcharts.Chart(opts);