diff --git a/application/src/main/data/json/system/widget_types/compass.json b/application/src/main/data/json/system/widget_types/compass.json
index 79e92d7d57..a44887f49f 100644
--- a/application/src/main/data/json/system/widget_types/compass.json
+++ b/application/src/main/data/json/system/widget_types/compass.json
@@ -11,10 +11,11 @@
     "resources": [],
     "templateHtml": "<canvas id=\"compass\"></canvas>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueCompass(self.ctx, 'compass');\n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueCompass(self.ctx, 'compass');\n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'direction', label: 'Direction', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",    "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-analogue-compass-widget-settings",
+    "hasBasicMode": true,
+    "basicModeDirective": "tb-compass-gauge-basic-config",
     "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"minorTicks\":22,\"needleCircleSize\":15,\"showBorder\":true,\"borderOuterWidth\":10,\"colorPlate\":\"#222\",\"colorMajorTicks\":\"#f5f5f5\",\"colorMinorTicks\":\"#ddd\",\"colorNeedle\":\"#f08080\",\"colorNeedleCircle\":\"#e8e8e8\",\"colorBorder\":\"#ccc\",\"majorTickFont\":{\"family\":\"Roboto\",\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#ccc\"},\"animation\":true,\"animationDuration\":500,\"animationRule\":\"cycle\",\"animationTarget\":\"needle\",\"majorTicks\":[\"N\",\"NE\",\"E\",\"SE\",\"S\",\"SW\",\"W\",\"NW\"]},\"title\":\"Compass\",\"dropShadow\":true,\"enableFullscreen\":true,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\"}"
   },
   "externalId": null
diff --git a/application/src/main/data/json/system/widget_types/radial_gauge.json b/application/src/main/data/json/system/widget_types/radial_gauge.json
index 7d793b2b87..dc6d04f744 100644
--- a/application/src/main/data/json/system/widget_types/radial_gauge.json
+++ b/application/src/main/data/json/system/widget_types/radial_gauge.json
@@ -11,10 +11,11 @@
     "resources": [],
     "templateHtml": "<canvas id=\"radialGauge\"></canvas>\n",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",    "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-analogue-radial-gauge-widget-settings",
+    "hasBasicMode": true,
+    "basicModeDirective": "tb-radial-gauge-basic-config",
     "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temp\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 50 - 25;\\nif (value < -100) {\\n\\tvalue = -100;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":100,\"startAngle\":45,\"ticksAngle\":270,\"showBorder\":true,\"defaultColor\":\"#e65100\",\"needleCircleSize\":10,\"highlights\":[],\"showUnitTitle\":true,\"colorPlate\":\"#fff\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"minorTicks\":10,\"valueInt\":3,\"valueDec\":0,\"highlightsWidth\":15,\"valueBox\":true,\"animation\":true,\"animationDuration\":500,\"animationRule\":\"cycle\",\"colorNeedleShadowUp\":\"rgba(2, 255, 255, 0)\",\"numbersFont\":{\"family\":\"Roboto\",\"size\":18,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#888\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":22,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"valueFont\":{\"family\":\"Segment7Standard\",\"size\":36,\"style\":\"normal\",\"weight\":\"normal\",\"shadowColor\":\"rgba(0, 0, 0, 0.49)\",\"color\":\"#444\"},\"minValue\":-100,\"colorNeedleShadowDown\":\"rgba(188,143,143,0.45)\",\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\"},\"title\":\"Radial gauge\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\"}"
   },
   "externalId": null
diff --git a/application/src/main/data/json/system/widget_types/speed_gauge.json b/application/src/main/data/json/system/widget_types/speed_gauge.json
index 2c70d27cf5..9a2850bfb4 100644
--- a/application/src/main/data/json/system/widget_types/speed_gauge.json
+++ b/application/src/main/data/json/system/widget_types/speed_gauge.json
@@ -11,10 +11,11 @@
     "resources": [],
     "templateHtml": "<canvas id=\"radialGauge\"></canvas>\n",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'speed', label: 'Speed', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",    "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-analogue-radial-gauge-widget-settings",
