diff --git a/application/src/main/data/json/system/widget_bundles/charts.json b/application/src/main/data/json/system/widget_bundles/charts.json
index e612111e3a..2772c696bf 100644
--- a/application/src/main/data/json/system/widget_bundles/charts.json
+++ b/application/src/main/data/json/system/widget_bundles/charts.json
@@ -23,8 +23,9 @@
         "templateHtml": "<canvas id=\"barChart\"></canvas>\n",
         "templateCss": "",
         "controllerScript": "self.onInit = function() {\n    $scope = self.ctx.$scope;\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showTooltip = utils.defaultValue(settings.showTooltip, true);\n    \n    Chart.defaults.global.tooltips.enabled = settings.showTooltip;\n    \n    var barData = {\n        labels: [],\n        datasets: []\n    };\n    \n    for (var i = 0; i < self.ctx.datasources.length; i++) {\n        var datasource = self.ctx.datasources[i];\n        for (var d = 0; d < datasource.dataKeys.length; d++) {\n            var dataKey = datasource.dataKeys[d];\n            var units = dataKey.units && dataKey.units.length ? dataKey.units : self.ctx.units;\n            units = units ? (' (' + units + ')') : '';\n            var dataset = {\n                label: dataKey.label + units,\n                data: [0],\n                backgroundColor: [dataKey.color],\n                borderColor: [dataKey.color],\n                borderWidth: 1\n            }\n            barData.datasets.push(dataset);\n        }\n    }\n\n    var ctx = $('#barChart', self.ctx.$container);\n    self.ctx.chart = new Chart(ctx, {\n        type: 'bar',\n        data: barData,\n        options: {\n            responsive: false,\n            maintainAspectRatio: false,\n            scales: {\n                yAxes: [{\n                    ticks: {\n                        beginAtZero:true\n                    }\n                }]\n            }\n        }\n    });\n    \n    self.onResize();\n}\n\nself.onDataUpdated = function() {\n    var c = 0;\n    for (var i = 0; i < self.ctx.chart.data.datasets.length; i++) {\n        var dataset = self.ctx.chart.data.datasets[i];\n        var cellData = self.ctx.data[i]; \n        if (cellData.data.length > 0) {\n            var decimals;\n            if (typeof cellData.dataKey.decimals !== 'undefined' \n                && cellData.dataKey.decimals !== null ) {\n                decimals = cellData.dataKey.decimals; \n            } else {\n                decimals = self.ctx.decimals;\n            }\n            var tvPair = cellData.data[cellData.data.length - 1];\n            var value = self.ctx.utils.formatValue(tvPair[1], decimals);\n            dataset.data[0] = parseFloat(value);\n        }\n    }\n    self.ctx.chart.update();\n}\n\nself.onResize = function() {\n    self.ctx.chart.resize();\n}\n\nself.onDestroy = function() {\n    self.ctx.chart.destroy();\n    self.ctx.chart = null;\n}\n",
-        "settingsSchema": "{\n    \"schema\": {\n    \"type\": \"object\",\n    \"title\": \"EntitiesTableSettings\",\n    \"properties\": {\n        \"showTooltip\": {\n            \"title\": \"Show Tooltip\",\n            \"type\": \"boolean\",\n            \"default\": true\n        }\n    },\n    \"required\": []\n    },\n    \"form\": [\n        \"showTooltip\"\n    ]\n}",
+        "settingsSchema": "",
         "dataKeySettingsSchema": "{}\n",
+        "settingsDirective": "tb-chart-widget-settings",
         "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.545701115289893,\"funcBody\":\"var value = (prevValue-20) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+20;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Third\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.2592906835158064,\"funcBody\":\"var value = (prevValue-40) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+40;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Fourth\",\"color\":\"#ffc107\",\"settings\":{},\"_hash\":0.12880275585455747,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{},\"title\":\"Bars\"}"
       }
     },
@@ -45,8 +46,9 @@
         "templateHtml": "<canvas id=\"pieChart\"></canvas>\n",
         "templateCss": "",
         "controllerScript": "self.onInit = function() {\n    $scope = self.ctx.$scope;\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showTooltip = utils.defaultValue(settings.showTooltip, true);\n    \n    Chart.defaults.global.tooltips.enabled = settings.showTooltip;\n    \n    var pieData = {\n        labels: [],\n        datasets: []\n    };\n\n    var dataset = {\n        data: [],\n        backgroundColor: [],\n        borderColor: [],\n        borderWidth: [],\n        hoverBackgroundColor: []\n    }\n    \n    var borderColor = self.ctx.settings.borderColor || '#fff';\n    var borderWidth = typeof self.ctx.settings.borderWidth !== 'undefined' ? self.ctx.settings.borderWidth : 5;\n    \n    pieData.datasets.push(dataset);\n    \n    for (var i=0; i < self.ctx.data.length; i++) {\n        var dataKey = self.ctx.data[i].dataKey;\n        var units = dataKey.units && dataKey.units.length ? dataKey.units : self.ctx.units;\n        units = units ? (' (' + units + ')') : '';\n        pieData.labels.push(dataKey.label + units);\n        dataset.data.push(0);\n        var hoverBackgroundColor = tinycolor(dataKey.color).lighten(15);\n        dataset.backgroundColor.push(dataKey.color);\n        dataset.borderColor.push(borderColor);\n        dataset.borderWidth.push(borderWidth);\n        dataset.hoverBackgroundColor.push(hoverBackgroundColor.toRgbString());\n    }\n\n    var options = {\n        responsive: false,\n        maintainAspectRatio: false,\n        legend: {\n            display: true,\n            labels: {\n                fontColor: '#666'\n            }\n        },\n        tooltips: {\n            callbacks: {\n                label: function(tooltipItem, data) {\n                    var label = data.labels[tooltipItem.index];\n                    var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];\n                    var content = label + ': ' + value;\n                    var units = self.ctx.settings.units ? self.ctx.settings.units : self.ctx.units;\n                    if (units) {\n                        content += ' ' + units;\n                    } \n                    return content;\n                }\n            }\n        }\n    };\n\n    if (self.ctx.settings.legend) {\n        options.legend.display = self.ctx.settings.legend.display !== false;\n        options.legend.labels.fontColor = self.ctx.settings.legend.labelsFontColor || '#666';\n    }\n\n    var ctx = $('#pieChart', self.ctx.$container);\n    self.ctx.chart = new Chart(ctx, {\n        type: 'doughnut',\n        data: pieData,\n        options: options\n    });\n    \n    self.onResize();\n}\n\nself.onDataUpdated = function() {\n    for (var i = 0; i < self.ctx.data.length; i++) {\n        var cellData = self.ctx.data[i];\n        if (cellData.data.length > 0) {\n            var decimals;\n            if (typeof cellData.dataKey.decimals !== 'undefined' \n                && cellData.dataKey.decimals !== null ) {\n                decimals = cellData.dataKey.decimals; \n            } else {\n                decimals = self.ctx.decimals;\n            }\n            var tvPair = cellData.data[cellData.data.length - 1];\n            var value = self.ctx.utils.formatValue(tvPair[1], decimals);\n            self.ctx.chart.data.datasets[0].data[i] = parseFloat(value);\n        }\n    }\n    self.ctx.chart.update();\n}\n\nself.onResize = function() {\n    self.ctx.chart.resize();\n}\n\nself.onDestroy = function() {\n    self.ctx.chart.destroy();\n    self.ctx.chart = null;\n}\n\n",
