JSFiddle - React, Tailwind, and code Playground

by Guillaume Seguin

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

TypeScript

Highcharts.chart('container', {
  "title": {
    "text": ""
  },
  "chart": {
    "height": 110,
    "type": "boxplot",
    "inverted": true,
    "margin": [
      30,
      10,
      20,
      10
    ],
    "backgroundColor": "transparent",
    "events": {
      events: {
        render() {
          render(this);

        }
      }
    }
  },
  "credits": {
    "enabled": false
  },
  "legend": {
    "enabled": false
  },
  "tooltip": {
    "useHTML": true,
    "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": {
    "labels": {
      "enabled": false
    },
    "title": {
      "text": null
    },
    "plotLines": [],
    "height": 10,
    "gridLineColor": "#fff",
    "softMin": 6696.58,
    "softMax": 12234.222222222223
  },
  "xAxis": {
    "categories": [],
    "lineWidth": 0,
    "labels": {
      "enabled": false
    }
  },
  "plotOptions": {
    "boxplot": {
      "fillColor": "transparent",
      "lineWidth": 0,
      "medianWidth": 0,
      "stemColor": "#3AA74D",
      "stemDashStyle": "Solid",
      "stemWidth": 0,
      "whiskerWidth": 0
    },
    "series": {
      "stickyTracking": true
    }
  },
  "series": [{
      "type": "boxplot",
      "data": [
        [
          8010.74,
          8480.31,
          9678.91,
          11601.94,
          12056.45
        ]
      ],
      "animation": false,
      "enableMouseTracking": false
    },
    {
      "type": "scatter",
      "data": [
        [
          0,
          8480.31
        ],
        [
          0,
          8153.85
        ],
        [
          0,
          10235.71
        ],
        [
          0,
          9985.92
        ],
  ...