Chartjs-Angular chart js data no display data

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

enter image description here

Leave a comment