This a useful gauge, again by eCharts. It's like a thermostat that displays 2 sets of data, which could be the 'set' temperature, and the 'actual' temperature.
[{"id":"2582a4c3e5ae0e0e","type":"flexdash custom","z":"1543d308b342690a","fd_container":"28d1859702cdf729","fd_cols":"3","fd_rows":"4","fd_array":false,"fd_array_max":10,"fd_output_topic":"","fd_loopback":false,"name":"Temp Echarts","title":"Temperature","sfc_source":"<template>\n <v-chart class=\"chart\" :option=\"option\" autoresize />\n</template>\n\n<style scoped>\n.chart {\n height: 100%;\n}\n</style>\n\n<script>\nimport { use } from 'echarts/core'\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { GaugeChart } from 'echarts/charts'\nimport {\n TitleComponent,\n TooltipComponent,\n LegendComponent,\n} from 'echarts/components';\n\nimport VChart, { THEME_KEY } from 'vue-echarts'\nuse([\n CanvasRenderer,\n GaugeChart,\n TitleComponent,\n TooltipComponent,\n LegendComponent,\n]);\n\nexport default {\n // Props are the inputs to the widget.\n // They can be set dynamically using Node-RED messages using `msg.<prop>`.\n // In a \"custom widget\" like this one they cannot be set via the Node-RED flow editor:\n // use the default values in the lines below instead.\n props: {\n option: { default: {} },\n },\n components: { VChart },\n}\n</script>\n","import_map":{"echarts/core":"https://cdn.jsdelivr.net/npm/echarts/dist/echarts.esm.js","echarts/renderers":"https://esm.sh/echarts/renderers","echarts/charts":"https://esm.sh/echarts/charts","echarts/components":"https://esm.sh/echarts/components","vue-echarts":"https://cdn.jsdelivr.net/npm/vue-echarts@6.3.3/dist/index.esm.min.js","vue-demi":"https://cdn.jsdelivr.net/npm/vue-demi@0.13.11/lib/v3/index.mjs","resize-detector":"https://cdn.jsdelivr.net/npm/resize-detector@0.3.0/esm/index.js"},"x":600,"y":2095,"wires":[[]]},{"id":"e58479387d184238","type":"function","z":"1543d308b342690a","name":"Temp Echarts Options","func":"const dataValue = msg.payload\nconst option = {\n series: [\n {\n type: 'gauge',\n center: ['50%', '60%'],\n startAngle: 200,\n endAngle: -20,\n min: 0,\n max: 30,\n splitNumber: 6,\n itemStyle: {\n color: '#FFAB91'\n },\n progress: {\n show: true,\n width: 30\n },\n pointer: {\n show: false\n },\n axisLine: {\n lineStyle: {\n width: 30\n }\n },\n axisTick: {\n distance: -45,\n splitNumber: 5,\n lineStyle: {\n width: 2,\n color: '#999'\n }\n },\n splitLine: {\n distance: -52,\n length: 14,\n lineStyle: {\n width: 3,\n color: '#999'\n }\n },\n axisLabel: {\n distance: 0,\n color: '#999',\n fontSize: 14\n },\n anchor: {\n show: false\n },\n title: {\n show: false\n },\n detail: {\n valueAnimation: true,\n width: '60%',\n lineHeight: 40,\n borderRadius: 8,\n offsetCenter: [0, '-15%'],\n fontSize: 40,\n fontWeight: 'bolder',\n formatter: '{value}Ā°C',\n color: 'auto'\n },\n data: [\n {\n value: dataValue[0]\n }\n ]\n },\n {\n type: 'gauge',\n center: ['50%', '60%'],\n startAngle: 200,\n endAngle: -20,\n min: 0,\n max: 30,\n itemStyle: {\n color: '#FD7347'\n },\n progress: {\n show: true,\n width: 8\n },\n pointer: {\n show: false\n },\n axisLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n splitLine: {\n show: false\n },\n axisLabel: {\n show: false\n },\n detail: {\n show: false\n },\n data: [\n {\n value: dataValue[1]\n }\n ]\n }\n ]\n};\n\nreturn { option }","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":395,"y":2095,"wires":[["2582a4c3e5ae0e0e"]]},{"id":"b5f4e4a81a8f611d","type":"function","z":"1543d308b342690a","name":"dummy data","func":"const arr = [[10,15],[11,15],[12,15],[13,15],[14,15],[15,15],[15,19],[16,19],[17,19],[18,19],[19,19],[19,13],[17,13],[15,13],[13,13],[12,13],[11,13],[10,14],[10,15]];\n\narr.map((element) => {\n node.send({payload: element});\n});","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":145,"y":2110,"wires":[["bb59284a87ad2e26"]]},{"id":"777a123d12f6cff9","type":"inject","z":"1543d308b342690a","name":"","props":[{"p":"payload"}],"repeat":"19","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":130,"y":2065,"wires":[["b5f4e4a81a8f611d"]]},{"id":"bb59284a87ad2e26","type":"delay","z":"1543d308b342690a","name":"","pauseType":"rate","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":140,"y":2155,"wires":[["e58479387d184238"]]},{"id":"28d1859702cdf729","type":"flexdash container","name":"charts","kind":"StdGrid","fd_children":",d2dbe97c44f6fb5a,d2b3883a74adc563,ab904c40d22f83e1,527401ee602f4386,4f31b9c704e0b947,a8dfa00ae270ac88,b27685878ffe3711,8713c375979525c8,5021eeaf697e64c2,02a8193ebdb37b8f,4ba2dad94e5ffd6f,5aa2f5882d6d108c,99d0a46353e4f3f8,8db95e700c175b9c,27e8564637493f56,2582a4c3e5ae0e0e,9f44bd0b2968a316","title":"","tab":"9f23b0158f8280e3","min_cols":"1","max_cols":"20","unicast":"","parent":"","solid":false,"cols":"1","rows":"1"},{"id":"9f23b0158f8280e3","type":"flexdash tab","name":"charts","icon":"mdi-chart-line","title":"charts","fd_children":",28d1859702cdf729","fd":"e8f5aea52ab49500"}]
Thanks David, no, not yet, I want to explore eCharts & Flexdash a little more before doing so. Possibly looking at other chart libraries as well.
