angular chart js data no display data

Question

hi guys im using chart js with angular i have the nomber of orders in every month in this exmple i have the nomber of orders in october and november and i want to put it in data chart

this.orderservice.listeOrder().subscribe (

      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
 
     })

and this is the code of chart js i want to put the value of nov and oc in data[]

 public lineChartData: ChartConfiguration<'line'>['data'] = {
    
    labels: [
      
      
      'October',
      'Novermber',
      'December'
     
    ],
    
    datasets: [
      {
        data:[this.oc,this.nov,5],
        
        label: 'Series A',
        fill: true,
        tension: 0.5,
        borderColor: 'black',
        backgroundColor: 'rgba(255,0,0,0.3)'
      }
    ]
  };
  public lineChartOptions: ChartOptions<'line'> = {
    responsive: false
  };
  public lineChartLegend = true;
  public lineChartType!: "line";

and thats my html code

          <h1> oc :{{oc}}</h1> 
           <h1> nov :{{nov}}</h1> 
           <div style="display: block;">
            <canvas baseChart width="800" height="400"
              [type]="'line'"
              [data]="lineChartData"
              [options]="lineChartOptions"
              [legend]="lineChartLegend">
            </canvas>
          </div>

and this is the result the value oc and nov worked in native display but in chart didnt works this is my first time using chart js someone tell me what i have to do

Answer 1

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