error with charts after redrawing

[lucamorelli]

Describe the bug
I copied the chart sample in a new page, and after pressing the redraw button a few times (sometime 3, sometimes more) I obtain this error in the log console

ncaught TypeError: Cannot read property 'transition' of null
    at ni.transition (chart.js@2.8.0:7)
    at ni.draw (chart.js@2.8.0:7)
    at ni.render (chart.js@2.8.0:7)
    at Object.callback (chart.js@2.8.0:7)
    at Object.advance (chart.js@2.8.0:7)
    at Object.startDigest (chart.js@2.8.0:7)
    at chart.js@2.8.0:7
Same problem updating to version 2.9.3 of chart.js

To Reproduce

1. copy the source code from https://blazorise.com/docs/extensions/chart/
2. press the redraw button over and over for a few times

[stsrki]

I believe think this is the issues for live charts? There is a problem with live charts when you go with mouse over the chart point. I'm already aware of the this but will need more time to debug.

[aunabidi]

@stsrki I just upgraded to Blazorise 0.9 and am seeing this issue on a page where I have 2 charts (not live). I initialize both charts in OnAfterRenderAsync firstRender with blank data and redraw them once more when the data is available. I am getting the "Cannot read property 'transition' of null" error on page load.

[stsrki]

@aunabidi Just to make sure. Can you refresh your browser by pressing Crtl+F5? It tends to use cached js files.

[aunabidi]

@stsrki I tried that as well. The error is in chart.js@2.8.0:7

[aunabidi]

@stsrki I have tried a bunch of different things but I can't get my charts to render. Any ideas?

[stsrki]

Really not sure. For ordinary charts everything works on my side. Can you guys create a small project and push it to github where I can debug it?

[aunabidi]

It works fine with static data. I am calling an API asynchronously to populate the data and the labels which is causing the issues I think. Have you tried rendering dynamic data and labels on a chart?

I will try to get you a test github project this weekend. Thanks a lot for you help!

[aunabidi]

@stsrki I have created a test github project where I recreated the issue. On the index page if you click on redraw a couple of times you will see that it throws the error message in the console. This is happening even without calling an API for dynamic data.

https://github.com/aunabidi/BlazoriseTest

[stsrki]

@aunabidi This is strange. When I run your project I can reproduce the error. Then I copy the same code into Blazorise demo and it works without any problem. I now must find what is the difference.

[aunabidi]

That is weird! Please let me know if you find the difference. Thanks a lot!

[aunabidi]

Hey @stsrki. Any luck finding a solution to this charts bug?

[stsrki]

Hi @aunabidi, sorry, it's being a busy weekend. So far I determined the problem occurs on server-side Blazor while on client-side it works without issues. I'm currently working on a different problem so I will need some time.

[aunabidi]

Not a problem @stsrki. Please let me know if you find a solution.

[aunabidi]

Hi @stsrki, did you get a chance to look at this issue? I am getting close to my deadline and would like to use some of the features and bug fixes you added in the new version. Thanks!

[stsrki]

I will start looking at it probably tomorrow and will reschedule it for 0.9.1.

[aunabidi]

Thank you! If you come across a workaround please let me know.

[stsrki]

So far it seems the problem is in chartjs itself. The error occurs when you overwrite the dataset almost immediately after you have initialized the graph.

I have found this apertureless/vue-chartjs#241 (comment)

Then I tried to disable animations and it seems to work now.

<LineChart @ref="lineChart" TItem="double" OptionsObject="new { animation = new { duration = 0 }, hover = new { animationDuration = 0 }, responsiveAnimationDuration = 0 }" />

[aunabidi]

That worked. Thanks @stsrki! When chartjs fixes their issue I can look at adding the animations back in.

[stsrki]

I've being investigating this all day.

This fails

So, if I separate each individual call when updating the chart data it will always fail at AddDataSet. But it is random. There is not any rule or reason why it should fail.

await chart.Clear();

await chart.AddLabel( Labels );

await chart.AddDataSet( /* some data */ );

await chart.Update();

This works

Then I tried to combine everything under just one operation so that everything is updated at once.

await chart.BulkDataSet( Labels, getDataSet() );

The same code, different result. Only diference is that second one is combined under the same function instead of having individual call for every operation.