-        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"showTooltip\": {\n                \"title\": \"Show Tooltip\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"borderWidth\": {\n                \"title\": \"Border width\",\n                \"type\": \"number\",\n                \"default\": 5\n            },\n            \"borderColor\": {\n                \"title\": \"Border color\",\n                \"type\": \"string\",\n                \"default\": \"#fff\"\n            },\n            \"legend\": {\n                \"title\": \"Legend settings\",\n                \"type\": \"object\",\n                \"properties\": {\n                    \"display\": {\n                        \"title\": \"Display legend\",\n                        \"type\": \"boolean\",\n                        \"default\": true\n                    },\n                    \"labelsFontColor\": {\n                        \"title\": \"Labels font color\",\n                        \"type\": \"string\",\n                        \"default\": \"#666\"\n                    }\n                }\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"showTooltip\",\n        \"borderWidth\", \n        {\n            \"key\": \"borderColor\",\n            \"type\": \"color\"\n        }, \n        {\n            \"key\": \"legend\",\n            \"items\": [\n                \"legend.display\",\n                {\n                    \"key\": \"legend.labelsFontColor\",\n                    \"type\": \"color\"\n                }\n            ]\n        }\n    ]\n}",
+        "settingsSchema": "",
         "dataKeySettingsSchema": "{}\n",
+        "settingsDirective": "tb-doughnut-chart-widget-settings",
         "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#26a69a\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#f57c00\",\"settings\":{},\"_hash\":0.545701115289893,\"funcBody\":\"var value = (prevValue-20) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+20;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Third\",\"color\":\"#afb42b\",\"settings\":{},\"_hash\":0.2592906835158064,\"funcBody\":\"var value = (prevValue-40) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+40;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Fourth\",\"color\":\"#673ab7\",\"settings\":{},\"_hash\":0.12880275585455747,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"borderWidth\":5,\"borderColor\":\"#fff\",\"legend\":{\"display\":true,\"labelsFontColor\":\"#666666\"}},\"title\":\"Doughnut\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400}}"
       }
     },
@@ -62,10 +64,12 @@
         "resources": [],
         "templateHtml": "",
         "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.pie-label {\n    font-size: 12px;\n    font-family: 'Roboto';\n    font-weight: bold;\n    text-align: center;\n    padding: 2px;\n    color: white;\n}\n",
-        "controllerScript": "self.onInit = function() {\n    self.ctx.flot = new TbFlot(self.ctx, 'pie');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.flot.update();\n}\n\nself.onResize = function() {\n    self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.flot.checkMouseEvents();\n}\n\nself.getSettingsSchema = function() {\n    return TbFlot.pieSettingsSchema();\n}\n\nself.getDataKeySettingsSchema = function() {\n    return TbFlot.pieDatakeySettingsSchema();\n}\n\nself.onDestroy = function() {\n    self.ctx.flot.destroy();\n}\nself.actionSources = function() {\n    return {\n        'sliceClick': {\n            name: 'widget-action.pie-slice-click',\n            multiple: false\n        }\n    };\n}\n",
+        "controllerScript": "self.onInit = function() {\n    self.ctx.flot = new TbFlot(self.ctx, 'pie');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.flot.update();\n}\n\nself.onResize = function() {\n    self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.flot.checkMouseEvents();\n}\n\nself.onDestroy = function() {\n    self.ctx.flot.destroy();\n}\nself.actionSources = function() {\n    return {\n        'sliceClick': {\n            name: 'widget-action.pie-slice-click',\n            multiple: false\n        }\n    };\n}\n",
         "settingsSchema": "{}\n",
         "dataKeySettingsSchema": "{}\n",
-        "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.6114638304362894,\"funcBody\":\"var value = (prevValue-20) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+20;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Third\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.9955906536344441,\"funcBody\":\"var value = (prevValue-40) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+40;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Fourth\",\"color\":\"#ffc107\",\"settings\":{},\"_hash\":0.9430835931647599,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"radius\":1,\"fontColor\":\"#545454\",\"fontSize\":10,\"decimals\":1,\"legend\":{\"show\":true,\"position\":\"nw\",\"labelBoxBorderColor\":\"#CCCCCC\",\"backgroundColor\":\"#F0F0F0\",\"backgroundOpacity\":0.85},\"innerRadius\":0,\"showLabels\":true,\"showPercentages\":true,\"stroke\":{\"width\":5},\"tilt\":1,\"animatedPie\":false},\"title\":\"Pie - Flot\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400}}"
+        "settingsDirective": "tb-flot-pie-widget-settings",
+        "dataKeySettingsDirective": "tb-flot-pie-key-settings",
+        "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.6114638304362894,\"funcBody\":\"var value = (prevValue-20) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+20;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Third\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.9955906536344441,\"funcBody\":\"var value = (prevValue-40) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+40;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Fourth\",\"color\":\"#ffc107\",\"settings\":{},\"_hash\":0.9430835931647599,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"radius\":1,\"fontColor\":\"#545454\",\"fontSize\":10,\"decimals\":1,\"legend\":{\"show\":true,\"position\":\"nw\",\"labelBoxBorderColor\":\"#CCCCCC\",\"backgroundColor\":\"#F0F0F0\",\"backgroundOpacity\":0.85},\"innerRadius\":0,\"showLabels\":true,\"showPercentages\":true,\"stroke\":{\"width\":5},\"tilt\":1,\"animatedPie\":false},\"title\":\"Pie- Flot\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400}}"
       }
     },
     {
@@ -85,8 +89,9 @@
         "templateHtml": "<canvas id=\"pieChart\"></canvas>\n",
         "templateCss": "",
         "controllerScript": "self.onInit = function() {\n    $scope = self.ctx.$scope;\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showTooltip = utils.defaultValue(settings.showTooltip, true);\n    \n    Chart.defaults.global.tooltips.enabled = settings.showTooltip;\n    \n    var pieData = {\n        labels: [],\n        datasets: []\n    };\n\n    var dataset = {\n        data: [],\n        backgroundColor: [],\n        borderColor: [],\n        borderWidth: [],\n        hoverBackgroundColor: []\n    }\n    \n    pieData.datasets.push(dataset);\n    \n    for (var i=0; i < self.ctx.data.length; i++) {\n        var dataKey = self.ctx.data[i].dataKey;\n        var units = dataKey.units && dataKey.units.length ? dataKey.units : self.ctx.units;\n        units = units ? (' (' + units + ')') : '';\n        pieData.labels.push(dataKey.label + units);\n        dataset.data.push(0);\n        var hoverBackgroundColor = tinycolor(dataKey.color).lighten(15);\n        var borderColor = tinycolor(dataKey.color).darken();\n        dataset.backgroundColor.push(dataKey.color);\n        dataset.borderColor.push('#fff');\n        dataset.borderWidth.push(5);\n        dataset.hoverBackgroundColor.push(hoverBackgroundColor.toRgbString());\n    }\n\n    var ctx = $('#pieChart', self.ctx.$container);\n    self.ctx.chart = new Chart(ctx, {\n        type: 'pie',\n        data: pieData,\n        options: {\n            responsive: false,\n            maintainAspectRatio: false\n        }\n    });    \n    \n    self.onResize();\n}\n\nself.onDataUpdated = function() {\n    for (var i = 0; i < self.ctx.data.length; i++) {\n        var cellData = self.ctx.data[i];\n        if (cellData.data.length > 0) {\n            var decimals;\n            if (typeof cellData.dataKey.decimals !== 'undefined' \n                && cellData.dataKey.decimals !== null ) {\n                decimals = cellData.dataKey.decimals; \n            } else {\n                decimals = self.ctx.decimals;\n            }\n            var tvPair = cellData.data[cellData.data.length - 1];\n            var value = self.ctx.utils.formatValue(tvPair[1], decimals);\n            self.ctx.chart.data.datasets[0].data[i] = parseFloat(value);\n        }\n    }\n    self.ctx.chart.update();\n}\n\nself.onResize = function() {\n    self.ctx.chart.resize();\n}\n\nself.onDestroy = function() {\n    self.ctx.chart.destroy();\n    self.ctx.chart = null;\n}\n",
-        "settingsSchema": "{\n    \"schema\": {\n    \"type\": \"object\",\n    \"title\": \"EntitiesTableSettings\",\n    \"properties\": {\n        \"showTooltip\": {\n            \"title\": \"Show Tooltip\",\n            \"type\": \"boolean\",\n            \"default\": true\n        }\n    },\n    \"required\": []\n    },\n    \"form\": [\n        \"showTooltip\"\n    ]\n}",
+        "settingsSchema": "",
         "dataKeySettingsSchema": "{}\n",
+        "settingsDirective": "tb-chart-widget-settings",
         "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.545701115289893,\"funcBody\":\"var value = (prevValue-20) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+20;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Third\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.2592906835158064,\"funcBody\":\"var value = (prevValue-40) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+40;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Fourth\",\"color\":\"#ffc107\",\"settings\":{},\"_hash\":0.12880275585455747,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{},\"title\":\"Pie - Chart.js\"}"
       }
     },
