En mi componente, tengo 6 gráficos que muestro a través de ngFor y los datos que obtengo de Firebase, déjame mostrarte:

componente.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>

componente.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]); }

Uso un arreglo de arreglos de números para obtener los datos de cada gráfico que se muestra, como pueden ver en la parte de canvas [data]="arregloGrafico[i]" y esto es lo que tengo:

Como puede ver, solo muestra los dos últimos gráficos correctamente y no sé por qué sucede eso. De lo que me di cuenta es que la salida es correcta, pero las dos últimas matrices se muestran diferentes:

Por favor ayuda !!