+    "hasBasicMode": true,
+    "basicModeDirective": "tb-radial-gauge-basic-config",
     "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Speed\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 50 - 25;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 220) {\\n\\tvalue = 220;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":180,\"startAngle\":45,\"ticksAngle\":270,\"showBorder\":false,\"defaultColor\":\"#e65100\",\"needleCircleSize\":7,\"highlights\":[{\"from\":80,\"to\":120,\"color\":\"#fdd835\"},{\"color\":\"#e57373\",\"from\":120,\"to\":180}],\"showUnitTitle\":false,\"colorPlate\":\"#fff\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"minorTicks\":2,\"valueInt\":3,\"minValue\":0,\"valueDec\":0,\"highlightsWidth\":15,\"valueBox\":true,\"animation\":true,\"animationDuration\":1500,\"animationRule\":\"linear\",\"colorNeedleShadowUp\":\"rgba(2, 255, 255, 0)\",\"colorNeedleShadowDown\":\"rgba(188, 143, 143, 0.78)\",\"units\":\"MPH\",\"majorTicksCount\":9,\"numbersFont\":{\"family\":\"Roboto\",\"size\":22,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#888\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":28,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"valueFont\":{\"size\":32,\"style\":\"normal\",\"weight\":\"normal\",\"shadowColor\":\"rgba(0, 0, 0, 0.49)\",\"color\":\"#444\",\"family\":\"Segment7Standard\"},\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\"},\"title\":\"Speed gauge\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\"}"
   },
   "externalId": null
diff --git a/application/src/main/data/json/system/widget_types/temperature_radial_gauge.json b/application/src/main/data/json/system/widget_types/temperature_radial_gauge.json
index d11faa7ab2..adf1ca2cae 100644
--- a/application/src/main/data/json/system/widget_types/temperature_radial_gauge.json
+++ b/application/src/main/data/json/system/widget_types/temperature_radial_gauge.json
@@ -11,10 +11,11 @@
     "resources": [],
     "templateHtml": "<canvas id=\"radialGauge\"></canvas>\n",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",    "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-analogue-radial-gauge-widget-settings",
+    "hasBasicMode": true,
+    "basicModeDirective": "tb-radial-gauge-basic-config",
     "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":60,\"startAngle\":67.5,\"ticksAngle\":225,\"showBorder\":true,\"defaultColor\":\"#e65100\",\"needleCircleSize\":7,\"highlights\":[{\"from\":-60,\"to\":-50,\"color\":\"#42a5f5\"},{\"from\":-50,\"to\":-40,\"color\":\"rgba(66, 165, 245, 0.83)\"},{\"from\":-40,\"to\":-30,\"color\":\"rgba(66, 165, 245, 0.66)\"},{\"from\":-30,\"to\":-20,\"color\":\"rgba(66, 165, 245, 0.5)\"},{\"from\":-20,\"to\":-10,\"color\":\"rgba(66, 165, 245, 0.33)\"},{\"from\":-10,\"to\":0,\"color\":\"rgba(66, 165, 245, 0.16)\"},{\"from\":0,\"to\":10,\"color\":\"rgba(229, 115, 115, 0.16)\"},{\"from\":10,\"to\":20,\"color\":\"rgba(229, 115, 115, 0.33)\"},{\"from\":20,\"to\":30,\"color\":\"rgba(229, 115, 115, 0.5)\"},{\"from\":30,\"to\":40,\"color\":\"rgba(229, 115, 115, 0.66)\"},{\"from\":40,\"to\":50,\"color\":\"rgba(229, 115, 115, 0.83)\"},{\"from\":50,\"to\":60,\"color\":\"#e57373\"}],\"showUnitTitle\":true,\"colorPlate\":\"#cfd8dc\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"minorTicks\":2,\"valueInt\":3,\"valueDec\":1,\"highlightsWidth\":15,\"valueBox\":true,\"animation\":true,\"animationDuration\":1000,\"animationRule\":\"bounce\",\"colorNeedleShadowUp\":\"rgba(2, 255, 255, 0)\",\"colorNeedleShadowDown\":\"rgba(188, 143, 143, 0.78)\",\"units\":\"°C\",\"majorTicksCount\":12,\"numbersFont\":{\"family\":\"Roboto\",\"size\":20,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":28,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"valueFont\":{\"family\":\"Segment7Standard\",\"size\":30,\"style\":\"normal\",\"weight\":\"normal\",\"shadowColor\":\"rgba(0, 0, 0, 0.49)\",\"color\":\"#444\"},\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\",\"unitTitle\":\"Temperature\",\"minValue\":-60},\"title\":\"Temperature radial gauge\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\"}"
   },
   "externalId": null
