chartjs-plugin-streaming: TypeError after unmounting chart

I have a <Line> chart in my React app. Since I updated chart.js to v4.0.1, I get the following error when I unmount my chart:

Uncaught TypeError: Cannot set properties of null (setting '_setStyle')
    at chartjs-plugin-streaming.esm.js:787:1
    at each (helpers.core.ts:149:1)
    at Chart.update (chartjs-plugin-streaming.esm.js:785:1)
    at chartjs-plugin-streaming.esm.js:601:1
    at callback (helpers.core.ts:109:1)
    at chartjs-plugin-streaming.esm.js:68:1

This error is triggered repeatedly and infinitely. It seems that some kind of timer has not been cleared.

Here’s my code:

<Line
  data={{datasets}}
  options={{
    scales: {
      x: {
        display: false,
        realtime: {
          delay: 1000,
          onRefresh: (chart) => {
            const x = Date.now();
            const y = getY();
            chart.data.datasets.forEach((dataset, i) => {
              dataset.data.push({
                x,
                y: y[i]
              });
            });
          }
        },
        type: 'realtime'
      },
      y: yOptions
    }
  }} />

About this issue

Original URL
State: open
Created 2 years ago
Comments: 22

Most upvoted comments

@Dola97 If you’re still interested, I forked the project and fixed this issue. I also bumped all dependencies versions.

https://www.npmjs.com/package/@robloche/chartjs-plugin-streaming

Robloche on Dec 20, 2022

If like me you don’t like to use something else than the official package (which seems unmaintained, Robloche is right), you can fix this issue with something like that:

const chart = ref<LineController | null>(null);

onBeforeUnmount(() => {
    if (chart.value !== null) {
        chart.value.chart.notifyPlugins('destroy');
        chart.value.chart.destroy();
    }
});

kogratte on Mar 21, 2023

I’ve just released v3.1.0 which includes your fix.

Robloche on Mar 9, 2023

For some reason, I wasn’t notified of these waiting PR… I merged yours, thanks!

Robloche on Mar 9, 2023

Looking at the code of this plugin and chartjs, it seems that the plugin uses a deprecated event to clean everything: destroy. From Chartjs’ doc, it appears the correct event is now: afterDestroy.

Robloche on Dec 20, 2022

Yes, that’s obviously what I did. But that’s not sustainable.

Robloche on Dec 9, 2022