diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.ts
index 800c831b67..4af7097944 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.ts
@@ -523,10 +523,11 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, OnChange
       const colorPickerPopover = this.popoverService.displayPopover(trigger, this.renderer,
         this.viewContainerRef, ColorPickerPanelComponent, ['leftTopOnly', 'leftOnly', 'leftBottomOnly'], true, null,
         {
-          color: key.color
+          color: key.color,
+          colorCancelButton: true
         },
         {},
-        {}, {}, true);
+        {}, {}, false, () => {}, {padding: '12px 4px 12px 12px'});
       colorPickerPopover.tbComponentRef.instance.popover = colorPickerPopover;
       colorPickerPopover.tbComponentRef.instance.colorSelected.subscribe((color) => {
         colorPickerPopover.hide();