From 00dcac0b9cf3af68f235eb2183738a660fcb09eb Mon Sep 17 00:00:00 2001
From: Noel De Martin <noel@moodle.com>
Date: Wed, 9 Jun 2021 12:16:06 +0200
Subject: [PATCH] MOBILE-3320 chart: Fix rendering null legend items

---
 src/core/components/chart/chart.ts        | 12 ++++++++++++
 src/core/components/chart/core-chart.html |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/core/components/chart/chart.ts b/src/core/components/chart/chart.ts
index 5021bd313..dbff890ca 100644
--- a/src/core/components/chart/chart.ts
+++ b/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.
diff --git a/src/core/components/chart/core-chart.html b/src/core/components/chart/core-chart.html
index c0f03eb55..f8b0b20f4 100644
--- a/src/core/components/chart/core-chart.html
+++ b/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>