Charts.js sets canvas width/height to 0 and displays nothing

Question

I am trying to use Charts.js to make the default line plot that they show in their example dynamically and put it in a div that I pop up on a user click. My code is like th

Answer 1

Your code works, with the exception of a typo. This line...

this.chartCanvs.style.width = '900px';

...should be this:

this.chartCanvas.style.width = '900px';
//            ^ your code is missing this 'a'

And here's a JS Fiddle with that typo fixed: http://jsfiddle.net/dun5dhne/

Also, I strongly recommend opening your browser's developer console when you run into problems. This kind of thing is easy to catch in the console.

Answer 2

It appears that the issue is that the canvas and all its parent nodes cannot have display none at the time the chart call is made so if you are using a chart in a popup you need to show the popup, construct the chart and then hide the popup.

As this Fiddle shows, if you try and construct a chart in a hidden div and then show it on a timeout it does not work.

If you instead show the div, make the chart and then hide the div, it does work.

http://jsfiddle.net/bjudheoq/4/

//This will break it
//this.div.style.display = 'none';
this.chart = new Chart(this.ctx).Line(data);
this.div.style.display = 'none';

The above fiddle works, but if you uncomment line 40 it does not.

Answer 3

In my case the canvas needed to be wrapped inside an element with the CSS display: block;