i have declared chart.js inside ng-template but chart is not rendering properly
<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
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