JSFiddle - React, Tailwind, and code Playground

by vasagi

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/boost.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

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

JavaScript

// Generate a large dataset with 10000 data points
var data = [];
var startDate = Date.UTC(2022, 0, 1); // Start date
for (var i = 0; i < 10000; i++) {
    data.push([startDate + (i * 3600 * 1000), Math.random() * 100]); // Add data points with hourly intervals
}

Highcharts.chart('container', {
    chart: {
        type: 'flags',
        height: 400,
        width: 800
    },
    boost: {
        enabled: true,
        useGPUTranslations: true
    },
    title: {
        text: 'Highcharts Chart with Boost Module, Datetime X-Axis, and Large Data Points'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: 'Value'
        }
    },
    series: [{
        name: 'Series 1',
        data: data
    }]
});