1๐
Tab contents of mat-tabs can be lazy loaded by declaring the body in a ng-template with the matTabContent attribute. Additionally each chart should has its own canvas/context (property canvasID):
<mat-tab *ngFor="let store of stores" label="{{store.store_code}}">
<ng-template matTabContent>
<app-store-dash-board [store_code]="store.store_code" [canvasId]="store.canvasId"></app-store-dash-board>
</ng-template>
</mat-tab>
-1๐
U must create the canvas with Id and get the context when the component is loading.
import { Chart } from 'chart.js';
// Variables
canvas: any;
ctx: any;
// Chart de Chart.Js
chart: any;
ngAfterViewInit() {
this.canvas = document.getElementById('my_canvas');
this.ctx = this.canvas.getContext('2d');
this.createChart();
}
private createChart() {
this.chart = new Chart(this.ctx, {
type: 'bar',
data:,
options,
});
}
Try to use ngAfterViewInit so the component dont try to get the context before the DOM is loaded.
- [Chartjs]-Chart.js is not rendered until zoom in in angular 8
- [Chartjs]-Chart.js update function (chart,labels,data) will not update the chart
Source:stackexchange.com