[Chartjs]-Why would a ChartJS chart end up with width 0 and height 0?

by

7👍

I encountered the same problem the other day.
And I found that:

The parent of <canvas> is <answers-plot>, and the <answers-plot> ‘s width and height are 0. It seems that Chartjs resizes its chart according to the size of the parent element of <canvas> which causes the width and height of the canvas to be 0.

I used a <div> to wrap the <canvas> in my directive’s template and gave a non-zero size to the <div>
or
set the responsive (in Chartjs‘s options) to false, and the problem is solved.

1👍

I found similar behaviour with Aurelia (rather than Angular) – it didn’t like rending the chart inside an element with a custom name, in your case “answers-plot”. With Aurelia, I can just add “containerless” to my custom element and it works. I’m not sure with Angular directives – maybe replace:true, or transclude:true in the directive options?

0👍

The width and height attributes of the <canvas> element are unitless, so use:

template: '<canvas width="100" height="100" style="width:100px; !important height:100px; !important"></canvas>'

Leave a comment