In my component, I have 6 charts that I display via ngFor and the data I get it from Firebase, let me show you:

component.html

<div style="width: 550px; border-radius: 8px;"
         class="animacion mb-5 mat-elevation-z7 animate__animated animate__fadeInRight"
         [ngClass]="'animate__delay-'+i+'s'" *ngFor="let gerencia of arregloGerencias; let i = index">
            <div class="text-center mt-3">
                <h4>{{gerencia.nombre | titlecase}}</h4>

            </div>
            <hr>
            <canvas class="mb-5" baseChart (chartClick)="chartClicked($event)"
            [data]="arregloGrafico[i]" [labels]=" polarAreaChartLabels"
            [legend]="polarAreaLegend " [chartType]="polarAreaChartType ">

            </canvas>
        </div>

component.ts

for ( let i = 0; i < this.arregloGerencias.length; i++) {
                  let contadorListo = 0;
                  let contadorNoListo = 0;
                  for (let j = 0; j < arregloFinal.length; j++) {
                    if (arregloFinal[j].areaAux.gerencia == this.arregloGerencias[i].nombre) {
                      if (arregloFinal[j].marcador) {
                        contadorListo ++
                      } else  {
                        contadorNoListo ++
                      }
                    }
                  }
                  this.arregloGrafico.push([contadorListo, contadorNoListo]);
                  
                }

I use and array of arrays of numbers to get the data of every chart that is displayed, as you can see in the part of canvas [data]="arregloGrafico[i]" and this is what I've got:

As you can see, it only shows the last two charts properly and I don't know why that happens. What I've realized, is that the output is correct but the last two arrays shows different:

Please help !!