Highcharts Demo

author(s): Torstein Hønsi

by vasagi

HTML

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

JavaScript

function getData(n) {
    const arr = [];
 for (let i = 0; i < n; i += 1) {
 const point = 
    arr.push([
        Date.UTC(2023, 0, i + 1),
        Math.pow(Math.random(), 2) * 90 + 5
    ],[
        Date.UTC(2023, 0, i + 1),
        Math.pow(Math.random(), 2) * 90 + 5
    ]);
    console.log(arr);
}

    return arr;
}

function getSeries(n, s) {
    let i = 0;
    const r = [];

    for (; i < s; i++) {
        r.push({
            data: getData(n),
          type: 'scatter',
        color: 'red',
            boostThreshold: 10000
        });
    }

    return r;
}

const n = 700,
    s = 1,
    series = getSeries(n, s);
   
   


console.time('line');
Highcharts.chart('container', {

    chart: {
    type:'scatter',
        zooming: {
            type: 'x'
        }
    },

    title: {
        text:
            'Highcharts drawing ' + (n * s) + ' points across ' + s + ' series'
    },

    legend: {
        enabled: false
    },

    boost: {
        useGPUTranslations: true
    },

    xAxis: {
       type:'datetime',
        ordinal: false
    },

    navigator: {
        xAxis: {
            ordinal: false,
            min: 0,
            max: 10
        }
    },

    // yAxis: {
    //     min: 0,
    //     max: 8
    // },

    subtitle: {
        text: 'Using the Boost module'
    },

    tooltip: {
        valueDecimals: 2
    },

    series: series,
        plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                pointFormat: ''
            },
            cluster: {
                enabled: true,
                minimumClusterSize: 3,
                allowOverlap: false,
                layoutAlgorithm: {
                    type: 'grid',
                    gridSize: 50
                },
                dataLabels: {
                    style: {
                        fontSize: '8px'
                    },
                    y: -1
                },
                zones: [{
                   ...