# How to add sectors in a gauge?

**URL:** <https://discourse.nodered.org/t/how-to-add-sectors-in-a-gauge/53791>\
**Category:** Dashboard\
**Created:** [15 November 2021 20:10 UTC](https://discourse.nodered.org/t/how-to-add-sectors-in-a-gauge/53791 "2021-11-15T20:10:29Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![patfrench](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/patfrench/32/51114_2.png) [@patfrench](https://discourse.nodered.org/u/patfrench)\
**Post date:** [15 November 2021 20:10 UTC](https://discourse.nodered.org/t/how-to-add-sectors-in-a-gauge/53791/1 "2021-11-15T20:10:29Z")

</div>

Hi,  
I'm starting with node-red, I'm trying to learn quickly by myself but I need help here 🙂

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/2/a21e234eb2f7985ec44f5f6fa0fd3abfbd8070df.png)

I need a 3rd sector:

- green : 0 - 50
- yellow : 50 - 70
- orange : 70 - 80
- red : 80 - 100

can you help me? Thank you

---

<div class="post-metadata">

**Author:** ![hardillb](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hardillb/32/12373_2.png) [@hardillb](https://discourse.nodered.org/u/hardillb)\
**Post date:** [15 November 2021 21:53 UTC](https://discourse.nodered.org/t/how-to-add-sectors-in-a-gauge/53791/2 "2021-11-15T21:53:17Z")

</div>

The gauge only supports 3 sectors.

---

<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:** [15 November 2021 22:15 UTC](https://discourse.nodered.org/t/how-to-add-sectors-in-a-gauge/53791/3 "2021-11-15T22:15:45Z")

</div>

Have a look at `node-red-contrib-ui-artless-gauge` which can use more sectors.

---

<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:** [15 November 2021 22:18 UTC](https://discourse.nodered.org/t/how-to-add-sectors-in-a-gauge/53791/4 "2021-11-15T22:18:05Z")

</div>

There are examples of gauges with more sectors in [this thread: September giveaway](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507).  
Needs some CSS knowledge though.

---

<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:** [16 November 2021 07:14 UTC](https://discourse.nodered.org/t/how-to-add-sectors-in-a-gauge/53791/5 "2021-11-16T07:14:51Z")

</div>

Still, it is possible with dashboard native gauge.

```auto
[{"id":"5c4c5120.bb035","type":"ui_gauge","z":"69a83901969741f7","name":"","group":"dc4d8303.df87","order":0,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value | number:1}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"5","seg2":"7","x":770,"y":760,"wires":[]},{"id":"b26a6748.70f428","type":"function","z":"69a83901969741f7","name":"options","func":"msg.ui_control = {options:{customSectors: {\n percents: false, \n ranges: [{\n color : \"#009900\",\n lo : 0,\n hi : 2\n },{\n color : \"#33cccc\",\n lo : 2.1,\n hi : 4\n },{\n color : \"#3366ff\",\n lo : 4.1,\n hi : 6\n },{\n color : \"#ff00ff\",\n lo : 6.1,\n hi : 8\n },{\n color : \"#ff0000\",\n lo : 8.1,\n hi : 10\n }]\n \n}}}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"x":580,"y":860,"wires":[["5c4c5120.bb035"]]},{"id":"ef9011e5.8e00d","type":"ui_slider","z":"69a83901969741f7","name":"","label":"slider","tooltip":"","group":"dc4d8303.df87","order":1,"width":0,"height":0,"passthru":true,"outs":"end","topic":"","min":0,"max":10,"step":"2","x":430,"y":760,"wires":[["5c4c5120.bb035"]]},{"id":"b2eb7e33.b3416","type":"ui_button","z":"69a83901969741f7","name":"","group":"dc4d8303.df87","order":2,"width":0,"height":0,"passthru":false,"label":"2 colors","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":420,"y":820,"wires":[["22f666e0.f2ceda"]]},{"id":"d3416f08.ad98e","type":"ui_button","z":"69a83901969741f7","name":"","group":"dc4d8303.df87","order":2,"width":0,"height":0,"passthru":false,"label":"5 colors","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":420,"y":860,"wires":[["b26a6748.70f428"]]},{"id":"22f666e0.f2ceda","type":"function","z":"69a83901969741f7","name":"options","func":"msg.ui_control = {options:{customSectors: {\n percents: false, \n ranges: [{\n color : \"#ffff00\",\n lo : 0,\n hi : 5\n },{\n color : \"#3399ff\",\n lo : 5.01,\n hi : 10\n }]\n \n}}}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":580,"y":820,"wires":[["5c4c5120.bb035"]]},{"id":"dc4d8303.df87","type":"ui_group","name":"Charts","tab":"18e7297.06310d7","order":1,"disp":true,"width":"6"},{"id":"18e7297.06310d7","type":"ui_tab","name":"Home","icon":"dashboard"}]

```

---

<div class="post-metadata">

**Author:** ![patfrench](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/patfrench/32/51114_2.png) [@patfrench](https://discourse.nodered.org/u/patfrench)\
**Post date:** [16 November 2021 20:33 UTC](https://discourse.nodered.org/t/how-to-add-sectors-in-a-gauge/53791/6 "2021-11-16T20:33:39Z")

</div>

Hello,  
thank you very much for your support.  
I have a preference for the modification of the native gauge. But I will study the other options

bye

---

<div class="post-metadata">

**Author:** ![patfrench](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/patfrench/32/51114_2.png) [@patfrench](https://discourse.nodered.org/u/patfrench)\
**Post date:** [23 November 2021 21:34 UTC](https://discourse.nodered.org/t/how-to-add-sectors-in-a-gauge/53791/7 "2021-11-23T21:34:36Z")

</div>

Hi  
It's me again,

How to integrate variables to define my sectors ?

```auto
msg.ui_control = {options:{customSectors: {
  percents: false, 
  ranges: [{
    color : "#009900",
    lo : 0,
    hi : 2
  },{
    color : "#33cccc",
    lo : 2.1,
    hi : 4
  },{
    color : "#3366ff",
    lo : 4.1,
    hi : 6
  },{
    color : "#ff00ff",
    lo : 6.1,
    hi : 8
  },{
    color : "#ff0000",
    lo : 8.1,
    hi : 10
  }]
    
}}}
delete msg.payload
return msg;

```

I would like to do something like this

```auto
msg.ui_control = {options:{customSectors: {
  percents: false, 
  ranges: [{
    color : "#33FF5E",
    lo : 0,
    hi : msg1.payload,
  },{
    color : "#FFFF33",
    lo : msg1.payload,
    hi : msg2.payload,
  },{
    color : "#FFBB33",
    lo : msg2.payload,
    hi : msg3.payload,
  },{
    color : "#FF3333",
    lo : msg3.payload,
    hi : 100,
  }]
    
}}}
delete msg.payload
return msg;

```

the node-red paradigm confuses me

thanks in advance

---

<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:** [23 November 2021 21:55 UTC](https://discourse.nodered.org/t/how-to-add-sectors-in-a-gauge/53791/8 "2021-11-23T21:55:18Z")

</div>

> [@patfrench](#):
>
> ```auto
> lo : msg2.payload,
> hi : msg3.payload,
> 
> ```

As all of your flow data will need to arrive at the same time, it would probably be better to format the data into the one msg, instead of separate msg's - msg2, msg3.

Something like;

```auto
msg.payload.one
msg.payload.two
msg.payload.three

```

---

<div class="post-metadata">

**Author:** ![patfrench](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/patfrench/32/51114_2.png) [@patfrench](https://discourse.nodered.org/u/patfrench)\
**Post date:** [26 November 2021 19:13 UTC](https://discourse.nodered.org/t/how-to-add-sectors-in-a-gauge/53791/9 "2021-11-26T19:13:45Z")

</div>

Hi,

I did this and it works

```auto
msg.ui_control = {options:{customSectors: {
  percents: false, 
  ranges: [{
    color : "#33FF5E",
    lo : 0,
    hi : msg.payload[0],
  },{
    color : "#FFFF33",
    lo : msg.payload[0],
    hi : msg.payload[1],
  },{
    color : "#FFBB33",
    lo : msg.payload[1],
    hi : msg.payload[2],
  },{
    color : "#FF3333",
    lo : msg.payload[2],
    hi : 100,
  }]
    
}}}
delete msg.payload
return msg;

```

Thanks again

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 December 2021 19:14 UTC](https://discourse.nodered.org/t/how-to-add-sectors-in-a-gauge/53791/10 "2021-12-10T19:14:15Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.