Highcharts chart not updating with new data

14 viewshighchartshtmljavascript
0

Problem description:

I am using the Highcharts library to create a chart. I want to update the chart data every second, but the chart is not updating. The console doesn’t show me any error. The chart is ok to be manually redraw.

Code:

    function updateChart() 
        {
            if (chart1 == undefined) {// I used to redraw the whole chart each time I update my data and it works fine
                chart1 = Highcharts.chart('hccont', {
                    chart:
                    {
                        type: 'column',
                        options3d: {
                            enabled: true,         
                            alpha: 5,               
                            beta: 5,                
                            depth: 55,
                        },
                        events: {
                            load: function () {
//the update() is called in debug each second but it doesn't actually do anything to my chart. no error shown in console.
                                setInterval(function () {
                                    chart1.update({
                                        series: [{
                                            data: count,
                                            name: 'Picked',
                                            showInLegend: false
                                        }],
                                        xAxis: {
                                            categories: studentsName,
                                            title: {
                                                text: 'Names'
                                            },
                                            labels: {
                                                skew3d: true
                                            }
                                        }
                                    });
                                }, 1000);
                            }
                        }
                    },
                    title: {
                        text: 'Statistic'
                    },
                    subtitle: {
                        text: 'Let's see who are picked the most.'
                    },
                    colors: generateColorArray("#31c1ff", "#ffa4ff", "#ff6464")
                    ,
                    xAxis: {
                        categories: studentsName,
                        title: {
                            text: 'Names'
                        },
                        labels: {
                            skew3d: true
                        }
                    },
                    yAxis: {
                        title: {
                            margin: 20,
                            text: 'Picked'
                        },
                        labels: {
                            skew3d: true
                        }
                    },
                    credits: { enabled: false },
                    navigation: {
                        buttonOptions: {
                            enabled: false
                        }
                    },
                    tooltip: {
                        headerFormat: '<b>{point.x} is Picked: {point.y} time(s)</b><br>'
                    },
                    plotOptions: {
                        series: {
                            depth: 25,
                            colorByPoint: true
                        }
                    },
                    series: [{
                        data: count,
                        name: 'Picked',
                        showInLegend: false
                    }]
                });
            }
            
        }

The var ‘count’,’studentsName’ are properly updated arrays. If I manually redraw the whole chart it works fine. But I don’t like the animation of redraw.

Additional information:

I am using Highcharts v11.2.0.
I am using the Edge browser.