diff --git a/ui-ngx/src/app/core/api/widget-subscription.ts b/ui-ngx/src/app/core/api/widget-subscription.ts
index df5fac2e9a..bb594f0802 100644
--- a/ui-ngx/src/app/core/api/widget-subscription.ts
+++ b/ui-ngx/src/app/core/api/widget-subscription.ts
@@ -575,7 +575,7 @@ export class WidgetSubscription implements IWidgetSubscription {
 
   updateDataVisibility(index: number): void {
     if (this.displayLegend) {
-      const hidden = this.legendData.keys[index].dataKey.hidden;
+      const hidden = this.legendData.keys.find(key => key.dataIndex === index).dataKey.hidden;
       if (hidden) {
         this.hiddenData[index].data = this.data[index].data;
         this.data[index].data = [];
@@ -1226,6 +1226,9 @@ export class WidgetSubscription implements IWidgetSubscription {
         });
       });
     }
+    if (this.displayLegend) {
+      this.legendData.keys = this.legendData.keys.sort((key1, key2) => key1.dataKey.label.localeCompare(key2.dataKey.label));
+    }
     if (this.caulculateLegendData) {
       this.data.forEach((dataSetHolder, keyIndex) => {
         this.updateLegend(keyIndex, dataSetHolder.data, false);
@@ -1328,7 +1331,7 @@ export class WidgetSubscription implements IWidgetSubscription {
   }
 
   private updateLegend(dataIndex: number, data: DataSet, detectChanges: boolean) {
-    const dataKey = this.legendData.keys[dataIndex].dataKey;
+    const dataKey = this.legendData.keys.find(key => key.dataIndex === dataIndex).dataKey;
     const decimals = isDefined(dataKey.decimals) ? dataKey.decimals : this.decimals;
     const units = dataKey.units && dataKey.units.length ? dataKey.units : this.units;
     const legendKeyData = this.legendData.data[dataIndex];
diff --git a/ui-ngx/src/app/modules/home/components/widget/legend.component.html b/ui-ngx/src/app/modules/home/components/widget/legend.component.html
index 3d0eda2856..272e5fae64 100644
--- a/ui-ngx/src/app/modules/home/components/widget/legend.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/legend.component.html
@@ -32,7 +32,7 @@
         <td><span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span></td>
         <td class="tb-legend-label"
             (click)="toggleHideData(legendKey.dataIndex)"
-            [ngClass]="{ 'tb-hidden-label': legendData.keys[legendKey.dataIndex].dataKey.hidden, 'tb-horizontal': isHorizontal }">
+            [ngClass]="{ 'tb-hidden-label': legendKey.dataKey.hidden, 'tb-horizontal': isHorizontal }">
           {{ legendKey.dataKey.label }}
         </td>
         <td class="tb-legend-value" *ngIf="legendConfig.showMin === true">{{ legendData.data[legendKey.dataIndex].min }}</td>
@@ -47,7 +47,7 @@
         <span class="tb-legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span>
         <span class="tb-legend-label"
               (click)="toggleHideData(legendKey.dataIndex)"
-              [ngClass]="{ 'tb-hidden-label': legendData.keys[legendKey.dataIndex].dataKey.hidden}">
+              [ngClass]="{ 'tb-hidden-label': legendKey.dataKey.hidden}">
                   {{ legendKey.dataKey.label }}
         </span>
       </td>
diff --git a/ui-ngx/src/app/modules/home/components/widget/legend.component.ts b/ui-ngx/src/app/modules/home/components/widget/legend.component.ts
index b47ba317c0..55fffa2b5b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/legend.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/legend.component.ts
@@ -52,8 +52,9 @@ export class LegendComponent implements OnInit {
   }
 
   toggleHideData(index: number) {
-    if (!this.legendData.keys[index].dataKey.settings.disableDataHiding) {
-      this.legendData.keys[index].dataKey.hidden = !this.legendData.keys[index].dataKey.hidden;
+    const dataKey = this.legendData.keys.find(key => key.dataIndex === index).dataKey;
+    if (!dataKey.settings.disableDataHiding) {
+      dataKey.hidden = !dataKey.hidden;
       this.legendKeyHiddenChange.emit(index);
     }
   }