# Echarts Flexdash Gauges

**URL:** <https://discourse.nodered.org/t/echarts-flexdash-gauges/72748>\
**Category:** General\
**Tags:** flexdash\
**Created:** [26 December 2022 20:47 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748 "2022-12-26T20:47:49Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [30 December 2022 17:06 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/21 "2022-12-30T17:06:36Z")

</div>

> [@tve](#):
>
> if someone can show the gauges that Paul demoed here in ui\_template node I can make it work in FD as well...

My demos above are running in Flexdash, not ui\_templates!

I mentioned 'Minimum bundle' because I noticed the below in the echart's code example;

![echarts](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/8/d8f224f74cfc54273b725f760b46857a9994b42a.gif)

> **[Examples - Apache ECharts](https://echarts.apache.org/examples/en/editor.html?c=gauge-stage)**
>
> Apache ECharts, a powerful, interactive charting and visualization library for browser

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [30 December 2022 17:11 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/22 "2022-12-30T17:11:07Z")

</div>

> [@Paul-Reed](#):
>
> My demos above are running in Flexdash, not ui\_templates!

I know. My comment was towards:

> [@davidz](#):
>
> With Flexdash, probably you can do this similarly?

It's not a FD issue, it's an Echarts issue. If davidz can show how to produce your gauges by:

> [@davidz](#):
>
> If you use dashboard, then you can download "echarts.min.js" (about 1MB) and put into your Node-RED static directory.

then I can do the same with FD...  
(The only difference that I'm aware of is that the Echarts online package builder produces UMD/CJS while the Vue-Echarts needs ESM, so there are some easier options there, but I can hack around that by now...)

I'm looking at that interface now to see whether it has the answer...

**Update** : there may be something to this... What's confusing is that when you flip to "minimal bundle" you get:

```auto
import { GaugeChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([GaugeChart, CanvasRenderer]);

```

and the GaugeChart and CanvasRenderer symbols are not present at all in the "full echarts" package. So it looked to me like they're not included. But in the options these symbols are not referenced, e.g., the only thing that refers to a gauge is `type: 'gauge',` and that's the same either way.

Adding to the confusion is that VueEcharts has `import ... from "echarts/core"` ([vue-echarts/src/ECharts.ts at main · ecomfe/vue-echarts · GitHub](https://github.com/ecomfe/vue-echarts/blob/main/src/ECharts.ts#L20)) so it's kind'a locked into the minimal bundle path, it seems...

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [30 December 2022 17:52 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/23 "2022-12-30T17:52:57Z")

</div>

Aha, so thanks to Paul for pointing out that UI which lead down the right path! I think the solution is to not use vue-echarts. Try this:

```auto
[{"id":"2582a4c3e5ae0e0e","type":"flexdash custom","z":"721f0a5cbd48a85d","fd_container":"db08ae42228b5a34","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 <div class=\"chart\" ref=\"echarts-container\">Loading echart...</div>\n</template>\n\n<style scoped>\n.chart {\n height: 100%;\n width: 100%;\n}\n</style>\n\n<script>\nimport * as echarts from 'echarts';\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 random: { default: false }, // inject random data\n },\n mounted() {\n const ec = this.$refs[\"echarts-container\"]\n this.chart = echarts.init(ec) // this.chart is not reactive\n console.log(\"Echart mounted\")\n },\n watch: {\n option: {\n immediate: true,\n deep: true,\n handler(val) {\n console.log(\"got options\", JSON.stringify(val).substring(0,40))\n if (this.chart) this.chart.setOption(val)\n }\n },\n }\n}\n</script>\n","import_map":{"echarts":"https://cdn.jsdelivr.net/npm/echarts/dist/echarts.esm.js","resize-detector":"https://cdn.jsdelivr.net/npm/resize-detector@0.3.0/esm/index.js"},"x":300,"y":420,"wires":[[]]},{"id":"e58479387d184238","type":"function","z":"721f0a5cbd48a85d","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":220,"y":340,"wires":[["2582a4c3e5ae0e0e"]]},{"id":"b5f4e4a81a8f611d","type":"function","z":"721f0a5cbd48a85d","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":125,"y":215,"wires":[["bb59284a87ad2e26"]]},{"id":"777a123d12f6cff9","type":"inject","z":"721f0a5cbd48a85d","name":"","props":[{"p":"payload"}],"repeat":"19","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":110,"y":170,"wires":[["b5f4e4a81a8f611d"]]},{"id":"bb59284a87ad2e26","type":"delay","z":"721f0a5cbd48a85d","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":120,"y":260,"wires":[["e58479387d184238"]]},{"id":"db08ae42228b5a34","type":"flexdash container","name":"Grid One","kind":"StdGrid","fd_children":",05665b48e63afba4,2582a4c3e5ae0e0e","title":"One","tab":"523e209a21919b0b","min_cols":"1","max_cols":"20","unicast":"ignore","parent":"","solid":false,"cols":"1","rows":"1"},{"id":"523e209a21919b0b","type":"flexdash tab","name":"Tab One","icon":"mdi-view-dashboard","title":"One","fd_children":",db08ae42228b5a34","fd":"5fec7c7287e94234"}]

```

This is just a minimal version, it probably doesn't resize well and there may be additional things that need to be handled. I didn't see that vue-echarts does a whole lot though.

(Ooops, I left the "random" prop in, it doesn't do anything...)

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [30 December 2022 18:23 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/24 "2022-12-30T18:23:04Z")

</div>

> [@tve](#):
>
> I think the solution is to not use vue-echarts

Wow!! that loads much faster than the example **with** vue-charts 😄 😄 😄

![echarts](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1a510fe0bc2b591ef122abaafc63532213996622.gif)

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [30 December 2022 19:12 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/25 "2022-12-30T19:12:56Z")

</div>

Yes, it downloads a single 700KB (compressed) file from jsdelivr. The old one was downloading hundreds of small source files. The new one should be improved by producing a minified package and hosting it locally in the static file area. "All" you need to do to host it locally is plop the package in the right place and change the URL in the custom widget config import map accordingly.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [31 December 2022 10:00 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/26 "2022-12-31T10:00:19Z")

</div>

There is also a 'minified' version in jsdelivr which loads really fast now I've loaded it as a static file.  
[https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.esm.min.js](https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.esm.min.js)

---

<div class="post-metadata">

**Author:** ![davidz](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@davidz](https://discourse.nodered.org/u/davidz)\
**Post date:** [31 December 2022 18:06 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/27 "2022-12-31T18:06:16Z")

</div>

It is very easy to produce a gauge with Echarts minimum package and dashboard.  
I think the Echarts.min.js has everything we need for different charts.

Please see below animated gauge:  
 ![Echarts gauge](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/8/5802dcfc5aafad7ce311a592895648cfae89be97.gif)

The following are the codes used with Echarts.min.js and the template node:

```auto
<div id="EchartsGauge" style="width: 750px;height:610px;"></div>

<script>
var chartDom = document.getElementById('EchartsGauge');
var myChart = echarts.init(chartDom);
var option;

const gaugeData = [
{
value: 20,
name: 'Good',
title: {
offsetCenter: ['-40%', '80%']
},
detail: {
offsetCenter: ['-40%', '95%']
}
},
{
value: 40,
name: 'Better',
title: {
offsetCenter: ['0%', '80%']
},
detail: {
offsetCenter: ['0%', '95%']
}
},
{
value: 60,
name: 'Perfect',
title: {
offsetCenter: ['40%', '80%']
},
detail: {
offsetCenter: ['40%', '95%']
}
}
];
option = {
series: [
{
type: 'gauge',
anchor: {
show: true,
showAbove: true,
size: 18,
itemStyle: {
color: '#FAC858'
}
},
pointer: {
icon:
'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 8,
length: '80%',
offsetCenter: [0, '8%']
},
progress: {
show: true,
overlap: true,
roundCap: true
},
axisLine: {
roundCap: true
},
data: gaugeData,
title: {
fontSize: 14
},
detail: {
width: 40,
height: 14,
fontSize: 14,
color: '#fff',
backgroundColor: 'auto',
borderRadius: 3,
formatter: '{value}%'
}
}
]
};
setInterval(function () {
gaugeData[0].value = +(Math.random() * 100).toFixed(2);
gaugeData[1].value = +(Math.random() * 100).toFixed(2);
gaugeData[2].value = +(Math.random() * 100).toFixed(2);
myChart.setOption({
series: [
{
data: gaugeData
}
]
});
}, 2000);

option && myChart.setOption(option);
</script>

```

---

<div class="post-metadata">

**Author:** ![davidz](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@davidz](https://discourse.nodered.org/u/davidz)\
**Post date:** [31 December 2022 18:12 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/28 "2022-12-31T18:12:25Z")

</div>

This might be the right solution for combining Echarts with Flexdash.

We use Echarts since it runs faster, uses less CPU and memory than other charts when there are lots of lines in the line charts. This is very important for real-time display and data analysis.

You can also customize the charts easily due to Chart's flexibility. For example, you can define the spacing and location between legends easily. You can't do it with some other charts.

Echarts has excellent documentation and tons of example codes too.

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [31 December 2022 18:19 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/29 "2022-12-31T18:19:28Z")

</div>

Thanks for following up. If you read the thread, you can see that we figured out where the confusion came from and how to solve it using ESM.

Since you're such a fan of Echarts, maybe you could contribute a flexdash widget for it? 😉

---

<div class="post-metadata">

**Author:** ![davidz](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@davidz](https://discourse.nodered.org/u/davidz)\
**Post date:** [31 December 2022 18:33 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/30 "2022-12-31T18:33:38Z")

</div>

Yes I saw this (pls see my last reply).

I need to find time looking into how to use Flexdash first 🤣 Extremely busy. But it is on my calendar in 2023. I may have lots of questions by that time. 😁

As to the charts, we use whatever can meet our requirements and performs the best for our applications after comparing and testing multiple charts.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [31 December 2022 19:18 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/31 "2022-12-31T19:18:00Z")

</div>

I really liked this (...for the first 20 seconds 😆)  
It's drawn and animated by Echarts.

![title](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/2/f2c460fc33788683bf39ab53a756fcb7b5610df8.gif)

```auto
[{"id":"04ee1cf55b4bae93","type":"function","z":"1543d308b342690a","name":"function 7","func":"\nlet option = {\n graphic: {\n elements: [\n {\n type: 'text',\n left: 'center',\n top: 'center',\n style: {\n text: 'node-RED',\n fontSize: 60,\n fontWeight: 'bold',\n lineDash: [0, 200],\n lineDashOffset: 0,\n fill: 'transparent',\n stroke: '#000',\n lineWidth: 1\n },\n keyframeAnimation: {\n duration: 6000,\n loop: true,\n keyframes: [\n {\n percent: 0.7,\n style: {\n fill: 'transparent',\n lineDashOffset: 200,\n lineDash: [200, 0]\n }\n },\n {\n // Stop for a while.\n percent: 0.8,\n style: {\n fill: 'transparent'\n }\n },\n {\n percent: 1,\n style: {\n fill: '#8F0000'\n }\n }\n ]\n }\n }\n ]\n }\n}\nreturn { option }","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":355,"y":2550,"wires":[["fe533afc4055b828"]]},{"id":"0bc40178161d4c73","type":"flexdash ctrl","z":"1543d308b342690a","name":"","fd":"e8f5aea52ab49500","weak_fd":"","fd_output_topic":"wakeup","x":205,"y":2550,"wires":[["04ee1cf55b4bae93"]]},{"id":"fe533afc4055b828","type":"flexdash custom","z":"1543d308b342690a","fd_container":"28d1859702cdf729","fd_cols":"3","fd_rows":"1","fd_array":false,"fd_array_max":10,"fd_output_topic":"","fd_loopback":false,"name":"Echarts","title":"","sfc_source":"<template>\n <div class=\"chart\" ref=\"echarts-container\">Loading echart...</div>\n</template>\n\n<style scoped>\n.chart {\n height: 100%;\n width: 100%;\n}\n</style>\n\n<script>\nimport * as echarts from 'echarts';\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 random: { default: false }, // inject random data\n },\n mounted() {\n const ec = this.$refs[\"echarts-container\"]\n this.chart = echarts.init(ec) // this.chart is not reactive\n console.log(\"Echart mounted\")\n },\n watch: {\n option: {\n immediate: true,\n deep: true,\n handler(val) {\n console.log(\"got options\", JSON.stringify(val).substring(0,40))\n if (this.chart) this.chart.setOption(val)\n }\n },\n }\n}\n</script>\n","import_map":{"echarts":"https://cdn.jsdelivr.net/npm/echarts/dist/echarts.esm.js","resize-detector":"https://cdn.jsdelivr.net/npm/resize-detector@0.3.0/esm/index.js"},"x":520,"y":2550,"wires":[[]]},{"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,d9247622bb479c73,3424215a05654cc1,fe533afc4055b828","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"}]

```

(Remember to select your dashboard from the drop down in the FD Control node)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [31 December 2022 19:32 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/32 "2022-12-31T19:32:16Z")

</div>

No offence to those who have posted pictures of echarts gauges, but I doubt that anyone who has seen @hotNipi's enhanced dashboard gauges, or some other standard dashboard widget enhancements, will be too eager to switch to Flexdash based on them.

I think we need standard widgets and inspirational examples of beautifying them.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [31 December 2022 19:42 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/33 "2022-12-31T19:42:20Z")

</div>

Almost perfect... - needs a capital N ... 🙂

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [31 December 2022 19:52 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/34 "2022-12-31T19:52:43Z")

</div>

Well considering that Flexdash is still in alpha, it's hardly surprising...  
Can you remember when node-RED was launched? I can, and it was exactly the same, very limited, but look where it is now.

The shortcut to Flexdash producing great "standard widgets and inspirational examples of beautifying them" is for the community to contribute, and it won't be long before momentum & enthusiasm builds (and ~~maybe~~ @hotNipi ~~hopefully~~ comes onboard).

I've deleted my old dashboard & totally switched to Flexdash now, and even at this early stage I don't regret doing so.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [31 December 2022 19:56 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/35 "2022-12-31T19:56:14Z")

</div>

> [@dceejay](#):
>
> - needs a capital N

At least I chose the correct colour - #8F0000 🙄

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [31 December 2022 20:18 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/36 "2022-12-31T20:18:08Z")

</div>

> [@Paul-Reed](#):
>
> (and maybe @hotNipi hopefully comes onboard)

Remove maybe  
Remove hopefully

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [31 December 2022 20:21 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/37 "2022-12-31T20:21:56Z")

</div>

> [@hotNipi](#):
>
> Remove maybe  
> Remove hopefully

With pleasure 😆 😆 😆

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [31 December 2022 21:56 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/38 "2022-12-31T21:56:37Z")

</div>

> [@hotNipi](#):
>
> Remove maybe  
> Remove hopefully

How can I make it less so? 😆

Maybe I should spend a couple of hours extending my [Vue primer - FlexDash](https://flexdash.github.io/docs/developing-widgets/vue-primer/) ?

BTW, have you used TailwindCSS? I'm finding it awesome. Wish I had known about it when I started FlexDash, and/or that it was more compatible with Vuetify.

If you haven't looked at it, start with [CSS Utility Classes and "Separation of Concerns"](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/). Vuetify has a subset of Tailwind built-in (well, unfortunately similar to TW but not exactly compatible) and initially it didn't make much sense to me, then I started using it, then I got comfortable, now I can't do markup without. I'm now using TW in another related NR project that doesn't use Vuetify...

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [1 January 2023 01:32 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/39 "2023-01-01T01:32:08Z")

</div>

> [@Paul-Reed](#):
>
> The correct colour

I think it is ( or was) #910000 but close enough …

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [1 January 2023 02:38 UTC](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748/40 "2023-01-01T02:38:04Z")

</div>

![avengers-assemble](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/9/290600ca352ff9e57f966ff7c3c470a1acc86f9f.gif)

[Previous page](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748.md?page=1)

[Next page](https://discourse.nodered.org/t/echarts-flexdash-gauges/72748.md?page=3)