@@ -107,8 +112,9 @@
         "templateHtml": "<canvas id=\"pieChart\"></canvas>\n",
         "templateCss": "",
         "controllerScript": "self.onInit = function() {\n    $scope = self.ctx.$scope;\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showTooltip = utils.defaultValue(settings.showTooltip, true);\n    \n    Chart.defaults.global.tooltips.enabled = settings.showTooltip;\n    \n    var pieData = {\n        labels: [],\n        datasets: []\n    };\n\n    var dataset = {\n        data: [],\n        backgroundColor: [],\n        borderColor: [],\n        borderWidth: [],\n        hoverBackgroundColor: []\n    }\n\n    pieData.datasets.push(dataset);\n    \n    for (var i = 0; i < self.ctx.data.length; i++) {\n        var dataKey = self.ctx.data[i].dataKey;\n        var units = dataKey.units && dataKey.units.length ? dataKey.units : self.ctx.units;\n        units = units ? (' (' + units + ')') : '';\n        pieData.labels.push(dataKey.label + units);\n        dataset.data.push(0);\n        var hoverBackgroundColor = tinycolor(dataKey.color).lighten(15);\n        var borderColor = tinycolor(dataKey.color).darken();\n        dataset.backgroundColor.push(dataKey.color);\n        dataset.borderColor.push('#fff');\n        dataset.borderWidth.push(5);\n        dataset.hoverBackgroundColor.push(hoverBackgroundColor.toRgbString());\n    }\n    \n    var floatingPoint;\n    if (typeof self.ctx.decimals !== 'undefined' && self.ctx.decimals !== null) {\n        floatingPoint = self.ctx.widget.config.decimals;\n    } else {\n        floatingPoint = 2;\n    }\n\n\n    var ctx = $('#pieChart', self.ctx.$container);\n    self.ctx.chart = new Chart(ctx, {\n        type: 'polarArea',\n        data: pieData,\n        options: {\n            responsive: false,\n            maintainAspectRatio: false,\n            scale: {\n                ticks: {\n                    callback: function(tick) {\n                    \treturn tick.toFixed(floatingPoint);\n                    }\n                }\n            }\n        }\n    });\n    \n    self.onResize();\n}\n\nself.onDataUpdated = function() {\n    for (var i = 0; i < self.ctx.data.length; i++) {\n        var cellData = self.ctx.data[i];\n        if (cellData.data.length > 0) {\n            var decimals;\n            if (typeof cellData.dataKey.decimals !== 'undefined' \n                && cellData.dataKey.decimals !== null ) {\n                decimals = cellData.dataKey.decimals; \n            } else {\n                decimals = self.ctx.decimals;\n            }\n            var tvPair = cellData.data[cellData.data.length - 1];\n            var value = self.ctx.utils.formatValue(tvPair[1], decimals);\n            self.ctx.chart.data.datasets[0].data[i] = parseFloat(value);\n        }\n    }\n    self.ctx.chart.update();\n}\n\nself.onResize = function() {\n    if (self.ctx.height >= 70) {\n        try {\n            self.ctx.chart.resize();\n        } catch (e) {}\n    }\n}\n\nself.onDestroy = function() {\n    self.ctx.chart.destroy();\n    self.ctx.chart = null;\n}\n",
-        "settingsSchema": "{\n    \"schema\": {\n    \"type\": \"object\",\n    \"title\": \"EntitiesTableSettings\",\n    \"properties\": {\n        \"showTooltip\": {\n            \"title\": \"Show Tooltip\",\n            \"type\": \"boolean\",\n            \"default\": true\n        }\n    },\n    \"required\": []\n    },\n    \"form\": [\n        \"showTooltip\"\n    ]\n}",
+        "settingsSchema": "",
         "dataKeySettingsSchema": "{}\n",
+        "settingsDirective": "tb-chart-widget-settings",
         "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.545701115289893,\"funcBody\":\"var value = (prevValue-20) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+20;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Third\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.2592906835158064,\"funcBody\":\"var value = (prevValue-40) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+40;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Fourth\",\"color\":\"#ffc107\",\"settings\":{},\"_hash\":0.12880275585455747,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Fifth\",\"color\":\"#607d8b\",\"settings\":{},\"_hash\":0.2074391823443591,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{},\"title\":\"Polar Area\"}"
       }
     },
@@ -129,8 +135,9 @@
         "templateHtml": "<canvas id=\"radarChart\"></canvas>\n",
         "templateCss": "",
         "controllerScript": "self.onInit = function() {\n    $scope = self.ctx.$scope;\n    utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n    settings = utils.deepClone(self.ctx.settings) || {};\n    settings.showTooltip = utils.defaultValue(settings.showTooltip, true);\n    \n    Chart.defaults.global.tooltips.enabled = settings.showTooltip;\n    \n    var barData = {\n        labels: [],\n        datasets: []\n    };\n\n    var backgroundColor = tinycolor(self.ctx.data[0].dataKey.color);\n    backgroundColor.setAlpha(0.2);\n    var borderColor = tinycolor(self.ctx.data[0].dataKey.color);\n    borderColor.setAlpha(1);\n    var dataset = {\n        label: self.ctx.datasources[0].name,\n        data: [],\n        backgroundColor: backgroundColor.toRgbString(),\n        borderColor: borderColor.toRgbString(),\n        pointBackgroundColor: borderColor.toRgbString(),\n        pointBorderColor: borderColor.darken().toRgbString(),\n        borderWidth: 1\n    }\n    \n    barData.datasets.push(dataset);\n    \n    for (var i = 0; i < self.ctx.data.length; i++) {\n        var dataKey = self.ctx.data[i].dataKey;\n        var units = dataKey.units && dataKey.units.length ? dataKey.units : self.ctx.units;\n        units = units ? (' (' + units + ')') : '';\n        barData.labels.push(dataKey.label + units);\n        dataset.data.push(0);\n    }\n    \n    var floatingPoint;\n    if (typeof self.ctx.decimals !== 'undefined' && self.ctx.decimals !== null) {\n        floatingPoint = self.ctx.widget.config.decimals;\n    } else {\n        floatingPoint = 2;\n    }\n\n    var ctx = $('#radarChart', self.ctx.$container);\n    self.ctx.chart = new Chart(ctx, {\n        type: 'radar',\n        data: barData,\n        options: {\n            responsive: false,\n            maintainAspectRatio: false,\n            scale: {\n                ticks: {\n                    callback: function(tick) {\n                    \treturn tick.toFixed(floatingPoint);\n                    }\n                }\n            }\n        }\n    });\n    \n    self.onResize();\n}\n\nself.onDataUpdated = function() {\n    for (var i = 0; i < self.ctx.data.length; i++) {\n        var cellData = self.ctx.data[i];\n        if (cellData.data.length > 0) {\n            var decimals;\n            if (typeof cellData.dataKey.decimals !== 'undefined' \n                && cellData.dataKey.decimals !== null ) {\n                decimals = cellData.dataKey.decimals; \n            } else {\n                decimals = self.ctx.decimals;\n            }\n            var tvPair = cellData.data[cellData.data.length - 1];\n            var value = self.ctx.utils.formatValue(tvPair[1], decimals);\n            self.ctx.chart.data.datasets[0].data[i] = parseFloat(value);\n        }\n    }    \n    self.ctx.chart.update();\n}\n\nself.onResize = function() {\n    if (self.ctx.height >= 70) {\n        self.ctx.chart.resize();\n    }\n}\n\nself.onDestroy = function() {\n    self.ctx.chart.destroy();\n    self.ctx.chart = null;\n}\n",
