# Linear gauge as another gauge option

**URL:** <https://discourse.nodered.org/t/linear-gauge-as-another-gauge-option/821>\
**Category:** Feature Requests\
**Created:** [14 June 2018 22:05 UTC](https://discourse.nodered.org/t/linear-gauge-as-another-gauge-option/821 "2018-06-14T22:05:34Z")\
**Posts on this page:** 7\
**Page:** 2

<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:** [5 March 2019 18:51 UTC](https://discourse.nodered.org/t/linear-gauge-as-another-gauge-option/821/21 "2019-03-05T18:51:47Z")

</div>

> [@BartButenaers](#):
>
> Have you ever considered to convert it to a UI widget node?

Yeah 🙂 [at post #17](https://discourse.nodered.org/t/linear-gauge-as-another-gauge-option/821/17)

---

<div class="post-metadata">

**Author:** ![Wouterk](https://avatars.discourse-cdn.com/v4/letter/w/edb3f5/32.png) [@Wouterk](https://discourse.nodered.org/u/Wouterk)\
**Post date:** [22 March 2019 12:58 UTC](https://discourse.nodered.org/t/linear-gauge-as-another-gauge-option/821/22 "2019-03-22T12:58:11Z")

</div>

Hey @hotNipi

Just a stupid question probably but the values are always in black for me. I tried adding style="color:white" but that does nothing. I just use the dark theme in the setting and all the text is white except for this. but when I check the devtool I see that the values should be white but they appear as black.

Thanks for the code.  
wouter

---

<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:** [22 March 2019 13:00 UTC](https://discourse.nodered.org/t/linear-gauge-as-another-gauge-option/821/23 "2019-03-22T13:00:26Z")

</div>

Ar you talking about the[new ui\_level widget](https://discourse.nodered.org/t/help-wanted-a-linear-level-indicator/9276) or that old ui\_template version?

---

<div class="post-metadata">

**Author:** ![Wouterk](https://avatars.discourse-cdn.com/v4/letter/w/edb3f5/32.png) [@Wouterk](https://discourse.nodered.org/u/Wouterk)\
**Post date:** [22 March 2019 13:27 UTC](https://discourse.nodered.org/t/linear-gauge-as-another-gauge-option/821/24 "2019-03-22T13:27:21Z")

</div>

I only tried this one. I will try the new one you linked me to. thank you 🙂

---

<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:** [22 March 2019 13:38 UTC](https://discourse.nodered.org/t/linear-gauge-as-another-gauge-option/821/25 "2019-03-22T13:38:10Z")

</div>

You should have ui\_template with styles in it somewhere I think  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a6f3142787669aa253147ab5138d640fa163b8b7.png)

```auto
<style>
 #level-hor-value {
 font-size: 1.4em;
 fill:#d0d0d0;
 }
 #level-minmax {
 font-size: 60%;
 fill:#d0d0d0;
 }
 #level-3x3-stripe {
 fill: #404040;
 }
 #level-ver-value {
 font-size: 1.8em;
 fill:#d0d0d0;
 }
 #chart-hour {
 font-size: 60%;
 fill:#d0d0d0;
 }
 #chart-stripe {
 fill: #404040;
 }

</style>

```

Those should do the colors for you

---

<div class="post-metadata">

**Author:** ![Wouterk](https://avatars.discourse-cdn.com/v4/letter/w/edb3f5/32.png) [@Wouterk](https://discourse.nodered.org/u/Wouterk)\
**Post date:** [22 March 2019 17:40 UTC](https://discourse.nodered.org/t/linear-gauge-as-another-gauge-option/821/26 "2019-03-22T17:40:35Z")

</div>

> [@hotNipi](#):
>
> \<style\> #level-hor-value { font-size: 1.4em; fill:#d0d0d0; } #level-minmax { font-size: 60%; fill:#d0d0d0; } #level-3x3-stripe { fill: #404040; } #level-ver-value { font-size: 1.8em; fill:#d0d0d0; } #chart-hour { font-size: 60%; fill:#d0d0d0; } #chart-stripe { fill: #404040; } \</style\>

Oh nice it works. Ty very much. I'm new in node.red and I'm making my internship with this. Did you found some tutorials for making your own widgets? I want to make some myself for this project.  
Again ty 🙂

---

<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:** [22 March 2019 17:52 UTC](https://discourse.nodered.org/t/linear-gauge-as-another-gauge-option/821/27 "2019-03-22T17:52:41Z")

</div>

Well there is too many and different places to point the one out. But for all it stands on JavaScript, HTML, CSS. Tips and tricks for Node-RED related things you can find at [https://cookbook.nodered.org/](https://cookbook.nodered.org/)  
The learning curve starts with just with beginning to do something, find yourself in trouble, ask for help here in most friendly and supportive forum in the world and go on. Sure you can achieve your goals. It's just a matter of trying and not giving up.  
Keep going. You've chosen the right path. 😉

[Previous page](https://discourse.nodered.org/t/linear-gauge-as-another-gauge-option/821.md?page=1)