JSFiddle - React, Tailwind, and code Playground

by vasagi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<div id="container"></div>

JavaScript

const data = [];
for (let i = 0; i < 200000; i++) {
    const date = new Date(2024, 0, 1 + i);
    data.push([date.getTime(), Math.random() * 100, Math.random() * 100]);
}
$(function () {
    $('#container').highcharts({
    "chart": {
        "type": "",
        "styledMode": false,
        "width": null,
        "height": 200,
        "marginTop": 60,
        "marginRight": 100,
        "className": "vertical-chart line-chart points-no-fill highcharts-multiple-series",
        "zooming": {
            "mouseWheel": {
                "enabled": false
            }
        },
        "events": {},
        "resetZoomButton": {
            "position": {
                "x": 100,
                "y": 10
            },
            "relativeTo": "chart"
        },
        "zoomType": "x"
    },
    "boost": {
        "enable": true,
        "useGPUTranslations": false
    },
    "exporting": {
        "enabled": false,
        "fallbackToExportServer": false
    },
    "title": {
        "text": ""
    },
    "xAxis": {
        "gridLineWidth": 0,
        "gridLineDashStyle": "Solid",
        "gridLineColor": "#eeeeee",
        "className": "gridLineStyledMode",
        "type": "datetime",
        "crosshair": {
            "color": "#0000",
            "dashStyle": "dash",
            "label": {
                "backgroundColor": "#666666"
            }
        },
        "minTickInterval": 60000,
        "minRange": 300000,
        "categories": false,
        "title": {
            "text": "",
            "y": 5
        },
        "labels": {
            "style": "",
            "useHTML": false,
            "rotation": 0
        },
        "events": {},
        "tickPixelInterval": 150,
        "dateTimeLabelFormats": {
            "day": "%Y/%m/%d",
            "month": "%Y/%m/%d",
            "week": "%Y/%m/%d",
            "year": "%Y/%m/%d",
            "second": "%H:%M",
            "minute": "%H:%M",
            "hour": "%H:%M"
        }
    },
    "yAxis":...