This flow shows some examples of using msg.ui_update to change the appearance of a pie chart.
Available options are listed at https://echarts.apache.org/en/option.html
Caveats
It is not intended as a tool to design pie charts.You can change element size and positions, but the widget is still displayed at a size of the dashboard's choosing.
It is easy to break the chart options, but not necessarily obvious that they are broken.
Settings can be very persistent.
To fully reset the dashboard you might need to restart node-red and clear the browser cache.
Code
[{"id":"c92fa447f93ccd52","type":"tab","label":"ui_update","disabled":false,"info":"","env":[]},{"id":"b382113aba6130af","type":"group","z":"c92fa447f93ccd52","name":"Title","style":{"label":true},"nodes":["bf8109b10b8889dc","24d495deb9ab342a","0428cd955379de57","c357d0aacce0d10d"],"x":14,"y":139,"w":192,"h":202},{"id":"e739bf09bf21bac6","type":"group","z":"c92fa447f93ccd52","name":"Legend","style":{"label":true},"nodes":["0c7ec8e78494de97","3c9469c24967af1f","6d2218f0365d16d2"],"x":14,"y":359,"w":192,"h":162},{"id":"12af821f48cde5b5","type":"group","z":"c92fa447f93ccd52","name":"Controls","style":{"label":true},"nodes":["fc174fb26fc43ef6","21db0d6bb0d3bf86","512399eacca33e34","9e9ff2e59d79fde8"],"x":14,"y":-1,"w":632,"h":122},{"id":"e02b09665b38ec4d","type":"group","z":"c92fa447f93ccd52","name":"Pie","style":{"label":true},"nodes":["ba4b3fbe2a45c9e8","05c4c26484e2c625","fb7d1318e9555eb8","8e6834a8aa566633","72c8610d507c5ffe"],"x":14,"y":539,"w":192,"h":242},{"id":"fc174fb26fc43ef6","type":"ui-button","z":"c92fa447f93ccd52","g":"12af821f48cde5b5","group":"58c9e23af88edc69","name":"","label":"1 Clear Charts","order":1,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"[]","payloadType":"json","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":120,"y":40,"wires":[["c18bfb65bac66ca8"]]},{"id":"21db0d6bb0d3bf86","type":"ui-button","z":"c92fa447f93ccd52","g":"12af821f48cde5b5","group":"58c9e23af88edc69","name":"","label":"3 Initial Data","order":3,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"generation","topicType":"str","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":390,"y":40,"wires":[["d6b205901b7756b2"]]},{"id":"c59c2afbc160261f","type":"ui-template","z":"c92fa447f93ccd52","group":"","page":"6656fb14ebb2b340","ui":"","name":"CSS Outlines","order":0,"width":0,"height":0,"head":"","format":".red.nrdb-ui-widget {\n outline: 1px solid red;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":620,"y":260,"wires":[[]]},{"id":"d6b205901b7756b2","type":"change","z":"c92fa447f93ccd52","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"[{\"fuel\":\"biomass\",\"perc\":8.6},{\"fuel\":\"coal\",\"perc\":0},{\"fuel\":\"imports\",\"perc\":10.7},{\"fuel\":\"gas\",\"perc\":38.5},{\"fuel\":\"nuclear\",\"perc\":11.3},{\"fuel\":\"other\",\"perc\":0},{\"fuel\":\"hydro\",\"perc\":0},{\"fuel\":\"solar\",\"perc\":0},{\"fuel\":\"wind\",\"perc\":30.9}]","tot":"json"},{"t":"set","p":"topic","pt":"msg","to":"generation","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":160,"wires":[["c18bfb65bac66ca8"]]},{"id":"c18bfb65bac66ca8","type":"ui-chart","z":"c92fa447f93ccd52","group":"91a81e37e2bafe93","name":"Chart","label":"Latest UK Generation Mix","order":1,"chartType":"pie","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"fuel","xAxisPropertyType":"property","xAxisType":"radial","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"perc","yAxisPropertyType":"property","ymin":"","ymax":"","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"6","height":"8","className":"red","interpolation":"linear","x":550,"y":340,"wires":[[]]},{"id":"11fc6323fa17aea7","type":"function","z":"c92fa447f93ccd52","name":"Build ui_update","func":"function resetoptions () {\n // 3 context objects titleoptions, legendoptions & titleoptions\n context.set( \"titleoptions\", undefined)\n context.set( \"legendoptions\", undefined)\n context.set( \"seriesoptions\", undefined)\n}\n\nif ( msg.topic === \"reset\") { \n resetoptions()\n}\n\nlet titleoptions = context.get(\"titleoptions\") ?? {\"text\": 'Latest UK Generation Mix',\n \"left\": \"center\",\n \"top\": \"auto\",\n \"textStyle\": {\"fontFamily\": \"sans-serif\",\n \"fontSize\": 19 }\n }\nlet legendoptions = context.get(\"legendoptions\") ?? {\"show\": \"true\",\n \"orient\": \"horizontal\",\n \"left\": \"5%\",\n \"right\": \"5%\",\n \"top\": 30,\n \"bottom\": \"auto\",\n \"width\": \"90%\",\n \"height\": \"auto\",\n \"itemHeight\": 13,\n \"itemStyle\": { \"borderWidth\": 0,\n \"borderColor\": \"inherit\" },\n \"selectedMode\": true,\n \"textStyle\": { \"fontSize\": 12,\n \"fontFamily\": \"sans-serif\" },\n \"icon\": \"roundRect\",\n \"backgroundColor\": \"transparent\",\n \"borderColor\": \"#ccc\",\n \"borderWidth\": 0,\n \"borderRadius\": 0 \n }\nlet seriesoptions = context.get(\"seriesoptions\") ?? [\n { \"name\": \"generation\", // Must match the value set in gauge config\n \"type\": \"pie\",\n \"radius\": [0, '65%'],\n \"center\": [\"50%\", \"50%\"], // position (x, y)\n \"right\": 0,\n \"itemStyle\": {\"borderWidth\": 2, \"borderColor\": '#fff'},\n \"label\": {\"show\": true}\n }]\n\n\nif (msg.topic === \"title\") {\n titleoptions.text = msg.payload\n}\nif (msg.topic === \"titlefont\") {\n titleoptions.textStyle.fontFamily = msg.payload\n}\nif (msg.topic === \"titleplacement\") {\n titleoptions.top = msg.payload\n // Also move the pie up/down\n}\nif (msg.topic === \"fontsize\") {\n titleoptions.textStyle.fontSize = msg.payload\n}\n\nif (msg.topic === \"legendshape\") {\n legendoptions.icon = msg.payload\n}\nif (msg.topic === \"legendsize\") {\n legendoptions.textStyle.fontSize = msg.payload\n}\nif (msg.topic === \"legendplacement\") {\n if (msg.payload === \"right\") {\n legendoptions.orient = \"vertical\"\n legendoptions.right = 20\n legendoptions.left = \"auto\"\n legendoptions.top = \"auto\"\n legendoptions.bottom = 40\n legendoptions.backgroundColor = \"rgba(0, 0, 0, 0.03)\"\n legendoptions.borderColor = \"#000\",\n legendoptions.borderWidth = 2,\n legendoptions.borderRadius = 10\n legendoptions.itemHeight = 18,\n legendoptions.textStyle = { \"fontSize\": 18, \"fontFamily\": \"serif\" },\n legendoptions.itemStyle = { \"borderWidth\": 1, \"borderColor\": \"#000\" }\n }\n else { // top\n\n legendoptions.orient = \"horizontal\"\n legendoptions.left = \"5%\"\n legendoptions.right = \"5%\"\n legendoptions.top = 30\n legendoptions.bottom = \"auto\",\n legendoptions.width = \"90%\"\n legendoptions.height = \"auto\"\n legendoptions.itemHeight = 13\n legendoptions.itemStyle = {\n \"borderWidth\": 0,\n \"borderColor\": \"inherit\"\n },\n legendoptions.textStyle = {\n \"fontSize\": 12,\n \"fontFamily\": \"sans-serif\"\n }\n legendoptions.backgroundColor = \"transparent\"\n legendoptions.borderColor = \"#ccc\"\n legendoptions.borderWidth = 0\n legendoptions.borderRadius = 0\n }\n }\n\nif (msg.topic === \"pieborder\") {\n if (msg.payload === true) {\n seriesoptions[0].itemStyle = {\"borderWidth\": 1, \"borderColor\": \"#000\"}\n }\n else {\n seriesoptions[0].itemStyle = {\"borderWidth\": 2, \"borderColor\": \"#fff\"}\n }\n}\nif (msg.topic === \"pieradius\") {\n seriesoptions[0].radius = [0, msg.payload + \"%\"]\n}\nif (msg.topic === \"pievertical\") {\n seriesoptions[0].center[1] = msg.payload + \"%\"\n}\nif (msg.topic === \"piehorizontal\") {\n seriesoptions[0].center[0] = msg.payload + \"%\"\n}\nif (msg.topic === \"pielabels\") {\n seriesoptions[0].label = {\"show\": msg.payload}\n}\n\n \ncontext.set(\"titleoptions\", titleoptions)\ncontext.set(\"legendoptions\", legendoptions)\ncontext.set(\"seriesoptions\", seriesoptions)\n\nmsg = {\n ui_update: {\n \"chartOptions\": {\n \"series\": seriesoptions,\n \"title\": titleoptions,\n \"legend\": legendoptions\n }\n }\n}\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":340,"wires":[["c18bfb65bac66ca8","5982cbd20ed1eaa1"]]},{"id":"ba4b3fbe2a45c9e8","type":"ui-slider","z":"c92fa447f93ccd52","g":"e02b09665b38ec4d","group":"0d16065db23dda2d","name":"","label":"radius %","tooltip":"","order":1,"width":0,"height":0,"passthru":false,"outs":"all","topic":"pieradius","topicType":"str","thumbLabel":"true","showTicks":"false","min":0,"max":"100","step":"5","className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","showTextField":false,"x":120,"y":580,"wires":[["11fc6323fa17aea7"]]},{"id":"bf8109b10b8889dc","type":"ui-text-input","z":"c92fa447f93ccd52","g":"b382113aba6130af","group":"81e249fb1607d7e1","name":"","label":"Title","order":1,"width":0,"height":0,"topic":"title","topicType":"str","mode":"text","tooltip":"","delay":300,"passthru":true,"sendOnDelay":false,"sendOnBlur":true,"sendOnEnter":true,"className":"","clearable":false,"sendOnClear":false,"icon":"","iconPosition":"left","iconInnerPosition":"inside","x":130,"y":180,"wires":[["11fc6323fa17aea7"]]},{"id":"24d495deb9ab342a","type":"ui-slider","z":"c92fa447f93ccd52","g":"b382113aba6130af","group":"81e249fb1607d7e1","name":"","label":"Size","tooltip":"","order":3,"width":"3","height":"1","passthru":false,"outs":"all","topic":"fontsize","topicType":"str","thumbLabel":"true","showTicks":"false","min":"8","max":"60","step":1,"className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","showTextField":false,"x":130,"y":260,"wires":[["11fc6323fa17aea7"]]},{"id":"261c619f0f698f4b","type":"ui-template","z":"c92fa447f93ccd52","group":"32d7d4db7b2f06ef","page":"","ui":"","name":"Display msg.ui_update","order":1,"width":0,"height":0,"head":"","format":"<template>\n <div class=\"code\">\n {{msg.payload}}\n </div>\n</template>\n<style>\n .code {\n font-family: monospace; \n font-size: 10px; \n line-height: 12px; \n white-space: pre-wrap;\n }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":600,"y":420,"wires":[[]]},{"id":"5982cbd20ed1eaa1","type":"function","z":"c92fa447f93ccd52","name":"Stringify","func":"msg.payload = JSON.stringify(msg.ui_update, null, 2)\nreturn msg","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":560,"y":380,"wires":[["261c619f0f698f4b"]]},{"id":"512399eacca33e34","type":"ui-button","z":"c92fa447f93ccd52","g":"12af821f48cde5b5","group":"58c9e23af88edc69","name":"","label":"Reset All","order":4,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"reset","topicType":"str","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":560,"y":80,"wires":[["11fc6323fa17aea7"]]},{"id":"0c7ec8e78494de97","type":"ui-radio-group","z":"c92fa447f93ccd52","g":"e739bf09bf21bac6","group":"9a3003145ae747a3","name":"","label":"Placement","order":1,"width":0,"height":0,"columns":"2","passthru":false,"options":[{"label":"🡅","value":"top","type":"str"},{"label":"🡆","value":"right","type":"str"}],"payload":"","topic":"legendplacement","topicType":"str","className":"","x":110,"y":400,"wires":[["11fc6323fa17aea7"]]},{"id":"3c9469c24967af1f","type":"ui-radio-group","z":"c92fa447f93ccd52","g":"e739bf09bf21bac6","group":"9a3003145ae747a3","name":"","label":"Shape","order":3,"width":0,"height":0,"columns":"2","passthru":false,"options":[{"label":"⏺","value":"circle","type":"str"},{"label":"⏹","value":"roundRect","type":"str"}],"payload":"","topic":"legendshape","topicType":"str","className":"","x":130,"y":480,"wires":[["11fc6323fa17aea7"]]},{"id":"0428cd955379de57","type":"ui-radio-group","z":"c92fa447f93ccd52","g":"b382113aba6130af","group":"81e249fb1607d7e1","name":"","label":"Placement","order":2,"width":0,"height":0,"columns":"2","passthru":false,"options":[{"label":"🡅","value":"top","type":"str"},{"label":"🡇","value":"bottom","type":"str"}],"payload":"","topic":"titleplacement","topicType":"str","className":"","x":110,"y":220,"wires":[["11fc6323fa17aea7"]]},{"id":"c357d0aacce0d10d","type":"ui-radio-group","z":"c92fa447f93ccd52","g":"b382113aba6130af","group":"81e249fb1607d7e1","name":"","label":"Style","order":4,"width":0,"height":0,"columns":"2","passthru":false,"options":[{"label":"Sans","value":"comic sans ms","type":"str"},{"label":"Serif","value":"times new roman","type":"str"}],"payload":"","topic":"titlefont","topicType":"str","className":"","x":130,"y":300,"wires":[["11fc6323fa17aea7"]]},{"id":"05c4c26484e2c625","type":"ui-radio-group","z":"c92fa447f93ccd52","g":"e02b09665b38ec4d","group":"0d16065db23dda2d","name":"","label":"Border","order":4,"width":0,"height":0,"columns":"2","passthru":false,"options":[{"label":"✅","value":true,"type":"bool"},{"label":"❎","value":false,"type":"bool"}],"payload":"","topic":"pieborder","topicType":"str","className":"","x":130,"y":700,"wires":[["11fc6323fa17aea7"]]},{"id":"6d2218f0365d16d2","type":"ui-slider","z":"c92fa447f93ccd52","g":"e739bf09bf21bac6","group":"9a3003145ae747a3","name":"","label":"Size","tooltip":"","order":2,"width":"3","height":"1","passthru":false,"outs":"all","topic":"legendsize","topicType":"str","thumbLabel":"true","showTicks":"false","min":"12","max":"32","step":"2","className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","showTextField":false,"x":130,"y":440,"wires":[["11fc6323fa17aea7"]]},{"id":"fb7d1318e9555eb8","type":"ui-slider","z":"c92fa447f93ccd52","g":"e02b09665b38ec4d","group":"0d16065db23dda2d","name":"","label":"PlacementV","tooltip":"","order":3,"width":"2","height":"1","passthru":false,"outs":"all","topic":"pievertical","topicType":"str","thumbLabel":"true","showTicks":"false","min":0,"max":"100","step":1,"className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","showTextField":false,"x":110,"y":660,"wires":[["11fc6323fa17aea7"]]},{"id":"8e6834a8aa566633","type":"ui-slider","z":"c92fa447f93ccd52","g":"e02b09665b38ec4d","group":"0d16065db23dda2d","name":"","label":"PlacementH","tooltip":"","order":2,"width":"2","height":"1","passthru":false,"outs":"all","topic":"piehorizontal","topicType":"str","thumbLabel":"true","showTicks":"false","min":0,"max":"100","step":1,"className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","showTextField":false,"x":110,"y":620,"wires":[["11fc6323fa17aea7"]]},{"id":"72c8610d507c5ffe","type":"ui-radio-group","z":"c92fa447f93ccd52","g":"e02b09665b38ec4d","group":"0d16065db23dda2d","name":"","label":"Labels","order":5,"width":0,"height":0,"columns":"2","passthru":false,"options":[{"label":"✅","value":true,"type":"bool"},{"label":"❎","value":false,"type":"bool"}],"payload":"","topic":"pielabels","topicType":"str","className":"","x":130,"y":740,"wires":[["11fc6323fa17aea7"]]},{"id":"9e9ff2e59d79fde8","type":"ui-text","z":"c92fa447f93ccd52","g":"12af821f48cde5b5","group":"58c9e23af88edc69","order":2,"width":"2","height":"1","name":"","label":"2 Now restart Node-red","format":"{{msg.payload}}","layout":"col-center","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","value":" & clear browser cache","valueType":"str","x":270,"y":80,"wires":[]},{"id":"58c9e23af88edc69","type":"ui-group","name":"Controls","page":"6656fb14ebb2b340","width":"12","height":1,"order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"6656fb14ebb2b340","type":"ui-page","name":"Pies","ui":"d0aaeb56c796f1d4","path":"/pies","icon":"home","layout":"grid","theme":"57e1923decfbf45b","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":true,"disabled":false},{"id":"91a81e37e2bafe93","type":"ui-group","name":"Chart","page":"6656fb14ebb2b340","width":6,"height":1,"order":2,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"0d16065db23dda2d","type":"ui-group","name":"Pie Options","page":"6656fb14ebb2b340","width":"2","height":1,"order":5,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"81e249fb1607d7e1","type":"ui-group","name":"Title Options","page":"6656fb14ebb2b340","width":"2","height":1,"order":3,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"32d7d4db7b2f06ef","type":"ui-group","name":"Output msg.ui_update","page":"6656fb14ebb2b340","width":6,"height":1,"order":6,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"9a3003145ae747a3","type":"ui-group","name":"Legend Options","page":"6656fb14ebb2b340","width":"2","height":1,"order":4,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"d0aaeb56c796f1d4","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":true},{"id":"57e1923decfbf45b","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"2px","density":"default"}},{"id":"baf689ecfd1d19a1","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.1"}}]
