Charts.js sets canvas width / height to 0 and doesn't display anything

Question

I am trying to use Charts.js to make a default line chart, which they show in my example dynamically, and put it in a div, which I click on the user clicks. My code is as follows:

this.chartCanvas = document.createElement('canvas');
this.div.appendChild(this.chartCanvas);
this.chartCanvas.style.height = '480px';
this.chartCanvas.style.width = '900px';
this.chartCanvas.width = 900;
this.chartCanvas.height = 480;
this.ctx = this.chartCanvas.getContext('2d');

this.chart = new Chart(this.ctx).Line(data);

When I make a call to the “new chart”, the height and width of the canvas are 0, as I can see in the inspector. When I comment on this call, my canvas has the correct width / height and displays as expected. If I manually change the height / width of the canvas in the inspector, my chart is still not showing.

My “data” object is what I cut and paste directly from my line chart example: http://www.chartjs.org/docs/#line-chart-example-usage

- , , .

Answer 1

, , , , , , .

, div, , .

div, , div, .

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';

, 40, .

Answer 2

CSS display: block;

Answer 3

Your code works, except for a typo. This line ...

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

... should be as follows:

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

And here the JS script with this typo is fixed: http://jsfiddle.net/dun5dhne/

In addition, I highly recommend opening the browser developer console in case of problems. These things are easy to catch in the console.