CODEWITHSUNDEEP
javascriptangulartypescriptchart.js
Kumaresan Sd
Kumaresan Sd

Reputation: 1516

chart.js not getting rendered inside ng-template in angular

description

i have declared chart.js inside ng-template but chart is not rendering properly

sample code

<div style="display: block; width: 100%">
  <ng-container *ngTemplateOutlet="qualitySurveyTemp"></ng-container>
</div>

<ng-template #qualitySurveyTemp>
  <canvas id="canvas">{{ chart }}</canvas>
</ng-template>

it is working fine when i use like below

<div style="display: block; width: 100%">
  <canvas id="canvas">{{ chart }}</canvas>
</div>

sample - https://stackblitz.com/edit/angular-chartjs-barchart-sjamlr?file=src%2Fapp%2Fapp.component.html

Upvotes: 1

Views: 1255

Answers (2)

Temo Kiknadze
Temo Kiknadze

Reputation: 367

Try updating your template and wrap your canvas-element inside a div. Don't know the cause to it but the problem seems to appear when the canvas-element is at the root of the template html.

Upvotes: 0

LeeLenalee
LeeLenalee

Reputation: 31401

It seems like that because you are using trying to plot the chart in a sub template it is not available known in the ngOnInit hook. You can see this by trying to log document.getElementById('canvas'), this will return null. If you change to the ngAfterViewInit hook to create the chart it works fine:

https://stackblitz.com/edit/angular-chartjs-barchart-uqqnay?file=src%2Fapp%2Fapp.component.ts

Upvotes: 2

Related Questions