TypeError after unmounting chart

[Robloche]

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
    }
  }} />

[Robloche]

Is this project even maintained?

[Dola97]

Did You Find Any Solution @Robloche

[Robloche]

Unfortunately, no. I'd like to give a try at fixing it myself but I'm afraid there would be nobody to approve my PR... 😔

[Dola97]

I find a temporary solution just downgrade the chart js version and it will work

[Robloche]

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

[Robloche]

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]

@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

[Dola97]

Thanks Appreciate it 😍😍

[SID9-HoneyBee]

@Robloche You are referring to the 3.0.4 version you are working on.

could you please help me?

Even the 2.0.0 version has the same problem.

I made a sample using simple chart.js and chartjs-plugin-streaming.

When I hover over the chart, I get Cannot read properties 'getDatasetMeta' error.

Have you ever had this experience?

This happens when using the latest version(4.*) of chart.js .

[Robloche]

@Robloche You are referring to the 3.0.4 version you are working on. could you please help me? Yes. Since this project does not seem to be maintained any longer, I forked it and fixed the destroy issue.

Even the 2.0.0 version has the same problem. I made a sample using simple chart.js and chartjs-plugin-streaming. When I hover over the chart, I get Cannot read properties 'getDatasetMeta' error. Have you ever had this experience? Nope, sorry. I don't use this feature.

If you want to give it a try, fix it and create a PR on my forked project.

[SID9-HoneyBee]

@Robloche Thank you for answer. I don't have the experience of forking a project and modifying and applying it yet. But I'll give it a try with your 3.0.4 version.

[Robloche]

You don't have to fork it. Just clone my forked project, fix your issue, and submit a pull request. Or at least, tell me what to change and I'll do the PR myself.

[SID9-HoneyBee]

@Robloche I forked your project.

I am using chart.js 4.1.1 version and also using vue-chartjs.

Your repo has a closed issues section.

So we communicate here.

The realtime chart works fine, but the tooltip doesn't appear when I hover over it, and it says getDatasetMeta is undefined.

And I reproduced and corrected the problem.

Can I add a branch and request a PR?

[Robloche]

Sure.

[Robloche]

(I opened the "issues" section, btw.)

[jsteenkamp]

@Robloche - thanks for fixing this issue with your fork.

There are 2 PRs on your fork that fix tooltips - without tooltip fix installing your fork fixes the unmount problem but breaks ChartJS tooltips.

[Robloche]

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

[jsteenkamp]

@Robloche many thanks

[Robloche]

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

[kogratte]

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();
    }
});

[thangnq1007]

For now, we were using Chartjs 3.9.1 and it still has that problem. @Robloche can you help me?

[Robloche]

For now, we were using Chartjs 3.9.1 and it still has that problem. @Robloche can you help me?

I'm sorry but I don't work on this project. I simply forked it to make fix a bug for my own use. I suggest you do the same if you really need something to be done.