# Artless Gauge: how to show positive and negative values with different colours
**URL:** https://discourse.nodered.org/t/artless-gauge-how-to-show-positive-and-negative-values-with-different-colours/71499
**Category:** Dashboard
**Created:** [30 November 2022 11:23 UTC](https://discourse.nodered.org/t/artless-gauge-how-to-show-positive-and-negative-values-with-different-colours/71499 "2022-11-30T11:23:24Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Robertotarga](https://discourse.nodered.org/u/Robertotarga)
#### Post date: [30 November 2022 11:23 UTC](https://discourse.nodered.org/t/artless-gauge-how-to-show-positive-and-negative-values-with-different-colours/71499/1 "2022-11-30T11:23:24Z")
I'm using the very nice artless gauge node here (thanks to hotnipi) in differential mode.
I would like to display negative values in orange and positive ones in green.
Following the guidelines I created two sectors, one for negative and the other for positive with orange and green colours respectively.
make the node formatting like that:
```auto
let oExchange = { topic: 'S', payload: msg.payload };
var newSectors = [{ t: "min", val: -10, col: "#FF7F0E", dot: 3 }, { t: "max", val: 6, col: "#H2CA02C", dot: 3 }];
oExchange.control = { unit: "kW", label: "Energy Exchange", icon: "fa-plug", center: 0, decimals: 2, sectors: newSectors }
return oExchange;
```
I was expecting that with positive values the bar would be drawn in green (#H2CA02C), but it's always in orange (#FF7F0E). What am I doing wrong here?
Thanks in advance.
i enclose the test flow here:
```auto
[
{
"id": "dd1c5748828d0ac9",
"type": "inject",
"z": "641efd2eb7d562cf",
"name": "reset data",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": "",
"topic": "",
"payload": "[]",
"payloadType": "json",
"x": 1780,
"y": 980,
"wires": [
[
"f7280487dacbf516"
]
]
},
{
"id": "f7280487dacbf516",
"type": "ui_artlessgauge",
"z": "641efd2eb7d562cf",
"group": "4552fe72.fdfa5",
"order": 2,
"width": 0,
"height": 0,
"name": "Scambio",
"icon": "fa-plug",
"label": "Energia Elettrica",
"unit": "kW",
"layout": "linear",
"decimals": "2",
"differential": true,
"minmax": true,
"colorTrack": "#48cb51",
"style": "",
"colorFromTheme": true,
"property": "payload",
"secondary": "secondary",
"inline": false,
"animate": true,
"sectors": [
{
"val": -10,
"col": "#2ca02c",
"t": "min",
"dot": 3
},
{
"val": 6,
"col": "#2ca02c",
"t": "max",
"dot": 3
}
],
"lineWidth": "5",
"bgcolorFromTheme": true,
"diffCenter": "0",
"x": 1980,
"y": 920,
"wires": []
},
{
"id": "89835f2094530cd2",
"type": "function",
"z": "641efd2eb7d562cf",
"name": "FormatGauge",
"func": "let oExchange = { topic: 'S', payload: msg.payload };\nvar newSectors = [{ t: \"min\", val: -10, col: \"#FF7F0E\", dot: 3 }, { t: \"max\", val: 6, col: \"#H2CA02C\", dot: 3 }];\noExchange.control = { unit: \"kW\", label: \"Energy Exchange\", icon: \"fa-plug\", center: 0, decimals: 2, sectors: newSectors }\nreturn oExchange;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 1780,
"y": 920,
"wires": [
[
"f7280487dacbf516"
]
]
},
{
"id": "8ec4a283e5a7af92",
"type": "ui_button",
"z": "641efd2eb7d562cf",
"name": "negative value",
"group": "4552fe72.fdfa5",
"order": 3,
"width": 3,
"height": 1,
"passthru": true,
"label": "- value",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "-5",
"payloadType": "num",
"topic": "",
"topicType": "str",
"x": 1560,
"y": 940,
"wires": [
[
"89835f2094530cd2"
]
]
},
{
"id": "d5d8e1e3310fa854",
"type": "ui_button",
"z": "641efd2eb7d562cf",
"name": "positive value",
"group": "4552fe72.fdfa5",
"order": 5,
"width": 3,
"height": 1,
"passthru": true,
"label": "+ value",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"payload": "3",
"payloadType": "num",
"topic": "",
"topicType": "str",
"x": 1560,
"y": 900,
"wires": [
[
"89835f2094530cd2"
]
]
},
{
"id": "4552fe72.fdfa5",
"type": "ui_group",
"name": "Artless differentail +/- values",
"tab": "2ecb90e3.af7a5",
"order": 3,
"disp": true,
"width": "7",
"collapse": false,
"className": ""
},
{
"id": "2ecb90e3.af7a5",
"type": "ui_tab",
"name": "TestArea",
"icon": "dashboard",
"order": 7,
"disabled": false,
"hidden": false
}
]
```
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [30 November 2022 11:40 UTC](https://discourse.nodered.org/t/artless-gauge-how-to-show-positive-and-negative-values-with-different-colours/71499/2 "2022-11-30T11:40:00Z")
Couple of mistakes
1.
> [@Robertotarga](#):
>
> ` "#H2CA02C"`
Is not valid color in hex
1. By configuring only min and max, you'll miss the breaking point where one color starts and the other ends. As you wont to have breaking point at the 0 value, add one sector config with type "sec" (and dot: 0 if you don't want the dot visible et the 0 point)
```auto
var newSectors = [
{ t: "min", val: -10, col: "#FF7F0E", dot: 3 },
{ t: "sec", val: 0, col: "#some-valid-green-code", dot: 0 },
{ t: "max", val: 6, col: "#some-valid-green-code", dot: 3 }
];
```
---
### Author:  [@Robertotarga](https://discourse.nodered.org/u/Robertotarga)
#### Post date: [30 November 2022 12:14 UTC](https://discourse.nodered.org/t/artless-gauge-how-to-show-positive-and-negative-values-with-different-colours/71499/3 "2022-11-30T12:14:40Z")
Hi hotNipi,
Thank you very much for your prompt response.
1. true, When typing the hex code I red the “#” as a “H” (need new glasses)
2. I missed the central point attribute!
Now it works like a charm!
Case closed!
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [14 December 2022 12:15 UTC](https://discourse.nodered.org/t/artless-gauge-how-to-show-positive-and-negative-values-with-different-colours/71499/4 "2022-12-14T12:15:22Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.