0๐
โ
I fix that problem the issue is that the chart is being rendered before the data from the subscription is available so i make chart only rendred after the data has been received i set el boolean variable just like that
dataReceived = false;
commande => {
this.orders = [...commande];
this.oc = this.orders.filter(item => item.dateCreated && new Date(item.dateCreated).getMonth() === 9).length
this.nov = this.orders.filter(item => item.dateCreated && new Date(item.dateCreated).getMonth() === 10).length
this.dataReceived = true;
this.lineChartData.datasets[0].data = [this.oc, this.nov, 5]
})
And in html i added a ngif directive to only render the chart when the data is available
<div *ngIf="dataReceived">
<canvas baseChart width="800" height="400"
[type]="'line'"
[data]="lineChartData"
[options]="lineChartOptions"
[legend]="lineChartLegend">
</canvas>
</div>
and its world as u can see
sorry for being late i just notice now that the question still open
Source:stackexchange.com