Chart.js: Cannot read property 'transition' of null / null is not an object (evaluating 'this.getDatasetMeta(e).controller.transition')

[PaulWieland]

Expected Behavior

It should be possible to initialize a chart with an empty dataset and then immediately populate it afterward.

Current Behavior

When creating a chart object with an empty dataset and then populating the dataset immediately afterward (such as from an ajax call), chartjs will encounter a javascript error.

The devil of this is that the error will only occur if the speed of the dataset population is done immediately after the chart object is created. I enabled caching on my back end ajax provider and chartjs stopped working - it turns out that the slow speed of my ajax provider was masking this problem.

In Safari the error is: null is not an object (evaluating 'this.getDatasetMeta(e).controller.transition')

In Chrome the error is: Cannot read property 'transition' of null

• Disabling animation on the chart solves this error.
• Rendering the chart immediately after populating the dataset also seems to solve the error, but neither should be required.

Steps to Reproduce (for bugs)

1. See fiddle: https://jsfiddle.net/s49pmgru/
2. Right click in the bottom right window and inspect to display your developer console in order to see the javascript error when running the fiddle.
3. Uncomment either the animation options or the myChart.update() line to make the error go away.

[kurkle]

Calling update is required after modifying data.
Documentation

[PaulWieland]

Hi @kurkle -
I was expecting chartJS to fail gracefully, not halt execution. In my opinion a JS library shouldn't throw a JS error like ChartJS does in this situation - instead it should fail gracefully. It took me hours to narrow down the cause.

Even more troubling is that the error only cropped up when I sped up my back end data source by enabling caching. When the datasource returned data from the SAP BW, it took upwards of 30 seconds for the Ajax call to complete. In this situation there was no JS error and everything worked fine. I then enabled better caching on the back end and suddenly my charts stopped rendering.

You can imagine my puzzlement.

[henon]

I can confirm that calling upate() on the chart after modifying the data solves this issue.