Accessibility | Memory leak when accessibility module is linked

[michaelrodov]

Use case:
We have a page with 15-20 charts that are being refreshed every 3seconds
We are using the official "highcharts-react-official" react wrapper (but I reproduced this with vanilla HC as well)

Expected behavior

Dashboard should continue working for a long period of time (>12h)

Actual behavior

Dashboard crashes after 30 minutes (become not responsive even earlier)
CPU @ 100%, Dom nodes count is around 400000, JS heap ~ 1GB

Live demo with steps to reproduce

I will not post JSFiddle here because it loads the result inside iframe and its harder to trace
Take this code, and paste it inside a HTML page

HTML head

      <script src="https://code.highcharts.com/10.0.0/highcharts.js"></script>
      <script src="https://code.highcharts.com/10.0.0/modules/accessibility.js"></script>
      <script src="https://code.highcharts.com/modules/accessibility.js"></script>

HTML body

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

    <script type="text/javascript">
        const random = Math.random;

        for (let i = 0; i < 100; i++) {
            const chartDiv = document.createElement('div');
            document.getElementById('charts-container').appendChild(chartDiv);

            Highcharts.chart(chartDiv, {

                chart: {
                    plotBorderWidth: 5
                },

                series: [{
                    type: 'pie',
                    data: [2, 5, 2, 3, 6]
                }],
                accessibility: {
                    enabled: true
                }

            }, chart => {
                setInterval(function() {
                    chart.series[0].setData([random(), random(), random(), random(), random()]);
                    chart.update({
                        chart: {
                            plotBorderColor: '#' + Math.floor(random() * 16777215).toString(16)
                        }
                    });
                }, 1000)
            });
        }
    </script>

let it run for about 10 minutes
you will see that the number of nodes is growing rapidly, and the heap and CPU are growing as well.
and after about 30 minutes (number of nodes reaching 2 million, CPU @ 100% ) the page will crash!

After investigating this, I saw that there are lots of detached divs with this text "End of interactive chart" staying in the memory.
I guess things like this are the source of the memory leak.

I you remove Accessibility module, everything is working fine for days

Product version

Highcharts 11.2

Affected browser(s)

Chrome, Edge, FF

[karolkolodziej]

Hi @michaelrodov!

Thank you for reporting the issue!