Chart.js v3 after using of zoom plugin instance persist in memory

Question

I recently switched Chart.js from v2.x to 3.x. I also use the chartjs-plugin-zoom 1.0.1 which is compatibile with version v3.x. My situation is this I have SPA with some tabs, on one tab are the charts, between them line chart and for this one I use the zoom plugin, because data are usually huge. My options looks like

this._options = {
            animation: false,
            responsive: true,
            tooltips: {
                mode: 'nearest',
                intersect: false
            },
            maintainAspectRatio: false,
            legend:
            {
               display: false
            },
            scales: {
                x: 
                {  
                    title:
                    {
                        display: true,
                        text: `Message order`
                    },
                },
                y: 
                {  
                    title:
                    {
                        display: true,
                        text: `log10 of time difference`
                    },
                }
            },
            plugins: {
                legend: {
                    display: false
                },
                zoom: {
                    zoom: {
                      wheel: {
                        enabled: true,
                      },
                      drag: 
                      {
                          enabled: true,
                          borderWidth: 1
                      },
                      mode: 'x',
                    }
                },
                decimation: {
                    enabled: true
                }
            }
        };

When I transit from page with charts to another, this is called for cleaning:

if (this._chart)
{
    this._chart.options.onClick = null;
    //desperate attempt to save situation
    this._chart.options.plugins = null;
    this._chart.clear();
    this._chart.destroy();
}

I expected that destroy do everything necessary from memory perspective. For version 2 it is working, but here I observe strange behavior. When I switch from chart page to another and inspect memory I saw LineController(object asociated with chart.js) between objects. When I switch back to chart page and then again to another memory consumption raise and count of LineController too.

What i find out is this, when I comment the zoom plugin from options

zoom: {
                    zoom: {
                      wheel: {
                        enabled: true,
                      },
                      drag: 
                      {
                          enabled: true,
                          borderWidth: 1
                      },
                      mode: 'x',
                    }
                }

Everything is working again, no more raising LineControll instances no visible memory consumption raise between pages switching. But this plugin is necessary for me, so commenting out is not good option. I tried manually set plugins for chart to null:

this._chart.options.plugins = null;

But this not solve the memory problem. Has anybody face such condition?

Answer 1

From what I find out problem was at chartjs-plugin-zoom 1.0.1. Some event listeners where not unsubscribed corretly which lead to observed memory leak. This issue was addressed at Fix removing event listeners.

This fix is included at chartjs-plugin-zoom 1.1.0. After repeat the same scenario with this version I not more observe the problem.