diff --git a/application/src/main/data/json/system/widget_types/thermometer_scale.json b/application/src/main/data/json/system/widget_types/thermometer_scale.json
index cdc4a2268a..0f496a9dee 100644
--- a/application/src/main/data/json/system/widget_types/thermometer_scale.json
+++ b/application/src/main/data/json/system/widget_types/thermometer_scale.json
@@ -11,10 +11,11 @@
     "resources": [],
     "templateHtml": "<canvas id=\"linearGauge\"></canvas>\n",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueLinearGauge(self.ctx, 'linearGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueLinearGauge(self.ctx, 'linearGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",    "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-analogue-linear-gauge-widget-settings",
+    "hasBasicMode": true,
+    "basicModeDirective": "tb-thermometer-scale-gauge-basic-config",
     "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temp\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 30 - 15;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":100,\"defaultColor\":\"#e64a19\",\"barStrokeWidth\":2.5,\"colorBar\":\"rgba(255, 255, 255, 0.4)\",\"colorBarEnd\":\"rgba(221, 221, 221, 0.38)\",\"showUnitTitle\":true,\"minorTicks\":2,\"valueBox\":true,\"valueInt\":3,\"colorPlate\":\"#fff\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"colorNeedleShadowUp\":\"rgba(2,255,255,0.2)\",\"colorNeedleShadowDown\":\"rgba(188,143,143,0.45)\",\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\",\"highlightsWidth\":10,\"animation\":true,\"animationDuration\":1500,\"animationRule\":\"linear\",\"showBorder\":false,\"majorTicksCount\":8,\"numbersFont\":{\"family\":\"Arial\",\"size\":18,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#78909c\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":26,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#37474f\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":40,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#444\",\"shadowColor\":\"rgba(0,0,0,0.3)\"},\"minValue\":-60,\"highlights\":[{\"from\":-60,\"to\":-40,\"color\":\"#90caf9\"},{\"from\":-40,\"to\":-20,\"color\":\"rgba(144, 202, 249, 0.66)\"},{\"from\":-20,\"to\":0,\"color\":\"rgba(144, 202, 249, 0.33)\"},{\"from\":0,\"to\":20,\"color\":\"rgba(244, 67, 54, 0.2)\"},{\"from\":20,\"to\":40,\"color\":\"rgba(244, 67, 54, 0.4)\"},{\"from\":40,\"to\":60,\"color\":\"rgba(244, 67, 54, 0.6)\"},{\"from\":60,\"to\":80,\"color\":\"rgba(244, 67, 54, 0.8)\"},{\"from\":80,\"to\":100,\"color\":\"#f44336\"}],\"unitTitle\":\"Temperature\",\"units\":\"°C\",\"colorBarProgress\":\"#90caf9\",\"colorBarProgressEnd\":\"#f44336\",\"colorBarStroke\":\"#b0bec5\",\"valueDec\":1},\"title\":\"Thermometer scale\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\"}"
   },
   "externalId": null
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts
index a3d5b27610..c5e0c4b95c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts
@@ -73,9 +73,6 @@ import {
 import {
   RadialGaugeBasicConfigComponent
 } from '@home/components/widget/config/basic/gauge/radial-gauge-basic-config.component';
-import {
-  SpeedGaugeBasicConfigComponent
-} from '@home/components/widget/config/basic/gauge/speed-gauge-basic-config.component';
 import {
   ThermometerScaleGaugeBasicConfigComponent
 } from '@home/components/widget/config/basic/gauge/thermometer-scale-gauge-basic-config.component';
@@ -105,7 +102,6 @@ import {
     ValueChartCardBasicConfigComponent,
     ProgressBarBasicConfigComponent,
     RadialGaugeBasicConfigComponent,
-    SpeedGaugeBasicConfigComponent,
     ThermometerScaleGaugeBasicConfigComponent,
     CompassGaugeBasicConfigComponent
   ],
@@ -135,7 +131,6 @@ import {
     ValueChartCardBasicConfigComponent,
     ProgressBarBasicConfigComponent,
     RadialGaugeBasicConfigComponent,
-    SpeedGaugeBasicConfigComponent,
     ThermometerScaleGaugeBasicConfigComponent,
     CompassGaugeBasicConfigComponent
   ]
@@ -159,7 +154,6 @@ export const basicWidgetConfigComponentsMap: {[key: string]: Type<IBasicWidgetCo
   'tb-value-chart-card-basic-config': ValueChartCardBasicConfigComponent,
   'tb-progress-bar-basic-config': ProgressBarBasicConfigComponent,
   'tb-radial-gauge-basic-config': RadialGaugeBasicConfigComponent,
-  'tb-speed-gauge-basic-config': SpeedGaugeBasicConfigComponent,
   'tb-thermometer-scale-gauge-basic-config': ThermometerScaleGaugeBasicConfigComponent,
   'tb-compass-gauge-basic-config': CompassGaugeBasicConfigComponent
 };
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
index 45e4d27230..985101b6ac 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
@@ -124,12 +124,11 @@
     </div>
     <div class="tb-form-row space-between">
       <div translate>widgets.gauge.scale-color</div>
-      <tb-color-settings formControlName="highlights">
-<!--        [disabledColorType]="[colorType.constant, colorType.function]"-->
-      </tb-color-settings>
+      <tb-color-range-settings formControlName="highlights">
+      </tb-color-range-settings>
     </div>
 
-    <div class="tb-form-panel" *ngIf="gaugeType === 'thermometer'">
+    <div class="tb-form-panel" *ngIf="gaugeType === 'linear'">
       <div class="tb-form-panel-title" translate>widgets.gauge.progress-bar</div>
       <div class="tb-form-row space-between">
         <div translate>widgets.gauge.progress-bar-color-start</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts
index 953626b226..6e422105ec 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts
@@ -20,7 +20,6 @@ import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
 import {
-  DataKey,
   datasourcesHasAggregation,
   datasourcesHasOnlyComparisonAggregation,
   WidgetConfig,
@@ -61,8 +60,8 @@ export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent {
     return this.radialGaugeWidgetConfigForm;
   }
 
-  protected setupDefaults(configData: WidgetConfigComponentData, key?: DataKey[]) {
-    this.setupDefaultDatasource(configData, key);
+  protected setupDefaults(configData: WidgetConfigComponentData) {
+    super.setupDefaults(configData);
   }
 
   protected onConfigSet(configData: WidgetConfigComponentData) {
@@ -93,10 +92,7 @@ export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent {
 
       defaultColor: [configData.config.settings?.defaultColor, []],
       colorPlate: [configData.config.settings?.colorPlate, []],
-      highlights: [{
-        type: 'range',
-        rangeList: configData.config.settings?.highlights
-      }, []],
+      highlights: [configData.config.settings?.highlights, []],
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.ts
index 633e3c28f2..8bf0b5ea6e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.ts
@@ -14,40 +14,23 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, Injector } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { Component } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
 import {
-  DataKey,
   datasourcesHasAggregation,
   datasourcesHasOnlyComparisonAggregation,
   WidgetConfig,
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
-import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
   getTimewindowConfig,
   setTimewindowConfig
 } from '@home/components/widget/config/timewindow-config-panel.component';
-import { formatValue, isDefinedAndNotNull, isUndefined } from '@core/utils';
-import {
-  ColorType,
-  DateFormatProcessor,
-  DateFormatSettings,
-  getLabel,
-  setLabel
-} from '@shared/models/widget-settings.models';
-import {
-  valueCardDefaultSettings,
-  ValueCardLayout,
-  valueCardLayoutImages,
-  valueCardLayouts,
-  valueCardLayoutTranslations,
-  ValueCardWidgetSettings
-} from '@home/components/widget/lib/cards/value-card-widget.models';
+import { isUndefined } from '@core/utils';
 
 @Component({
   selector: 'tb-compass-gauge-basic-config',
@@ -79,7 +62,7 @@ export class CompassGaugeBasicConfigComponent extends BasicWidgetConfigComponent
   }
 
   protected setupDefaults(configData: WidgetConfigComponentData) {
-    this.setupDefaultDatasource(configData, [{ name: 'direction', label: 'Direction', type: DataKeyType.timeseries }]);
+    super.setupDefaults(configData);
   }
 
   protected onConfigSet(configData: WidgetConfigComponentData) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/radial-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/radial-gauge-basic-config.component.ts
index 0abc0ad327..ec756b6605 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/radial-gauge-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/radial-gauge-basic-config.component.ts
@@ -15,19 +15,14 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings } from '@shared/models/widget.models';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormBuilder } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import {
-  AnalogueGaugeWidgetSettingsComponent
-} from '@home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component';
 import {
   GaugeBasicConfigComponent
 } from '@home/components/widget/config/basic/gauge/analog-gauge-basic-config.component';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 
 @Component({
   selector: 'tb-radial-gauge-basic-config',
@@ -44,10 +39,6 @@ export class RadialGaugeBasicConfigComponent extends GaugeBasicConfigComponent {
     super(store, widgetConfigComponent, fb);
   }
 
-  protected setupDefaults(configData: WidgetConfigComponentData) {
-    return super.setupDefaults(configData, [{ name: 'temperature', label: 'Temperature', type: DataKeyType.timeseries }]);
-  }
-
   protected onConfigSet(configData: WidgetConfigComponentData) {
     super.onConfigSet(configData);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/speed-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/speed-gauge-basic-config.component.ts
deleted file mode 100644
index d0df11fcba..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/speed-gauge-basic-config.component.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-///
-/// Copyright © 2016-2023 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component } from '@angular/core';
-import { WidgetSettings } from '@shared/models/widget.models';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import {
-  AnalogueGaugeWidgetSettingsComponent
-} from '@home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component';
-import {
-  GaugeBasicConfigComponent
-} from '@home/components/widget/config/basic/gauge/analog-gauge-basic-config.component';
-import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
-import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
-
-@Component({
-  selector: 'tb-speed-gauge-basic-config',
-  templateUrl: './analog-gauge-basic-config.component.html',
-  styleUrls: ['../basic-config.scss']
-})
-export class SpeedGaugeBasicConfigComponent extends GaugeBasicConfigComponent {
-
-  gaugeType = 'speed';
-
-  constructor(protected store: Store<AppState>,
-              protected widgetConfigComponent: WidgetConfigComponent,
-              protected fb: UntypedFormBuilder) {
-    super(store, widgetConfigComponent, fb);
-  }
-
-  protected setupDefaults(configData: WidgetConfigComponentData) {
-    return super.setupDefaults(configData, [{ name: 'speed', label: 'Speed', type: DataKeyType.timeseries }]);
-  }
-
-  protected onConfigSet(configData: WidgetConfigComponentData) {
-    super.onConfigSet(configData);
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/thermometer-scale-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/thermometer-scale-gauge-basic-config.component.ts
index d8d796f6fb..97e3a0c69f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/thermometer-scale-gauge-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/thermometer-scale-gauge-basic-config.component.ts
@@ -15,19 +15,14 @@
 ///
 
 import { Component } from '@angular/core';
-import { WidgetSettings } from '@shared/models/widget.models';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormBuilder } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import {
-  AnalogueGaugeWidgetSettingsComponent
-} from '@home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component';
 import {
   GaugeBasicConfigComponent
 } from '@home/components/widget/config/basic/gauge/analog-gauge-basic-config.component';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 
 @Component({
   selector: 'tb-thermometer-scale-gauge-basic-config',
@@ -36,7 +31,7 @@ import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 })
 export class ThermometerScaleGaugeBasicConfigComponent extends GaugeBasicConfigComponent {
 
-  gaugeType = 'thermometer';
+  gaugeType = 'linear';
 
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
@@ -44,10 +39,6 @@ export class ThermometerScaleGaugeBasicConfigComponent extends GaugeBasicConfigC
     super(store, widgetConfigComponent, fb);
   }
 
-  protected setupDefaults(configData: WidgetConfigComponentData) {
-    return super.setupDefaults(configData, [{ name: 'temperature', label: 'Temperature', type: DataKeyType.timeseries }]);
-  }
-
   protected onConfigSet(configData: WidgetConfigComponentData) {
     super.onConfigSet(configData);
     this.radialGaugeWidgetConfigForm.addControl('colorBarStroke',
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
index 442a431e33..7769dab6a3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
@@ -249,9 +249,8 @@
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="highlightsWidth">
         </mat-form-field>
-        <tb-color-settings formControlName="highlights">
-          <!--        [disabledColorType]="[colorType.constant, colorType.function]"-->
-        </tb-color-settings>
+        <tb-color-range-settings formControlName="highlights">
+        </tb-color-range-settings>
       </div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts
index b2bc6621a1..3257987f4a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts
@@ -18,7 +18,6 @@ import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.m
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { GaugeHighlight } from '@home/components/widget/lib/settings/gauge/gauge-highlight.component';
 
 export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponent {
 
@@ -153,7 +152,7 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
 
       // Highlights settings
       highlightsWidth: [settings.highlightsWidth, [Validators.min(0)]],
-      highlights: this.prepareHighlights(settings.highlights),
+      highlights: [settings.highlights, []],
 
       // Animation settings
       animation: [settings.animation, []],
@@ -231,8 +230,4 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
     return settings;
   }
 
-  private prepareHighlights(highlights: GaugeHighlight[] | undefined) {
-    return {type: 'range', rangeList: highlights};
-  }
-
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html
deleted file mode 100644
index f92edfcde5..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-
-    Copyright © 2016-2023 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<mat-expansion-panel class="gauge-highlight" fxFlex [formGroup]="gaugeHighlightFormGroup" [(expanded)]="expanded">
-  <mat-expansion-panel-header>
-    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-      <mat-panel-title>
-        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
-          <div>{{ highlightRangeText() }}</div>
-          <div class="tb-color-preview" style="margin-left: 6px;">
-            <div class="tb-color-result" [ngStyle]="{background: gaugeHighlightFormGroup.get('color').value}"></div>
-          </div>
-        </div>
-      </mat-panel-title>
-      <span fxFlex></span>
-      <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
-              type="button"
-              (click)="removeHighlight.emit()"
-              matTooltip="{{ 'action.remove' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon>delete</mat-icon>
-      </button>
-    </div>
-  </mat-expansion-panel-header>
-  <ng-template matExpansionPanelContent>
-    <div fxLayout="column" fxLayoutGap="0.5em">
-      <mat-divider></mat-divider>
-      <section class="tb-widget-settings" fxLayout="column">
-        <section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
-          <mat-form-field fxFlex>
-            <mat-label translate>widgets.gauge.highlight-from</mat-label>
-            <input matInput type="number" formControlName="from">
-          </mat-form-field>
-          <mat-form-field fxFlex>
-            <mat-label translate>widgets.gauge.highlight-to</mat-label>
-            <input matInput type="number" formControlName="to">
-          </mat-form-field>
-        </section>
-        <tb-color-input
-          formControlName="color"
-          icon="format_color_fill"
-          label="{{ 'widgets.gauge.highlight-color' | translate }}" openOnInput colorClearButton>
-        </tb-color-input>
-      </section>
-    </div>
-  </ng-template>
-</mat-expansion-panel>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.scss
deleted file mode 100644
index 8b61fb7e3d..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright © 2016-2023 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host {
-  display: block;
-  .mat-expansion-panel {
-    box-shadow: none;
-    &.gauge-highlight {
-      border: 1px groove rgba(0, 0, 0, .25);
-      .mat-expansion-panel-header {
-        padding: 0 24px 0 8px;
-        &.mat-expanded {
-          height: 48px;
-        }
-      }
-    }
-  }
-}
-
-:host ::ng-deep {
-  .mat-expansion-panel {
-    &.gauge-highlight {
-      .mat-expansion-panel-body {
-        padding: 0 8px 8px;
-      }
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts
deleted file mode 100644
index e5c1ec9fbc..0000000000
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-///
-/// Copyright © 2016-2023 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
-import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
-import { PageComponent } from '@shared/components/page.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { TranslateService } from '@ngx-translate/core';
-import { isNumber } from '@core/utils';
-
-export interface GaugeHighlight {
-  from: number;
-  to: number;
-  color: string;
-}
-
-@Component({
-  selector: 'tb-gauge-highlight',
-  templateUrl: './gauge-highlight.component.html',
-  styleUrls: ['./gauge-highlight.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => GaugeHighlightComponent),
-      multi: true
-    }
-  ]
-})
-export class GaugeHighlightComponent extends PageComponent implements OnInit, ControlValueAccessor {
-
-  @Input()
-  disabled: boolean;
-
-  @Input()
-  expanded = false;
-
-  @Output()
-  removeHighlight = new EventEmitter();
-
-  private modelValue: GaugeHighlight;
-
-  private propagateChange = null;
-
-  public gaugeHighlightFormGroup: UntypedFormGroup;
-
-  constructor(protected store: Store<AppState>,
-              private translate: TranslateService,
-              private fb: UntypedFormBuilder) {
-    super(store);
-  }
-
-  ngOnInit(): void {
-    this.gaugeHighlightFormGroup = this.fb.group({
-      from: [null, []],
-      to: [null, []],
-      color: [null, []]
-    });
-    this.gaugeHighlightFormGroup.valueChanges.subscribe(() => {
-      this.updateModel();
-    });
-  }
-
-  registerOnChange(fn: any): void {
-    this.propagateChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    if (isDisabled) {
-      this.gaugeHighlightFormGroup.disable({emitEvent: false});
-    } else {
-      this.gaugeHighlightFormGroup.enable({emitEvent: false});
-    }
-  }
-
-  writeValue(value: GaugeHighlight): void {
-    this.modelValue = value;
-    this.gaugeHighlightFormGroup.patchValue(
-      value, {emitEvent: false}
-    );
-  }
-
-  highlightRangeText(): string {
-    const value: GaugeHighlight = this.gaugeHighlightFormGroup.value;
-    const from = isNumber(value.from) ? value.from : 0;
-    const to = isNumber(value.to) ? value.to : 0;
-    return `${from} - ${to}`;
-  }
-
-  private updateModel() {
-    const value: GaugeHighlight = this.gaugeHighlightFormGroup.value;
-    this.modelValue = value;
-    if (this.gaugeHighlightFormGroup.valid) {
-      this.propagateChange(this.modelValue);
-    } else {
-      this.propagateChange(null);
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
index 33b4323fdf..9ad7f62729 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
@@ -58,7 +58,6 @@ import {
 import {
   AlarmsTableKeySettingsComponent
 } from '@home/components/widget/lib/settings/alarm/alarms-table-key-settings.component';
-import { GaugeHighlightComponent } from '@home/components/widget/lib/settings/gauge/gauge-highlight.component';
 import {
   AnalogueRadialGaugeWidgetSettingsComponent
 } from '@home/components/widget/lib/settings/gauge/analogue-radial-gauge-widget-settings.component';
@@ -318,7 +317,6 @@ import {
     EntitiesTableKeySettingsComponent,
     AlarmsTableWidgetSettingsComponent,
     AlarmsTableKeySettingsComponent,
-    GaugeHighlightComponent,
     AnalogueRadialGaugeWidgetSettingsComponent,
     AnalogueLinearGaugeWidgetSettingsComponent,
     AnalogueCompassWidgetSettingsComponent,
@@ -434,7 +432,6 @@ import {
     EntitiesTableKeySettingsComponent,
     AlarmsTableWidgetSettingsComponent,
     AlarmsTableKeySettingsComponent,
-    GaugeHighlightComponent,
     AnalogueRadialGaugeWidgetSettingsComponent,
     AnalogueLinearGaugeWidgetSettingsComponent,
     AnalogueCompassWidgetSettingsComponent,