JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<script src="https://github.highcharts.com/ce7bc5ffdbd79047b599e10338413d96741a8e9b/highcharts.js"></script>

<div id="container"></div>

JavaScript

Highcharts.chart('container', 

{
  "plotOptions": {
    "series": {
      "dataLabels": {
        "enabled": true
      },
      "grouping": true,
      "groupPadding": 0.2,
      "animation": true,
      "states": {
        "hover": {
          "enabled": false
        },
        "inactive": {
          "opacity": 1
        }
      }
    },
    "column": {
      "depth": 50.0,
      "shadow": true,
      "grouping": false
    }
  },
  "xAxis": {
    "tickWidth": 0.0,
    "gridLineColor": "#ccd6eb",
    "gridLineWidth": 0.0,
    "left": "50%",
    "tickLength": 0.0,
    "lineColor": "#bfbfbf",
    "categories": [
      "FUR-BO-10000112",
      "FUR-BO-10000330",
      "FUR-BO-10000362",
      "FUR-BO-10000468",
      "FUR-BO-10000711"
    ],
    "title": {
      "enabled": false
    },
    "reversed": true,
    "lineWidth": 0.0
  },
  "separate": "leftyAxis",
  "currentSeriesName": "Discount",
  "colors": [
    "rgb(31, 119, 180)",
    "rgb(255, 127, 14)",
    "rgb(44, 160, 44)",
    "rgb(214, 39, 40)",
    "rgb(148, 103, 189)",
    "rgb(140, 86, 75)",
    "rgb(227, 119, 194)",
    "rgb(127, 127, 127)",
    "rgb(188, 189, 34)",
    "rgb(23, 190, 207)"
  ],
  "isSeparate": true,
  "yAxis": [
    {
      "gridLineColor": "#f2f2f2",
      "offset": 0.0,
      "stackLabelsEnabled": false,
      "ceilingAndFloorEnabled": false,
      "lineColor": "#bfbfbf",
      "title": {
        "enabled": false
      },
      "lineWidth": "0",
      "labels": {
        "enabled": false
      },
      "stackLabels": {
        "enabled": false
      },
      "gridLineWidth": 0.0,
      "specificGridLineToggle": false,
      "left": 0,
      "width": "45%",
      "reversed": true
    },
    {
      "gridLineColor": "#f2f2f2",
      "offset": 0.0,
      "stackLabelsEnabled": false,
      "ceilingAndFloorEnabled": false,
      "lineColor": "#bfbfbf",
      "title": {
        "enabled": false
      },
      "lineWidth": "0",
      "labels": {
        "enabled": false
      },
     ...