# Chart - set color bar

**URL:** <https://discourse.nodered.org/t/chart-set-color-bar/67739>\
**Category:** General\
**Created:** [15 September 2022 08:44 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739 "2022-09-15T08:44:29Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [15 September 2022 08:44 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/1 "2022-09-15T08:44:29Z")

</div>

Hi,  
I read many post on this topic but the examples are for needs very complex while mine is very simple (not for me of course)

I have this chart (seven bar - one for each day of week)

![chart](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/4/44221032506894ad0bee45f18fedc5aeee6664cc.png)

and every night I send to it the max value of the temperature of the day; I'd like if the value is \> 30 have the bar (all the bar) color "red", otherwise the bar color "green".

Can you help me?

NR 3.0.1

---

<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:** [15 September 2022 10:53 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/2 "2022-09-15T10:53:40Z")

</div>

Even if your need seems to be very simple - it is not something the chart node provides or what you can override with chart options. You even need to create chart using the ui\_template node - this way you have full control over the `dataset` property where you can reach colors for each bar. Or you can of course use some different charting library where such functionality is supported with easier access.

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [15 September 2022 11:00 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/3 "2022-09-15T11:00:45Z")

</div>

Ah, ok ....  
I saw your example in this post ...

> [@Config more than 9 colours in bar chart](https://discourse.nodered.org/t/config-more-than-9-colours-in-bar-chart/36826):
>
> Hello all May somebody know how I can define more than 9 series colours in a bar chart? Unfortunately, if I add more than 9 data series to the chart (the colours for the first 9 are well defined with chart node editor) the 10th, 11th,... bars are drawn with just random colours. thx

and I'm trying to modify the code ...

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:** [15 September 2022 12:15 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/4 "2022-09-15T12:15:48Z")

</div>

Just for fun - bar chart (if for dedicated usage) is so simple stuff so you can easily create your own.

```auto
[
    {
        "id": "1763d9f4b9f4e8dd",
        "type": "ui_chart",
        "z": "98fb9802851faeed",
        "name": "",
        "group": "20ae1040.3cf58",
        "order": 7,
        "width": 0,
        "height": 0,
        "label": "chart",
        "chartType": "horizontalBar",
        "legend": "false",
        "xformat": "HH:mm:ss",
        "interpolate": "linear",
        "nodata": "",
        "dot": false,
        "ymin": "0",
        "ymax": "40",
        "removeOlder": 1,
        "removeOlderPoints": "",
        "removeOlderUnit": "3600",
        "cutout": 0,
        "useOneColor": false,
        "useUTC": false,
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "outputs": 1,
        "useDifferentColor": false,
        "className": "",
        "x": 580,
        "y": 1220,
        "wires": [
            []
        ]
    },
    {
        "id": "d6ae1627865b4045",
        "type": "inject",
        "z": "98fb9802851faeed",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": ".5",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 160,
        "y": 1260,
        "wires": [
            [
                "41e865cd6b3afc23"
            ]
        ]
    },
    {
        "id": "41e865cd6b3afc23",
        "type": "function",
        "z": "98fb9802851faeed",
        "name": "random data between 0-40 ",
        "func": "let labels = ['Mo','Tu','We', 'Th','Fr','Sa','Su']\nlet index = context.get('index') || 0\nindex++\nif(index > 6){\n index = 0\n}\ncontext.set('index',index)\n\n\nmsg.topic = labels[index]\nmsg.payload = parseFloat((Math.random()*40).toFixed(2))\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 370,
        "y": 1260,
        "wires": [
            [
                "1763d9f4b9f4e8dd",
                "818be358773aa28b"
            ]
        ]
    },
    {
        "id": "818be358773aa28b",
        "type": "ui_template",
        "z": "98fb9802851faeed",
        "group": "20ae1040.3cf58",
        "name": "chart without any charting library",
        "order": 8,
        "width": "6",
        "height": "3",
        "format": "<div class=\"chart-wrapper\">\n <div class=\"chart-row\">\n <div class=\"row-label\">MO</div>\n <div class=\"row-bar-container\">\n <div class=\"row-bar\" id=\"MO\"></div>\n </div>\n </div>\n <div class=\"chart-row\">\n <div class=\"row-label\">TU</div>\n <div class=\"row-bar-container\">\n <div class=\"row-bar\" id=\"TU\"></div>\n </div>\n </div>\n <div class=\"chart-row\">\n <div class=\"row-label\">WE</div>\n <div class=\"row-bar-container\">\n <div class=\"row-bar\" id=\"WE\"></div>\n </div>\n </div>\n <div class=\"chart-row\">\n <div class=\"row-label\">TH</div>\n <div class=\"row-bar-container\">\n <div class=\"row-bar\" id=\"TH\"></div>\n </div>\n </div>\n <div class=\"chart-row\">\n <div class=\"row-label\">FR</div>\n <div class=\"row-bar-container\">\n <div class=\"row-bar\" id=\"FR\"></div>\n </div>\n </div>\n <div class=\"chart-row\">\n <div class=\"row-label\">SA</div>\n <div class=\"row-bar-container\">\n <div class=\"row-bar\" id=\"SA\"></div>\n </div>\n </div>\n <div class=\"chart-row\">\n <div class=\"row-label\">SU</div>\n <div class=\"row-bar-container\">\n <div class=\"row-bar\" id=\"SU\"></div>\n </div>\n </div>\n <div class=\"chart-axis\">\n <span>0</span><span>10</span><span>20</span><span>30</span><span>40</span>\n </div>\n</div>\n<style>\n .chart-wrapper{\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n\n }\n .chart-row{\n position:relative;\n display: flex;\n flex-direction: row;\n width:100%;\n }\n .row-label{\n width:40px;\n font-size:12px;\n text-align:center;\n }\n .row-bar-container{\n position:relative;\n background-color:#00000020;\n width:100%;\n }\n .row-bar{\n position:relative;\n background-color:red;\n width:100%;\n height:100%;\n }\n .chart-axis{\n display: flex;\n flex-direction: row;\n padding-left: 30px;\n justify-content: space-between;\n }\n .chart-axis span{\n font-size:small;\n }\n</style>\n\n<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n if(msg.topic){\n let t = msg.topic.toUpperCase()\n let v = (msg.payload * 100 / 40)+'%';\n let col = msg.payload > 30 ? 'red' : 'orange';\n $(\".row-bar[id=\"+t+\"]\").css({\"width\":v,\"background-color\":col})\n }\n \n }\n });\n})(scope);",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 650,
        "y": 1280,
        "wires": [
            []
        ]
    },
    {
        "id": "20ae1040.3cf58",
        "type": "ui_group",
        "name": "Slider",
        "tab": "6b520bda.e997a4",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "6b520bda.e997a4",
        "type": "ui_tab",
        "name": "Testing",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [15 September 2022 12:26 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/5 "2022-09-15T12:26:38Z")

</div>

Now I get to work, thank you very much ..... 👍

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [16 September 2022 10:52 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/6 "2022-09-16T10:52:12Z")

</div>

@hotNipi  
Sorry, but I have a question .....  
Into the template node you have a script with this instruction:

```auto
let col = msg.payload > 30 ? 'red' : 'green';

```

and works fine.

I modified the code in this code (I'd like to add more colors)

```auto
let val = msg.payload
if (val > 30)
{
     let col = "red"
}
if (val =< 30)
{
     let col = "green"
}

```

but don't works and I don't understand why ........  
Isn’t that the same?

---

<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 September 2022 10:54 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/7 "2022-09-16T10:54:50Z")

</div>

> [@Giamma](#):
>
> `=<`

Change the order of those

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [16 September 2022 11:03 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/8 "2022-09-16T11:03:41Z")

</div>

Don't works ...

![img01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/a/da2fa9c3b72fec94a7639b8e5ae181ece8e1c944.png)

---

<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 September 2022 11:22 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/9 "2022-09-16T11:22:31Z")

</div>

```auto
let col = msg.payload > 30 ? 'red' : msg.payload > 20 ? 'orange' : msg.payload > 10 ? 'yellow' : 'green';
$(".row-bar[id="+t+"]").css({"width":v,"background-color":col})

```

which is pretty same as

```auto
let col = 'green';
if(msg.payload > 30){   
    col = 'red' // change the value of col. do not declare again (let col =)
}
else if(msg.payload > 20){
    col = 'orange'
}
else if(msg.payload > 10){
    col = 'yellow'
}
$(".row-bar[id="+t+"]").css({"width":v,"background-color":col})

```

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [16 September 2022 11:27 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/10 "2022-09-16T11:27:05Z")

</div>

Ok, now works fine; thank you again ...

---

<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:** [16 September 2022 11:29 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/11 "2022-09-16T11:29:41Z")

</div>

Deleted - @hotNipi explained better while I was typing!

---

<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 September 2022 11:32 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/12 "2022-09-16T11:32:29Z")

</div>

Thanks, edited with more clear issue description

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [16 September 2022 11:38 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/13 "2022-09-16T11:38:00Z")

</div>

Ok, now I understand where the problem was .....

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [16 September 2022 11:39 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/14 "2022-09-16T11:39:50Z")

</div>

With `let` inside the `if` blocks you were declaring two different variables that went out of scope at the end of the block.

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [16 September 2022 11:44 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/15 "2022-09-16T11:44:46Z")

</div>

Sorry for troubling, I should have understand it by myself, thank to all ....

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [24 September 2022 06:06 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/16 "2022-09-24T06:06:18Z")

</div>

it wasn't easy (for my skills) but now I'm satisfied ...  
Temp min and max for each day of week ....  
Thank you for code again ....

![chart](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2f47cd23913ae1903ebec027bb8dd0dead9fd8c0.png)

---

<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:** [8 October 2022 06:07 UTC](https://discourse.nodered.org/t/chart-set-color-bar/67739/17 "2022-10-08T06:07:03Z")

</div>

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