Highcharts.JS deleting data and freezing browser

Question

I'm retrieving data from Firebase RealTime Database. I need to get the values in a chart so I decided to use highchart.js. Could someone please explain to me why the oldest values in my chart are getting deleted? I use highcharts stocks. I tried to add a scroll bar so I can see all the values but it's not working. I also don't understand why my browser is freezing when I load the chart... I do think it's because I load the chart when I'm refreshing the browser but it's weird because I only show 200 values at most for now.

Thanks a lot !

Code in main.js :

     // function to plot values on charts
function plotValues(chart, timestamp, value) {
    var x = epochToJsDate(timestamp).getTime();
    var y = Number(value);
    if (chart.series[0].data.length > 40) {
        chart.series[0].addPoint([x, y], true, false, true); //If you want a point limit: 1) Change the "40" to the limit you want and put "true" instead of "false
    } else {
        chart.series[0].addPoint([x, y], true, false, true);
    }

    chartALM = createALMChart();
    
     dbRef.orderByKey().on('child_added', snapshot => {
                    var jsonData = snapshot.toJSON(); 
                    // Save values on variables
                    var Défaut_communication_automate = jsonData.Défaut_communication_automate;
                    var timestamp = jsonData.timestamp;
                    // Plot the values on the charts
                    plotValues(chartALM, timestamp, Défaut_communication_automate);
                    });

   

Code in charts-definition.js :

    // Create the charts when the web page loads
    window.addEventListener('load', onload);    
    
    function onload(event) {
        chartALM = createALMChart();
    // Create ALM Chart
    function createALMChart() {
        
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart-ALM',
                type: 'spline'
            },
            rangeSelector: {
                enabled: true,
                height: 100,
                allButtonsEnabled: true,
                buttons: [{
                   {
                    type: 'year',
                    count: 1,
                    text: 'Week',
                    dataGrouping: {
                        forced: true,
                        units: [['week', [1]]]
                    }
                }, {
                    type: 'all',
                    text: 'Month',
                    dataGrouping: {
                        forced: true,
                        units: [['month', [1]]]
                    }
                }],
                buttonTheme: {
                    width: 60
                },
                selected: 2
            },
            series: [{
                name: 'ALM',
                
                showInNavigator: true
            },{
                name: 'ATRE'
            }],
            title: {
                text: undefined
            },
            plotOptions: {
                series: {
                   
                },
                line: {
                    animation: false,
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: { second: '%H:%M:%S' },
                scrollbar: {
                    enabled: true
                  }
    
            },
            yAxis: {
                title: {
                    text: 'Défaut communication automate'
                }
            },
            credits: {
                enabled: true
            }
        });
        return chart;
    }

Answer 1

When it comes to freezing the browser, try to close your onload() function and then add the createALMChart() function.

function onload(event) {
    chartALM = createALMChart();
}

function createALMChart() {  
    var chart = new Highcharts.Chart({
       (...)
    });
    return chart;
}