JSFiddle - React, Tailwind, and code Playground

by Guillaume Seguin

HTML

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

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

CSS

#container {
    height: 400px;
}

JavaScript

Highcharts.chart('container', {
  "title": {},
  "chart": {
    "width": 720,
    "height": 250,
    "type": "line",
    "spacingTop": 4,
    "spacingBottom": 0,
    "spacingLeft": 0,
    "spacingRight": 0
  },
  "credits": {
    "enabled": false
  },
  "legend": {
    "enabled": false
  },
  "tooltip": {
    "useHTML": false,
    "valuePrefix": "",
    "valueSuffix": " ",
    "valueDecimals": 0,
    "shared": true,
    "dateTimeLabelFormats": {
      "millisecond": "%A, %b %e, %H:%M:%S.%L",
      "second": "%A, %b %e, %H:%M:%S",
      "minute": "%A, %b %e, %H:%M",
      "hour": "%A, %b %e, %H:%M",
      "day": "%A, %b %e, %Y",
      "week": "Semaine du %A, %b %e, %Y",
      "month": "%B %Y",
      "year": "%Y"
    }
  },
  "yAxis": [
    {
      "title": {
        "text": null
      },
      "min": -100,
      "max": 100,
      "tickPositions": [
        -100,
        -75,
        -50,
        -30,
        0,
        30,
        50,
        75,
        100
      ],
      "opposite": true,
      "labels": {
        "zIndex": 1
      },
      "plotBands": [
        {
          "from": -10,
          "to": 10,
          "color": "#fff6e9",
          "label": {}
        }
      ],
      "plotLines": [
        {
          "value": -50,
          "color": "rgb(215, 48, 39)",
          "dashStyle": "ShortDot",
          "zIndex": 1
        },
        {
          "value": -10,
          "color": "rgb(215, 48, 39)",
          "dashStyle": "ShortDot",
          "zIndex": 1,
          "width": 2
        },
        {
          "value": 0,
          "color": "rgb(253, 174, 97)",
          "dashStyle": "ShortDot",
          "zIndex": 1
        },
        {
          "value": 10,
          "color": "rgb(26, 152, 80)",
          "dashStyle": "ShortDot",
          "zIndex": 1,
          "width": 2
        },
        {
          "value": 50,
          "color": "rgb(26, 152, 80)",
          "dashStyle": "ShortDot",
          "zIndex": 1
        }
      ]
    },
    {
     ...