diff --git a/ui-ngx/src/app/core/api/widget-subscription.ts b/ui-ngx/src/app/core/api/widget-subscription.ts
index 0eb71c7e90..bb594f0802 100644
--- a/ui-ngx/src/app/core/api/widget-subscription.ts
+++ b/ui-ngx/src/app/core/api/widget-subscription.ts
@@ -403,7 +403,7 @@ export class WidgetSubscription implements IWidgetSubscription {
         configDatasource: datasource,
         configDatasourceIndex: index,
         dataLoaded: (pageData, data1, datasourceIndex, pageLink) => {
-          this.dataLoaded(pageData, data1, datasourceIndex, pageLink, true)
+          this.dataLoaded(pageData, data1, datasourceIndex, pageLink, true);
         },
         initialPageDataChanged: this.initialPageDataChanged.bind(this),
         dataUpdated: this.dataUpdated.bind(this),
@@ -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 = [];
@@ -804,7 +804,7 @@ export class WidgetSubscription implements IWidgetSubscription {
         configDatasourceIndex: datasourceIndex,
         subscriptionTimewindow: this.subscriptionTimewindow,
         dataLoaded: (pageData, data1, datasourceIndex1, pageLink1) => {
-          this.dataLoaded(pageData, data1, datasourceIndex1, pageLink1, true)
+          this.dataLoaded(pageData, data1, datasourceIndex1, pageLink1, true);
         },
         dataUpdated: this.dataUpdated.bind(this),
         updateRealtimeSubscription: () => {
@@ -1149,7 +1149,7 @@ export class WidgetSubscription implements IWidgetSubscription {
         this.onSubscriptionMessage({
           severity: 'warn',
           message
-        })
+        });
       }
     }
     if (isUpdate) {
@@ -1274,7 +1274,7 @@ export class WidgetSubscription implements IWidgetSubscription {
     const configuredDatasource = this.configuredDatasources[datasourceIndex];
     const startIndex = configuredDatasource.dataKeyStartIndex;
     const dataKeysCount = configuredDatasource.dataKeys.length;
-    const index = startIndex + dataIndex*dataKeysCount + dataKeyIndex;
+    const index = startIndex + dataIndex * dataKeysCount + dataKeyIndex;
     let update = true;
     let currentData: DataSetHolder;
     if (this.displayLegend && this.legendData.keys[index].dataKey.hidden) {
@@ -1331,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);
     }
   }