Error message in my console by using VueJs and chartJS

[ascrutae]

Expected Behavior

the width and height of the chart can dynamic changed and the chart can display

Current Behavior

the chart cannot display and error message in my console:
here is the message log:

TypeError: t is null
r@file:///chart.js/dist/Chart.min.js:13:21546
addEventListener@file:///chart.js/dist/Chart.min.js:13:22670
bindEvents@file:///chart.js/dist/Chart.min.js:11:30145
initialize@file:///chart.js/dist/Chart.min.js:11:23797
construct@file:///chart.js/dist/Chart.min.js:11:23594

Steps to Reproduce (for bugs)

Here is my example:http://jsfiddle.net/ascrutae/0vrmtvd5/5/

Environment

• Chart.js version: 2.6.0

[etimberg]

@simonbrunel was this fixed by #4591 ?

[ascrutae]

@etimberg Thanks for your response. Could you tell me that this issue will fixed in the next version or how can I fixed this issue on 2.6.0?

[simonbrunel]

@etimberg I'm not sure, I will need more context to confirm.
@ascrutae Your fiddle doesn't work, can you fix it? Can you also post the error message using Chart.js instead of Chart.min.js, it will give us more information about what is t and r.

[ascrutae]

@simonbrunel
Here is the work fiddle:
http://jsfiddle.net/ascrutae/0vrmtvd5/10/

you can change the responsive value to true, and you will found the following message on you console.Here is the error message:

TypeError: node is null
addResizeListener@https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js:9813:4
addEventListener@https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js:9916:5
bindEvents@https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js:4441:5
initialize@https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js:3858:4
construct@https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js:3843:4
Chart@https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js:6340:3
bind@http://fiddle.jshell.net/_display/:87:19
callHook$1@https://unpkg.com/vue:5741:7
_update@https://unpkg.com/vue:5666:7
updateDirectives@https://unpkg.com/vue:5647:5
invokeCreateHooks@https://unpkg.com/vue:5225:7
createElm@https://unpkg.com/vue:5116:11
createChildren@https://unpkg.com/vue:5209:9

[simonbrunel]

@ascrutae The problem is that you create a Chart on a canvas which is not attached to the DOM. It should be fixed now, you can verify with this development build.

I don't know Vue.js but maybe a better approach would be to create the chart when the node is inserted and destroy it on remove:

Vue.directive('demo', {
    bind: function() {
        this.config = {
            type: 'line',
            data: { /*...*/ },
            options: { /*...*/ }
        };
    },

    inserted: function(el) {
    	this.chart = new Chart(el, this.config);
    },

    // would do that in a `removed` hook, but doesn't seem to exist
    unbind: function() {
        this.chart.destroy();
        this.chart = null;
    }
});

[simonbrunel]

Duplicate #3790, fixed by #4591

[ascrutae]

Thanks for you suggest. it works. BTW, Is this bug will fixed in next version? and when is the next version released?

[simonbrunel]

It will be fixed in the next version, no release date decided yet.

[simonbrunel]

Though, you don't need that fix if you opt for the suggested approach and instantiate the chart in the inserted hook.

[ascrutae]

@simonbrunel , you are awesome, it works, Thanks very much!