Error when canvas is null using Chart.js in Angular 2

[andreas-aeschlimann]

Using TypeScript/Angular 2, I have an issue with Chart.js when the data of the chart is changing.

To be more precise, Chart.js does not like the fact that I temporarily hide the canvas while data is loading. You might wonder why I do that. Well, in Angular 1/2 it is quite "normal" to use conditionals as follows:

<canvas *ngIf="chart.hasValidData" ...></canvas>

I found out that Chart.js has problems with that because Angular 2 is suddenly removing the canvas from the DOM. Here is one of the errors that I see:

Uncaught TypeError: Cannot set property 'width' of null
    at Chart.Controller.resize (eval at webpackJsonp.1314.module.exports (addScript.js:9), <anonymous>:8398:30)
    at eval (eval at webpackJsonp.1314.module.exports (addScript.js:9), <anonymous>:8332:24)
    at eval (eval at webpackJsonp.1314.module.exports (addScript.js:9), <anonymous>:10308:36)

The error was raised, but the chart was still working even later. I was able to mute the errors by the following workarounds:

resize: function(silent) {
    [...]
    if (chart.width === newWidth && chart.height === newHeight) {
        return;
    } else if (canvas === null) { // new check to prevent problems
        return;
    }

helpers.getMaximumWidth = function(domNode) {
    if (domNode === null) return 0; // new check to prevent problems
    [...]
};

helpers.getMaximumHeight = function(domNode) {
    if (domNode === null) return 0; // new check to prevent problems
    [...]
};

It would be nice if you considered including this fix in a later release.

[etimberg]

@andreas-aeschlimann could you put together a test case for this so that we can debug as well?

[madmoizo]

If chart.hasValidData is false, the canvas element is removed from the DOM as you said. Your chart directive on canvas element is destroyed as well but the Chart itself is not destroyed
So maybe try to implement the ondestroy method in your chart directive and call yourchart.destroy() into it (where yourchart is the ref to new Chart(...)
https://angular.io/docs/ts/latest/api/core/index/OnDestroy-class.html

[etimberg]

Closing since @frlinw has the correct answer. When the chart is destroyed, you need to call the destroy() method on the chart