MOBILE-3320 chart: Fix rendering null legend items

src/core/components/chart/chart.ts

@@ -57,6 +57,7 @@ export class CoreChartComponent implements OnDestroy, OnInit, OnChanges {
     @ViewChild('canvas') canvas?: ElementRef<HTMLCanvasElement>;
 
     chart?: ChartWithLegend;
+    legendItems: ChartLegendLabelItem[] = [];
 
     /**
      * @inheritdoc
@@ -105,6 +106,8 @@ export class CoreChartComponent implements OnDestroy, OnInit, OnChanges {
             },
             options: { legend },
         });
+
+        this.updateLegendItems();
     }
 
     /**
@@ -126,6 +129,8 @@ export class CoreChartComponent implements OnDestroy, OnInit, OnChanges {
         };
         this.chart.data.labels = this.labels;
         this.chart.update();
+
+        this.updateLegendItems();
     }
 
     /**
@@ -179,6 +184,13 @@ export class CoreChartComponent implements OnDestroy, OnInit, OnChanges {
         }
     }
 
+    /**
+     * Recompute legendItems property.
+     */
+    protected updateLegendItems(): void {
+        this.legendItems = (this.chart?.legend?.legendItems ?? []).filter(item => !!item);
+    }
+
 }
 
 // For some reason the legend property isn't defined in TS, define it ourselves.

src/core/components/chart/core-chart.html

@@ -1,7 +1,7 @@
 <canvas #canvas [attr.height]="height"></canvas>
 
 <ion-list *ngIf="chart">
-    <ion-item *ngFor="let data of chart.legend!.legendItems">
+    <ion-item *ngFor="let data of legendItems">
         <ion-icon name="fas-square" slot="start" [style.color]="data.fillStyle" aria-hidden="true"></ion-icon>
         <ion-label>{{data.text}}</ion-label>
     </ion-item>