diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.ts
index b4baf12dad..18ec18963f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.ts
@@ -16,7 +16,7 @@
 
 import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
-import { ColorRange } from '@shared/models/widget-settings.models';
+import { ColorRange, ColorRangeSettings } from '@shared/models/widget-settings.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
@@ -71,8 +71,8 @@ export class ColorRangePanelComponent extends PageComponent implements OnInit {
   }
 
   applyColorRangeSettings() {
-    const colorRangeSettings = this.colorRangeFormGroup.get('rangeList').value;
-    this.colorRangeApplied.emit(colorRangeSettings);
+    const colorRangeSettings: ColorRangeSettings = this.colorRangeFormGroup.get('rangeList').value;
+    this.colorRangeApplied.emit(colorRangeSettings.range);
   }
 
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts
index 0db430c943..54c8be65b8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts
@@ -131,9 +131,9 @@ export class ColorRangeSettingsComponent implements OnInit, ControlValueAccessor
         {},
         {}, {}, true);
       colorRangeSettingsPanelPopover.tbComponentRef.instance.popover = colorRangeSettingsPanelPopover;
-      colorRangeSettingsPanelPopover.tbComponentRef.instance.colorRangeApplied.subscribe((colorRangeSettings: ColorRangeSettings) => {
+      colorRangeSettingsPanelPopover.tbComponentRef.instance.colorRangeApplied.subscribe((colorRangeSettings: Array<ColorRange>) => {
         colorRangeSettingsPanelPopover.hide();
-        this.modelValue = colorRangeSettings.range;
+        this.modelValue = colorRangeSettings;
         this.updateColorStyle();
         this.propagateChange(this.modelValue);
       });