JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.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>

JavaScript

Highcharts.chart('container', {
  "chart": {
    "backgroundColor": "#000",
    "type": "spline",
    "zoomType": "x"
  },
  "accessibility": {
    "enabled": false
  },
  "credits": {
    "enabled": false
  },
  "legend": {
    "enabled": true,
    "itemStyle": {
      "color": "#ffffff"
    }
  },
  "rangeSelector": {
    "enabled": false
  },
  "navigator": {
    "enabled": false
  },
  "scrollbar": {
    "enabled": false
  },
  "xAxis": {
    "categories": ["Apr 2, 2024", "Apr 3, 2024", "Apr 4, 2024", "Apr 5, 2024", "Apr 6, 2024", "Apr 7, 2024", "Apr 8, 2024", "Apr 9, 2024", "Apr 10, 2024", "Apr 11, 2024", "Apr 12, 2024", "Apr 13, 2024", "Apr 14, 2024", "Apr 15, 2024", "Apr 16, 2024", "Apr 22, 2024", "Apr 17, 2024", "Apr 26, 2024", "Apr 27, 2024", "Apr 29, 2024", "Apr 30, 2024"],
    tickInterval: 2,
    "labels": {
      "style": {
        "color": "#ffffff"
      }
    },
    "lineColor": "#ffffff",
    "lineWidth": 3
  },
  "yAxis": [{
    "gridLineColor": "#000",
    "lineColor": "#fff",
    "lineWidth": 3,
    "labels": {
      "style": {
        "color": "#fff"
      }
    },
    "title": {
      "text": ""
    },
    "opposite": false
  }, {
    "title": {
      "text": "",
      "color": "#fff"
    },
    "opposite": true,
    "gridLineColor": "#000",
    "lineColor": "#fff",
    "lineWidth": 3,
    "labels": {
      "style": {
        "color": "#fff"
      }
    }
  }],
  "tooltip": {
    "backgroundColor": "#283347",
    "style": {
      "color": "#fff"
    },
    "shared": true,
    "useHTML": true
  },
  "plotOptions": {
    "series": {
      "fillOpacity": 0,
      "marker": {
        "enabled": false,
        "states": {
          "hover": {
            "enabled": true
          }
        }
      }
    }
  },
  "series": [{
    "name": "visits",
    "data": [{
      "name": "Apr 2, 2024 8:00 PM",
      "y": 2182294
    }, {
      "name": "Apr 3, 2024 8:00 PM",
      "y": 2139585
    }, {
      "name": "Apr 4, 2024 8:00 PM",
      "y": 2104361
  ...