-        "settingsSchema": "{\n    \"schema\": {\n    \"type\": \"object\",\n    \"title\": \"EntitiesTableSettings\",\n    \"properties\": {\n        \"showTooltip\": {\n            \"title\": \"Show Tooltip\",\n            \"type\": \"boolean\",\n            \"default\": true\n        }\n    },\n    \"required\": []\n    },\n    \"form\": [\n        \"showTooltip\"\n    ]\n}",
+        "settingsSchema": "",
         "dataKeySettingsSchema": "{}\n",
+        "settingsDirective": "tb-chart-widget-settings",
         "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.545701115289893,\"funcBody\":\"var value = (prevValue-20) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+20;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Third\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.2592906835158064,\"funcBody\":\"var value = (prevValue-40) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+40;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Fourth\",\"color\":\"#ffc107\",\"settings\":{},\"_hash\":0.12880275585455747,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{},\"title\":\"Radar\"}"
       }
     },
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts
index fcc524ad1e..595384abaf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts
@@ -241,122 +241,3 @@ export interface TbFlotLatestKeySettings {
   thresholdLineWidth: number;
   thresholdColor: string;
 }
-
-export const flotPieSettingsSchema: JsonSettingsSchema = {
-    schema: {
-      type: 'object',
-      title: 'Settings',
-      properties: {
-        radius: {
-          title: 'Radius',
-          type: 'number',
-          default: 1
-        },
-        innerRadius: {
-          title: 'Inner radius',
-          type: 'number',
-          default: 0
-        },
-        tilt: {
-          title: 'Tilt',
-          type: 'number',
-          default: 1
-        },
-        animatedPie: {
-          title: 'Enable pie animation (experimental)',
-          type: 'boolean',
-          default: false
-        },
-        stroke: {
-          title: 'Stroke',
-          type: 'object',
-          properties: {
-            color: {
-              title: 'Color',
-              type: 'string',
-              default: ''
-            },
-            width: {
-              title: 'Width (pixels)',
-              type: 'number',
-              default: 0
-            }
-          }
-        },
-        showTooltip: {
-          title: 'Show Tooltip',
-          type: 'boolean',
-          default: true,
-        },
-        showLabels: {
-          title: 'Show labels',
-          type: 'boolean',
-          default: false
-        },
-        fontColor: {
-          title: 'Font color',
-          type: 'string',
-          default: '#545454'
-        },
-        fontSize: {
-          title: 'Font size',
-          type: 'number',
-          default: 10
-        }
-      },
-      required: []
-    },
-    form: [
-      'radius',
-      'innerRadius',
-      'animatedPie',
-      'tilt',
-      {
-        key: 'stroke',
-        items: [
-          {
-            key: 'stroke.color',
-            type: 'color'
-          },
-          'stroke.width'
-        ]
-      },
-      'showTooltip',
-      'showLabels',
-      {
-        key: 'fontColor',
-        type: 'color'
-      },
-      'fontSize'
-    ]
-};
-
-export const flotPieDatakeySettingsSchema: JsonSettingsSchema = {
-  schema: {
-    type: 'object',
-    title: 'DataKeySettings',
-    properties: {
-      hideDataByDefault: {
-        title: 'Data is hidden by default',
-        type: 'boolean',
-        default: false
-      },
-      disableDataHiding: {
-        title: 'Disable data hiding',
-        type: 'boolean',
-        default: false
-      },
-      removeFromLegend: {
-        title: 'Remove datakey from legend',
-        type: 'boolean',
-        default: false
-      }
-    },
-    required: []
-  },
-  form: [
-    'hideDataByDefault',
-    'disableDataHiding',
-    'removeFromLegend'
-  ]
-};
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts
index 2ed20870dc..979d60bb5b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts
@@ -38,8 +38,6 @@ import {
 } from '@app/shared/models/widget.models';
 import {
   ChartType,
-  flotPieDatakeySettingsSchema,
-  flotPieSettingsSchema,
   TbFlotAxisOptions,
   TbFlotHoverInfo,
   TbFlotKeySettings, TbFlotLatestKeySettings,
@@ -65,9 +63,6 @@ import Timeout = NodeJS.Timeout;
 const tinycolor = tinycolor_;
 const moment = moment_;
 
-const flotPieSettingsSchemaValue = flotPieSettingsSchema;
-const flotPieDatakeySettingsSchemaValue = flotPieDatakeySettingsSchema;
-
 export class TbFlot {
 
   private readonly utils: UtilsService;
@@ -130,14 +125,6 @@ export class TbFlot {
   private pieAnimationLastTime: number;
   private pieAnimationCaf: CancelAnimationFrame;
 
-  static pieSettingsSchema(): JsonSettingsSchema {
-    return flotPieSettingsSchemaValue;
-  }
-
-  static pieDatakeySettingsSchema(): JsonSettingsSchema {
-    return flotPieDatakeySettingsSchemaValue;
-  }
-
   constructor(private ctx: WidgetContext, private readonly chartType: ChartType) {
     this.chartType = this.chartType || 'line';
     this.settings = ctx.settings as TbFlotSettings;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
index f4148efc29..0a9d442775 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
@@ -53,6 +53,7 @@
         </mat-form-field>
         <tb-color-input
           formControlName="defaultBackgroundColor"
+          icon="format_color_fill"
           label="{{ 'widgets.dashboard-state.default-background-color' | translate }}" openOnInput colorClearButton>
         </tb-color-input>
         <mat-slide-toggle class="mat-slide" formControlName="syncParentStateParams">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
index 6273695954..9aa9fcc68c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
@@ -60,6 +60,7 @@
         </fieldset>
         <tb-color-input
           formControlName="backgroundColor"
+          icon="format_color_fill"
           label="{{ 'widgets.label-widget.background-color' | translate }}" openOnInput colorClearButton>
         </tb-color-input>
         <fieldset class="fields-group">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.html
new file mode 100644
index 0000000000..bd85fe47de
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.html
@@ -0,0 +1,25 @@
+<!--
+
+    Copyright © 2016-2022 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.
+
+-->
+<section class="tb-widget-settings" [formGroup]="chartWidgetSettingsForm" fxLayout="column">
+  <fieldset class="fields-group">
+    <legend class="group-title" translate>widgets.chart.common-settings</legend>
+    <mat-slide-toggle formControlName="showTooltip" class="slide-block">
+      {{ 'widgets.chart.show-tooltip' | translate }}
+    </mat-slide-toggle>
+  </fieldset>
+</section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.ts
new file mode 100644
index 0000000000..9b027c3ec3
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.ts
@@ -0,0 +1,52 @@
+///
+/// Copyright © 2016-2022 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, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+
+@Component({
+  selector: 'tb-chart-widget-settings',
+  templateUrl: './chart-widget-settings.component.html',
+  styleUrls: ['./../widget-settings.scss']
+})
+export class ChartWidgetSettingsComponent extends WidgetSettingsComponent {
+
+  chartWidgetSettingsForm: FormGroup;
+
+  constructor(protected store: Store<AppState>,
+              private fb: FormBuilder) {
+    super(store);
+  }
+
+  protected settingsForm(): FormGroup {
+    return this.chartWidgetSettingsForm;
+  }
+
+  protected defaultSettings(): WidgetSettings {
+    return {
+      showTooltip: true
+    };
+  }
+
+  protected onSettingsSet(settings: WidgetSettings) {
+    this.chartWidgetSettingsForm = this.fb.group({
+      showTooltip: [settings.showTooltip, []]
+    });
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
new file mode 100644
index 0000000000..8a25d692c5
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html
@@ -0,0 +1,64 @@
+<!--
+
+    Copyright © 2016-2022 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.
+
+-->
+<section class="tb-widget-settings" [formGroup]="doughnutChartWidgetSettingsForm" fxLayout="column">
+  <fieldset class="fields-group">
+    <legend class="group-title" translate>widgets.chart.common-settings</legend>
+    <mat-slide-toggle formControlName="showTooltip" class="slide-block">
+      {{ 'widgets.chart.show-tooltip' | translate }}
+    </mat-slide-toggle>
+  </fieldset>
+  <fieldset class="fields-group">
+    <legend class="group-title" translate>widgets.chart.border-settings</legend>
+    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+      <mat-form-field fxFlex class="mat-block">
+        <mat-label translate>widgets.chart.border-width</mat-label>
+        <input matInput type="number" min="0" formControlName="borderWidth">
+      </mat-form-field>
+      <tb-color-input fxFlex
+                      formControlName="borderColor"
+                      icon="format_color_fill"
+                      label="{{ 'widgets.chart.border-color' | translate }}" openOnInput colorClearButton>
+      </tb-color-input>
+    </section>
+  </fieldset>
+  <fieldset class="fields-group fields-group-slider" formGroupName="legend">
+    <legend class="group-title" translate>widgets.chart.legend-settings</legend>
+    <mat-expansion-panel class="tb-settings" [expanded]="doughnutChartWidgetSettingsForm.get('legend.display').value">
+      <mat-expansion-panel-header fxLayout="row wrap">
+        <mat-panel-title>
+          <mat-slide-toggle formControlName="display" (click)="$event.stopPropagation()"
+                            fxLayoutAlign="center">
+            {{ 'widgets.chart.display-legend' | translate }}
+          </mat-slide-toggle>
+        </mat-panel-title>
+        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+          widget-config.advanced-settings
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+      <ng-template matExpansionPanelContent>
+        <section fxLayout="column">
+          <tb-color-input fxFlex
+                          formControlName="labelsFontColor"
+                          icon="format_color_fill"
+                          label="{{ 'widgets.chart.labels-font-color' | translate }}" openOnInput colorClearButton>
+          </tb-color-input>
+        </section>
+      </ng-template>
+    </mat-expansion-panel>
+  </fieldset>
+</section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.ts
new file mode 100644
index 0000000000..171344c07e
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.ts
@@ -0,0 +1,87 @@
+///
+/// Copyright © 2016-2022 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, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+
+@Component({
+  selector: 'tb-doughnut-chart-widget-settings',
+  templateUrl: './doughnut-chart-widget-settings.component.html',
+  styleUrls: ['./../widget-settings.scss']
+})
+export class DoughnutChartWidgetSettingsComponent extends WidgetSettingsComponent {
+
+  doughnutChartWidgetSettingsForm: FormGroup;
+
+  constructor(protected store: Store<AppState>,
+              private fb: FormBuilder) {
+    super(store);
+  }
+
+  protected settingsForm(): FormGroup {
+    return this.doughnutChartWidgetSettingsForm;
+  }
+
+  protected defaultSettings(): WidgetSettings {
+    return {
+      showTooltip: true,
+      borderWidth: 5,
+      borderColor: '#fff',
+      legend: {
+        display: true,
+        labelsFontColor: '#666'
+      }
+    };
+  }
+
+  protected onSettingsSet(settings: WidgetSettings) {
+    this.doughnutChartWidgetSettingsForm = this.fb.group({
+
+      // Common settings
+
+      showTooltip: [settings.showTooltip, []],
+
+      // Border settings
+
+      borderWidth: [settings.borderWidth, [Validators.min(0)]],
+      borderColor: [settings.borderColor, []],
+
+      // Legend settings
+
+      legend: this.fb.group({
+        display: [settings.legend?.display, []],
+        labelsFontColor: [settings.legend?.labelsFontColor, []]
+      })
+    });
+  }
+
+  protected validatorTriggers(): string[] {
+    return ['legend.display'];
+  }
+
+  protected updateValidators(emitEvent: boolean) {
+    const displayLegend: boolean = this.doughnutChartWidgetSettingsForm.get('legend.display').value;
+    if (displayLegend) {
+      this.doughnutChartWidgetSettingsForm.get('legend.labelsFontColor').enable();
+    } else {
+      this.doughnutChartWidgetSettingsForm.get('legend.labelsFontColor').disable();
+    }
+    this.doughnutChartWidgetSettingsForm.get('legend.labelsFontColor').updateValueAndValidity({emitEvent});
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
index 81ebfc7c6f..9aec9b535f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
@@ -229,6 +229,7 @@
           </mat-form-field>
           <tb-color-input fxFlex
             formControlName="color"
+            icon="format_color_fill"
             label="{{ 'widgets.chart.color' | translate }}" openOnInput colorClearButton>
           </tb-color-input>
         </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
index 0e210366d5..b5b9009bd6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
@@ -38,6 +38,7 @@
           </mat-form-field>
           <tb-color-input fxFlex
                           formControlName="thresholdColor"
+                          icon="format_color_fill"
                           label="{{ 'widgets.chart.threshold-color' | translate }}" openOnInput colorClearButton>
           </tb-color-input>
         </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html
new file mode 100644
index 0000000000..8649e5e97d
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html
@@ -0,0 +1,31 @@
+<!--
+
+    Copyright © 2016-2022 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.
+
+-->
+<section class="tb-widget-settings" [formGroup]="flotPieKeySettingsForm" fxLayout="column">
+  <fieldset class="fields-group" fxLayout="column">
+    <legend class="group-title" translate>widgets.chart.common-settings</legend>
+    <mat-checkbox formControlName="hideDataByDefault" style="margin-bottom: 16px;">
+      {{ 'widgets.chart.data-is-hidden-by-default' | translate }}
+    </mat-checkbox>
+    <mat-checkbox formControlName="disableDataHiding" style="margin-bottom: 16px;">
+      {{ 'widgets.chart.disable-data-hiding' | translate }}
+    </mat-checkbox>
+    <mat-checkbox formControlName="removeFromLegend" style="margin-bottom: 16px;">
+      {{ 'widgets.chart.remove-from-legend' | translate }}
+    </mat-checkbox>
+  </fieldset>
+</section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.ts
new file mode 100644
index 0000000000..c9cab0cb06
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.ts
@@ -0,0 +1,60 @@
+///
+/// Copyright © 2016-2022 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, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+
+@Component({
+  selector: 'tb-flot-pie-key-settings',
+  templateUrl: './flot-pie-key-settings.component.html',
+  styleUrls: ['./../widget-settings.scss']
+})
+export class FlotPieKeySettingsComponent extends WidgetSettingsComponent {
+
+  flotPieKeySettingsForm: FormGroup;
+
+  constructor(protected store: Store<AppState>,
+              private fb: FormBuilder) {
+    super(store);
+  }
+
+  protected settingsForm(): FormGroup {
+    return this.flotPieKeySettingsForm;
+  }
+
+  protected defaultSettings(): WidgetSettings {
+    return {
+      hideDataByDefault: false,
+      disableDataHiding: false,
+      removeFromLegend: false
+    };
+  }
+
+  protected onSettingsSet(settings: WidgetSettings) {
+
+    this.flotPieKeySettingsForm = this.fb.group({
+
+      // Common settings
+
+      hideDataByDefault: [settings.hideDataByDefault, []],
+      disableDataHiding: [settings.disableDataHiding, []],
+      removeFromLegend: [settings.removeFromLegend, []]
+    });
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
new file mode 100644
index 0000000000..00f9573020
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
@@ -0,0 +1,62 @@
+<!--
+
+    Copyright © 2016-2022 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.
+
+-->
+<section class="tb-widget-settings" [formGroup]="flotPieWidgetSettingsForm" fxLayout="column">
+  <fieldset class="fields-group">
+    <legend class="group-title" translate>widgets.chart.common-pie-settings</legend>
+    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+      <mat-form-field fxFlex class="mat-block">
+        <mat-label translate>widgets.chart.radius</mat-label>
+        <input matInput type="number" min="0" formControlName="radius">
+      </mat-form-field>
+      <mat-form-field fxFlex class="mat-block">
+        <mat-label translate>widgets.chart.inner-radius</mat-label>
+        <input matInput type="number" min="0" formControlName="innerRadius">
+      </mat-form-field>
+      <mat-form-field fxFlex class="mat-block">
+        <mat-label translate>widgets.chart.tilt</mat-label>
+        <input matInput type="number" min="0" formControlName="tilt">
+      </mat-form-field>
+    </section>
+    <mat-slide-toggle formControlName="showLabels" class="slide-block">
+      {{ 'widgets.chart.show-labels' | translate }}
+    </mat-slide-toggle>
+    <mat-slide-toggle formControlName="showTooltip" class="slide-block">
+      {{ 'widgets.chart.show-tooltip' | translate }}
+    </mat-slide-toggle>
+  </fieldset>
+  <fieldset class="fields-group" formGroupName="stroke">
+    <legend class="group-title" translate>widgets.chart.stroke-settings</legend>
+    <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
+      <mat-form-field fxFlex class="mat-block">
+        <mat-label translate>widgets.chart.width-pixels</mat-label>
+        <input matInput type="number" min="0" formControlName="width">
+      </mat-form-field>
+      <tb-color-input fxFlex
+        formControlName="color"
+        icon="format_color_fill"
+        label="{{ 'widgets.chart.color' | translate }}" openOnInput colorClearButton>
+      </tb-color-input>
+    </section>
+  </fieldset>
+  <fieldset class="fields-group">
+    <legend class="group-title" translate>widgets.chart.animation-settings</legend>
+    <mat-slide-toggle formControlName="animatedPie" class="slide-block">
+      {{ 'widgets.chart.animated-pie' | translate }}
+    </mat-slide-toggle>
+  </fieldset>
+</section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.ts
new file mode 100644
index 0000000000..6ea9c18139
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.ts
@@ -0,0 +1,79 @@
+///
+/// Copyright © 2016-2022 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, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+
+@Component({
+  selector: 'tb-flot-pie-widget-settings',
+  templateUrl: './flot-pie-widget-settings.component.html',
+  styleUrls: ['./../widget-settings.scss']
+})
+export class FlotPieWidgetSettingsComponent extends WidgetSettingsComponent {
+
+  flotPieWidgetSettingsForm: FormGroup;
+
+  constructor(protected store: Store<AppState>,
+              private fb: FormBuilder) {
+    super(store);
+  }
+
+  protected settingsForm(): FormGroup {
+    return this.flotPieWidgetSettingsForm;
+  }
+
+  protected defaultSettings(): WidgetSettings {
+    return {
+      radius: 1,
+      innerRadius: 0,
+      tilt: 1,
+      stroke: {
+        color: '',
+        width: 0
+      },
+      showLabels: false,
+      showTooltip: true,
+      animatedPie: false
+    };
+  }
+
+  protected onSettingsSet(settings: WidgetSettings) {
+
+    this.flotPieWidgetSettingsForm = this.fb.group({
+
+      // Common pie settings
+
+      radius: [settings.radius, [Validators.min(0)]],
+      innerRadius: [settings.innerRadius, [Validators.min(0)]],
+      tilt: [settings.tilt, [Validators.min(0)]],
+
+      // Stroke settings
+
+      stroke: this.fb.group({
+        color: [settings.stroke?.color, []],
+        width: [settings.stroke?.width, [Validators.min(0)]]
+      }),
+
+      showLabels: [settings.showLabels, []],
+      showTooltip: [settings.showTooltip, []],
+
+      animatedPie: [settings.animatedPie, []],
+    });
+  }
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
index 9fdf98fec7..46278cc45e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
@@ -48,6 +48,7 @@
           </mat-form-field>
           <tb-color-input fxFlex
             formControlName="color"
+            icon="format_color_fill"
             label="{{ 'widgets.chart.color' | translate }}" openOnInput colorClearButton>
           </tb-color-input>
         </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
index 9f375368f7..2cf14d066d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
@@ -57,6 +57,7 @@
       </mat-form-field>
       <tb-color-input fxFlex
                       formControlName="fontColor"
+                      icon="format_color_fill"
                       label="{{ 'widgets.chart.default-font-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
     </section>
@@ -115,14 +116,17 @@
     </mat-form-field>
     <tb-color-input fxFlex
                     formControlName="color"
+                    icon="format_color_fill"
                     label="{{ 'widgets.chart.primary-color' | translate }}" openOnInput colorClearButton>
     </tb-color-input>
     <tb-color-input fxFlex
                     formControlName="backgroundColor"
+                    icon="format_color_fill"
                     label="{{ 'widgets.chart.background-color' | translate }}" openOnInput colorClearButton>
     </tb-color-input>
     <tb-color-input fxFlex
                     formControlName="tickColor"
+                    icon="format_color_fill"
                     label="{{ 'widgets.chart.ticks-color' | translate }}" openOnInput colorClearButton>
     </tb-color-input>
   </fieldset>
@@ -149,6 +153,7 @@
         <ng-template matExpansionPanelContent>
           <tb-color-input fxFlex
                           formControlName="color"
+                          icon="format_color_fill"
                           label="{{ 'widgets.chart.ticks-color' | translate }}" openOnInput colorClearButton>
           </tb-color-input>
         </ng-template>
@@ -188,6 +193,7 @@
         <ng-template matExpansionPanelContent>
           <tb-color-input fxFlex
                           formControlName="color"
+                          icon="format_color_fill"
                           label="{{ 'widgets.chart.ticks-color' | translate }}" openOnInput colorClearButton>
           </tb-color-input>
           <section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
index 3cc8899bcc..e076dadf59 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
@@ -16,60 +16,71 @@
 
 -->
 <section [formGroup]="widgetFontFormGroup" fxLayout="column">
-  <mat-form-field fxFlex class="mat-block">
-    <mat-label translate>widgets.widget-font.font-family</mat-label>
-    <input matInput formControlName="family">
-  </mat-form-field>
-  <mat-form-field fxFlex class="mat-block">
-    <mat-label translate>{{ sizeTitle }}</mat-label>
-    <input matInput type="number" min="1" step="1" formControlName="size">
-  </mat-form-field>
-  <mat-form-field fxFlex class="mat-block">
-    <mat-label translate>widgets.widget-font.font-style</mat-label>
-    <mat-select formControlName="style">
-      <mat-option [value]="'normal'">
-        {{ 'widgets.widget-font.font-style-normal' | translate }}
-      </mat-option>
-      <mat-option [value]="'italic'">
-        {{ 'widgets.widget-font.font-style-italic' | translate }}
-      </mat-option>
-      <mat-option [value]="'oblique'">
-        {{ 'widgets.widget-font.font-style-oblique' | translate }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-  <mat-form-field fxFlex class="mat-block">
-    <mat-label translate>widgets.widget-font.font-weight</mat-label>
-    <mat-select formControlName="weight">
-      <mat-option [value]="'normal'">
-        {{ 'widgets.widget-font.font-weight-normal' | translate }}
-      </mat-option>
-      <mat-option [value]="'bold'">
-        {{ 'widgets.widget-font.font-weight-bold' | translate }}
-      </mat-option>
-      <mat-option [value]="'bolder'">
-        {{ 'widgets.widget-font.font-weight-bolder' | translate }}
-      </mat-option>
-      <mat-option [value]="'lighter'">
-        {{ 'widgets.widget-font.font-weight-lighter' | translate }}
-      </mat-option>
-      <mat-option [value]="'100'">100</mat-option>
-      <mat-option [value]="'200'">200</mat-option>
-      <mat-option [value]="'300'">300</mat-option>
-      <mat-option [value]="'400'">400</mat-option>
-      <mat-option [value]="'500'">500</mat-option>
-      <mat-option [value]="'600'">600</mat-option>
-      <mat-option [value]="'700'">700</mat-option>
-      <mat-option [value]="'800'">800</mat-option>
-      <mat-option [value]="'900'">900</mat-option>
-    </mat-select>
-  </mat-form-field>
-  <tb-color-input
-    formControlName="color"
-    label="{{ 'widgets.widget-font.color' | translate }}" openOnInput colorClearButton>
-  </tb-color-input>
-  <tb-color-input *ngIf="hasShadowColor"
-    formControlName="shadowColor"
-    label="{{ 'widgets.widget-font.shadow-color' | translate }}" openOnInput colorClearButton>
-  </tb-color-input>
+  <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <mat-form-field fxFlex class="mat-block">
+      <mat-label translate>widgets.widget-font.font-family</mat-label>
+      <input matInput formControlName="family">
+    </mat-form-field>
+    <mat-form-field fxFlex class="mat-block">
+      <mat-label translate>{{ sizeTitle }}</mat-label>
+      <input matInput type="number" min="1" step="1" formControlName="size">
+    </mat-form-field>
+  </section>
+  <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <mat-form-field fxFlex class="mat-block">
+      <mat-label translate>widgets.widget-font.font-style</mat-label>
+      <mat-select formControlName="style">
+        <mat-option [value]="'normal'">
+          {{ 'widgets.widget-font.font-style-normal' | translate }}
+        </mat-option>
+        <mat-option [value]="'italic'">
+          {{ 'widgets.widget-font.font-style-italic' | translate }}
+        </mat-option>
+        <mat-option [value]="'oblique'">
+          {{ 'widgets.widget-font.font-style-oblique' | translate }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field fxFlex class="mat-block">
+      <mat-label translate>widgets.widget-font.font-weight</mat-label>
+      <mat-select formControlName="weight">
+        <mat-option [value]="'normal'">
+          {{ 'widgets.widget-font.font-weight-normal' | translate }}
+        </mat-option>
+        <mat-option [value]="'bold'">
+          {{ 'widgets.widget-font.font-weight-bold' | translate }}
+        </mat-option>
+        <mat-option [value]="'bolder'">
+          {{ 'widgets.widget-font.font-weight-bolder' | translate }}
+        </mat-option>
+        <mat-option [value]="'lighter'">
+          {{ 'widgets.widget-font.font-weight-lighter' | translate }}
+        </mat-option>
+        <mat-option [value]="'100'">100</mat-option>
+        <mat-option [value]="'200'">200</mat-option>
+        <mat-option [value]="'300'">300</mat-option>
+        <mat-option [value]="'400'">400</mat-option>
+        <mat-option [value]="'500'">500</mat-option>
+        <mat-option [value]="'600'">600</mat-option>
+        <mat-option [value]="'700'">700</mat-option>
+        <mat-option [value]="'800'">800</mat-option>
+        <mat-option [value]="'900'">900</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </section>
+  <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+    <tb-color-input
+      fxFlex
+      formControlName="color"
+      icon="format_color_fill"
+      label="{{ 'widgets.widget-font.color' | translate }}" openOnInput colorClearButton>
+    </tb-color-input>
+    <tb-color-input
+      *ngIf="hasShadowColor"
+      fxFlex
+      formControlName="shadowColor"
+      icon="format_color_fill"
+      label="{{ 'widgets.widget-font.shadow-color' | translate }}" openOnInput colorClearButton>
+    </tb-color-input>
+  </section>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
index c9fc848e95..3311c4d4e7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
@@ -39,6 +39,7 @@
     </mat-form-field>
     <tb-color-input fxFlex
                     formControlName="colorMajorTicks"
+                    icon="format_color_fill"
                     label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton>
     </tb-color-input>
     <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
@@ -48,6 +49,7 @@
       </mat-form-field>
       <tb-color-input fxFlex
                       formControlName="colorMinorTicks"
+                      icon="format_color_fill"
                       label="{{ 'widgets.gauge.minor-ticks-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
     </section>
@@ -63,6 +65,7 @@
     <legend class="group-title" translate>widgets.gauge.plate-settings</legend>
     <tb-color-input fxFlex
                     formControlName="colorPlate"
+                    icon="format_color_fill"
                     label="{{ 'widgets.gauge.plate-color' | translate }}" openOnInput colorClearButton>
     </tb-color-input>
     <mat-slide-toggle formControlName="showBorder" class="slide-block">
@@ -71,6 +74,7 @@
     <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <tb-color-input fxFlex
                       formControlName="colorBorder"
+                      icon="format_color_fill"
                       label="{{ 'widgets.gauge.border-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
       <mat-form-field fxFlex class="mat-block">
@@ -88,10 +92,12 @@
     <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <tb-color-input fxFlex
                       formControlName="colorNeedle"
+                      icon="format_color_fill"
                       label="{{ 'widgets.gauge.needle-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
       <tb-color-input fxFlex
                       formControlName="colorNeedleCircle"
+                      icon="format_color_fill"
                       label="{{ 'widgets.gauge.needle-circle-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
     </section>
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 f00e3d130d..3da794f7ab 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
@@ -26,6 +26,7 @@
   </ng-container>
   <tb-color-input
     formControlName="defaultColor"
+    icon="format_color_fill"
     label="{{ 'widgets.gauge.default-color' | translate }}" openOnInput colorClearButton>
   </tb-color-input>
   <fieldset class="fields-group">
@@ -47,6 +48,7 @@
       </mat-form-field>
       <tb-color-input fxFlex
                       formControlName="colorMajorTicks"
+                      icon="format_color_fill"
                       label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
     </section>
@@ -57,6 +59,7 @@
       </mat-form-field>
       <tb-color-input fxFlex
                       formControlName="colorMinorTicks"
+                      icon="format_color_fill"
                       label="{{ 'widgets.gauge.minor-ticks-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
     </section>
@@ -127,20 +130,24 @@
           <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
             <tb-color-input fxFlex
                             formControlName="colorValueBoxRect"
+                            icon="format_color_fill"
                             label="{{ 'widgets.gauge.value-box-rect-stroke-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
             <tb-color-input fxFlex
                             formControlName="colorValueBoxRectEnd"
+                            icon="format_color_fill"
                             label="{{ 'widgets.gauge.value-box-rect-stroke-color-end' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
           </section>
           <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
             <tb-color-input fxFlex
                             formControlName="colorValueBoxBackground"
+                            icon="format_color_fill"
                             label="{{ 'widgets.gauge.value-box-background-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
             <tb-color-input fxFlex
                             formControlName="colorValueBoxShadow"
+                            icon="format_color_fill"
                             label="{{ 'widgets.gauge.value-box-shadow-color' | translate }}" openOnInput colorClearButton>
             </tb-color-input>
           </section>
@@ -152,6 +159,7 @@
     <legend class="group-title" translate>widgets.gauge.plate-settings</legend>
     <tb-color-input fxFlex
                     formControlName="colorPlate"
+                    icon="format_color_fill"
                     label="{{ 'widgets.gauge.plate-color' | translate }}" openOnInput colorClearButton>
     </tb-color-input>
     <mat-slide-toggle formControlName="showBorder">
@@ -163,20 +171,24 @@
     <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <tb-color-input fxFlex
                       formControlName="colorNeedle"
+                      icon="format_color_fill"
                       label="{{ 'widgets.gauge.needle-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
       <tb-color-input fxFlex
                       formControlName="colorNeedleEnd"
+                      icon="format_color_fill"
                       label="{{ 'widgets.gauge.needle-color-end' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
     </section>
     <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <tb-color-input fxFlex
                       formControlName="colorNeedleShadowUp"
+                      icon="format_color_fill"
                       label="{{ 'widgets.gauge.needle-color-shadow-up' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
       <tb-color-input fxFlex
                       formControlName="colorNeedleShadowDown"
+                      icon="format_color_fill"
                       label="{{ 'widgets.gauge.needle-color-shadow-down' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
     </section>
@@ -309,26 +321,31 @@
       </mat-form-field>
       <tb-color-input fxFlex
                       formControlName="colorBarStroke"
+                      icon="format_color_fill"
                       label="{{ 'widgets.gauge.bar-stroke-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
     </section>
     <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <tb-color-input fxFlex
                       formControlName="colorBar"
+                      icon="format_color_fill"
                       label="{{ 'widgets.gauge.bar-background-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
       <tb-color-input fxFlex
                       formControlName="colorBarEnd"
+                      icon="format_color_fill"
                       label="{{ 'widgets.gauge.bar-background-color-end' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
     </section>
     <section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
       <tb-color-input fxFlex
                       formControlName="colorBarProgress"
+                      icon="format_color_fill"
                       label="{{ 'widgets.gauge.progress-bar-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
       <tb-color-input fxFlex
                       formControlName="colorBarProgressEnd"
+                      icon="format_color_fill"
                       label="{{ 'widgets.gauge.progress-bar-color-end' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
     </section>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
index 7ed47b81f0..0a70e8b5d6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
@@ -51,6 +51,7 @@
     </mat-form-field>
     <tb-color-input
       formControlName="defaultColor"
+      icon="format_color_fill"
       label="{{ 'widgets.gauge.default-color' | translate }}" openOnInput colorClearButton>
     </tb-color-input>
   </fieldset>
@@ -77,6 +78,7 @@
       <legend class="group-title" translate>widgets.gauge.bar-color-settings</legend>
       <tb-color-input
         formControlName="gaugeColor"
+        icon="format_color_fill"
         label="{{ 'widgets.gauge.bar-background-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
       <mat-slide-toggle class="slide-block" formControlName="useFixedLevelColor">
@@ -95,6 +97,7 @@
               </div>
               <tb-color-input fxFlex
                 [formControl]="levelColorControl"
+                icon="format_color_fill"
                 label="{{ 'widgets.gauge.color' | translate }}" openOnInput colorClearButton>
               </tb-color-input>
               <button mat-icon-button style="min-width: 40px;"
@@ -278,6 +281,7 @@
           </mat-form-field>
           <tb-color-input
             formControlName="colorTicks"
+            icon="format_color_fill"
             label="{{ 'widgets.gauge.tick-color' | translate }}" openOnInput colorClearButton>
           </tb-color-input>
           <fieldset class="fields-group">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.html
index 01fec01d3a..2ce85741d3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.html
@@ -51,6 +51,7 @@
         <tb-color-input
           required
           formControlName="color"
+          icon="format_color_fill"
           label="{{ 'widgets.gauge.color' | translate }}" openOnInput colorClearButton>
         </tb-color-input>
       </section>
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
index 80e4256e86..13c6f6f7ef 100644
--- 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
@@ -52,6 +52,7 @@
         </section>
         <tb-color-input
           formControlName="color"
+          icon="format_color_fill"
           label="{{ 'widgets.gauge.highlight-color' | translate }}" openOnInput colorClearButton>
         </tb-color-input>
       </section>
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 c6eb6ce5fe..3f81632178 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
@@ -94,6 +94,18 @@ import {
 import {
   FlotLatestKeySettingsComponent
 } from '@home/components/widget/lib/settings/chart/flot-latest-key-settings.component';
+import {
+  FlotPieWidgetSettingsComponent
+} from '@home/components/widget/lib/settings/chart/flot-pie-widget-settings.component';
+import {
+  FlotPieKeySettingsComponent
+} from '@home/components/widget/lib/settings/chart/flot-pie-key-settings.component';
+import {
+  ChartWidgetSettingsComponent
+} from '@home/components/widget/lib/settings/chart/chart-widget-settings.component';
+import {
+  DoughnutChartWidgetSettingsComponent
+} from '@home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component';
 
 @NgModule({
   declarations: [
@@ -129,7 +141,11 @@ import {
     FlotKeySettingsComponent,
     FlotLineKeySettingsComponent,
     FlotBarKeySettingsComponent,
-    FlotLatestKeySettingsComponent
+    FlotLatestKeySettingsComponent,
+    FlotPieWidgetSettingsComponent,
+    FlotPieKeySettingsComponent,
+    ChartWidgetSettingsComponent,
+    DoughnutChartWidgetSettingsComponent
   ],
   imports: [
     CommonModule,
@@ -169,7 +185,11 @@ import {
     FlotKeySettingsComponent,
     FlotLineKeySettingsComponent,
     FlotBarKeySettingsComponent,
-    FlotLatestKeySettingsComponent
+    FlotLatestKeySettingsComponent,
+    FlotPieWidgetSettingsComponent,
+    FlotPieKeySettingsComponent,
+    ChartWidgetSettingsComponent,
+    DoughnutChartWidgetSettingsComponent
   ]
 })
 export class WidgetSettingsModule {
@@ -198,5 +218,9 @@ export const widgetSettingsComponentsMap: {[key: string]: Type<IWidgetSettingsCo
   'tb-flot-bar-widget-settings': FlotBarWidgetSettingsComponent,
   'tb-flot-line-key-settings': FlotLineKeySettingsComponent,
   'tb-flot-bar-key-settings': FlotBarKeySettingsComponent,
-  'tb-flot-latest-key-settings': FlotLatestKeySettingsComponent
+  'tb-flot-latest-key-settings': FlotLatestKeySettingsComponent,
+  'tb-flot-pie-widget-settings': FlotPieWidgetSettingsComponent,
+  'tb-flot-pie-key-settings': FlotPieKeySettingsComponent,
+  'tb-chart-widget-settings': ChartWidgetSettingsComponent,
+  'tb-doughnut-chart-widget-settings': DoughnutChartWidgetSettingsComponent
 };
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index a88bd58244..1e956c3cf2 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3275,7 +3275,22 @@
             "threshold-settings": "Threshold settings",
             "use-as-threshold": "Use key value as threshold",
             "threshold-line-width": "Threshold line width",
-            "threshold-color": "Threshold color"
+            "threshold-color": "Threshold color",
+            "common-pie-settings": "Common pie settings",
+            "radius": "Radius",
+            "inner-radius": "Inner radius",
+            "tilt": "Tilt",
+            "stroke-settings": "Stroke settings",
+            "width-pixels": "Width (pixels)",
+            "show-labels": "Show labels",
+            "animation-settings": "Animation settings",
+            "animated-pie": "Enable pie animation (experimental)",
+            "border-settings": "Border settings",
+            "border-width": "Border width",
+            "border-color": "Border color",
+            "legend-settings": "Legend settings",
+            "display-legend": "Display legend",
+            "labels-font-color": "Labels font color"
         },
         "dashboard-state": {
             "dashboard-state-settings": "Dashboard state settings",