CODEWITHSUNDEEP
javascriptcharts
asutherland
asutherland

Reputation: 2969

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

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 this:

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 the call to "new Chart" my canvas height and width are set to 0 as I can see in the inspector. When I comment out this call my canvas has the proper width/height and displays as one would expect. If I manually change the canvas height/width in the inspector my chart still doesn't display.

My "data" object is just what I cut and paste directly from their line chart example here: http://www.chartjs.org/docs/#line-chart-example-usage

Can anyone provide some insight on where I might be going wrong, I am completely new to the library.

Upvotes: 23

Views: 12699

Answers (4)

Maxo
Maxo

Reputation: 181

I found an option:

options: {
    responsive: false,
    ...

This makes conflict with default true. I don't know it works properly at the moment. Ofcourse set the width and height to the canvas and its parent.

Upvotes: 2

Stefan Rein
Stefan Rein

Reputation: 9036

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

Upvotes: 19

asutherland
asutherland

Reputation: 2969

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.

Upvotes: 15

Rob Johansen
Rob Johansen

Reputation: 5164

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.

Upvotes: 0

Related Questions