# Bar Chart Colours

**URL:** <https://discourse.nodered.org/t/bar-chart-colours/79327>\
**Category:** Dashboard\
**Created:** [20 June 2023 17:38 UTC](https://discourse.nodered.org/t/bar-chart-colours/79327 "2023-06-20T17:38:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Glake01](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/glake01/32/5950_2.png) [@Glake01](https://discourse.nodered.org/u/Glake01)\
**Post date:** [20 June 2023 17:38 UTC](https://discourse.nodered.org/t/bar-chart-colours/79327/1 "2023-06-20T17:38:05Z")

</div>

This may be a JSON or JS issue but I can't find a soution yet.  
My single series bar chart shows different colours for the first 30 data points but no colour after that. Any suggestions welcome!  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/e/8eabcd68955dabd376656baaf9294d1eb3d8be2b.png)

```auto
var date = new Date();
var mon = date.getMonth() + 1;
var x = 0; var dv = 0;
var t = [0,0,0]; var title = ["","",""]
var myData = msg.payload;
global.set("myData", myData);
var chart = [{
    "series":["Gate"],
    "data": [new Array(64)],
    "labels":[""]
},
{
    "series": ["Site"],
    "data": [new Array(64).fill(0)],
    "labels": [""]
},
{
    "series": ["Total"],
    "data": [new Array(64).fill(0)],
    "labels": [""]
}]
for (let m = 5; m <= mon; m++) {

for (let j = 0; j < 2; j++) {
       //var m=6;
        var mo = m.toString();
        for (var i = 0; i < 32; i++) {
            x = ((m - 5) * 31) + i;
           // x = i;
            dv = myData[j][mo][i] || 0;
            chart[j].data[0][x] = dv;
            t[j] = t[j] + dv;
            t[2] = t[2] + dv;
            chart[j].labels[x] = mo + "." + i.toString();
            chart[2].data[0][x] = chart[2].data[0][x] + chart[j].data[0][x];
            chart[2].labels[x] = mo + "." + i.toString();
        }
    }
}
title[0] = "Gate " + t[0].toLocaleString() + " Gal";
title[1] = "Site " + t[1].toLocaleString() + " Gal";
title[2] = "Total " + t[2].toLocaleString() + " Gal";
return [{ title: title[0], payload: [chart[0]] }, {title: title[1], payload: [chart[1]]}, {title: title[2], payload: [chart[2]]}, {payload: t}]

```

---

<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:** [20 June 2023 17:58 UTC](https://discourse.nodered.org/t/bar-chart-colours/79327/2 "2023-06-20T17:58:43Z")

</div>

> [@How to specify colours for bar chart](https://discourse.nodered.org/t/how-to-specify-colours-for-bar-chart/52536):
>
> The Chart node editor dialog gives 9 colours. There are a further 24 colours specified somewhere in the background, but once they are used up the bars on a chart are uncoloured. [Untitled 5] Can the chart be persuaded to repeat colours for the 34th bar onwards? Alternatively can I define extra colours? I found this on github where the extra 24 are specified, but grep -R baseColours .node-red on my computer doesn't find anything.

---

<div class="post-metadata">

**Author:** ![Glake01](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/glake01/32/5950_2.png) [@Glake01](https://discourse.nodered.org/u/Glake01)\
**Post date:** [20 June 2023 17:59 UTC](https://discourse.nodered.org/t/bar-chart-colours/79327/3 "2023-06-20T17:59:56Z")

</div>

Thanks! I did see that one, but didn't find a solution...

---

<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:** [20 June 2023 18:01 UTC](https://discourse.nodered.org/t/bar-chart-colours/79327/4 "2023-06-20T18:01:43Z")

</div>

That thread includes a shell script that repeats the chart colours.  
It works for me on Linux

---

<div class="post-metadata">

**Author:** ![Glake01](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/glake01/32/5950_2.png) [@Glake01](https://discourse.nodered.org/u/Glake01)\
**Post date:** [20 June 2023 18:11 UTC](https://discourse.nodered.org/t/bar-chart-colours/79327/5 "2023-06-20T18:11:33Z")

</div>

Great! seems to work. Thanks!

---

<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:** [4 July 2023 18:12 UTC](https://discourse.nodered.org/t/bar-chart-colours/79327/6 "2023-07-04T18:12:25Z")

</div>

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