[Solved]-Why would a ChartJS chart end up with width 0 and height 0?-Chart.js

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

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?

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.