# How to specify colours for bar chart

**URL:** <https://discourse.nodered.org/t/how-to-specify-colours-for-bar-chart/52536>\
**Category:** Dashboard\
**Created:** [22 October 2021 00:28 UTC](https://discourse.nodered.org/t/how-to-specify-colours-for-bar-chart/52536 "2021-10-22T00:28:08Z")\
**Posts on this page:** 6\
**Page:** 1

<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:** [22 October 2021 00:28 UTC](https://discourse.nodered.org/t/how-to-specify-colours-for-bar-chart/52536/1 "2021-10-22T00:28:08Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/a/5aabead3ee2f48bb181d17d9a16ddfee47b5f9b4.jpeg)

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.

 ![Untitled 4](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/9/e9d89d7f05a94926eb7ba39ac0baf47e5be7605a.jpeg)

---

<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:** [22 October 2021 14:07 UTC](https://discourse.nodered.org/t/how-to-specify-colours-for-bar-chart/52536/2 "2021-10-22T14:07:49Z")

</div>

Edit - slight tweek to make the script safer.

Well I found the colour hex codes in .node-red/node\_modules/node-red-dashboard/dist/js/app-min.js.

Not an easy file to edit, and any changes are sure to be lost when Dashboard is updated.

I wrote a script to double the colour list. It seems to work but I'm not sure there won't be side effects.

```auto
#! /bin/bash
# Extend the available Node-Red Dashboard bar chart colours

DIR=/home/pi/.node-red/node_modules/node-red-dashboard/dist/js
FILE=$DIR/app.min.js

if test -w $FILE
then
   cp $FILE $FILE.bak || exit 1
   sed -i 's/"#7EB3C6"[^]]*"#922B21"/&,&/' $FILE || exit 2
fi
sudo systemctl restart nodered

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [22 October 2021 19:15 UTC](https://discourse.nodered.org/t/how-to-specify-colours-for-bar-chart/52536/3 "2021-10-22T19:15:12Z")

</div>

you could use the **ui\_template** node and create the chartjs from scratch giving you the ability to send any additional dataset properties like `backgroundColor`

**Example:**

```auto
[{"id":"d58b635f1bfdaa7f","type":"ui_template","z":"5847b7aa62131d37","group":"6efcc19883dcdf68","name":"","order":0,"width":"24","height":"20","format":"<div class=\"chart-container\" style=\"position: relative; height:40vh; width:50vw\">\n <canvas id=\"myChart\"></canvas>\n</div>\n\n<script>\n(function(scope) {\n\nvar ctx = document.getElementById('myChart').getContext('2d');\nvar myChart = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],\n datasets: []\n },\n options: {\n scales: {\n y: {\n beginAtZero: true\n }\n },\n responsive: true,\n }\n});\n\n\n// addData \n function addData(chart, data) {\n // chart.data.labels.push(label);\n if(chart.data.datasets.length > 10) {\n chart.data.datasets.shift()\n }\n chart.data.datasets.push(data);\n chart.update();\n}\n \n// watch for msg\nscope.$watch('msg', (msg) => {\n if (msg) {\n // Do something when msg arrives\n addData(myChart, msg.payload)\n }\n})\n\n\n})(scope)\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":720,"y":840,"wires":[[]]},{"id":"53e059241791ed04","type":"inject","z":"5847b7aa62131d37","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":320,"y":840,"wires":[["17c879d6076d6411"]]},{"id":"17c879d6076d6411","type":"function","z":"5847b7aa62131d37","name":"Chart Data","func":"msg.payload = {\n label: '# of Votes',\n data: [\n 12 + Math.random() * 2,\n 19 + Math.random() * 2,\n 3 + Math.random() * 2,\n 5 + Math.random() * 2,\n 2 + Math.random() * 2,\n 3 + Math.random() * 2],\n backgroundColor: [\n 'rgba(255, 99, 132, 0.2)',\n 'rgba(54, 162, 235, 0.2)',\n 'rgba(255, 206, 86, 0.2)',\n 'rgba(75, 192, 192, 0.2)',\n 'rgba(153, 102, 255, 0.2)',\n 'rgba(255, 159, 64, 0.2)'\n],\n borderColor: [\n 'rgba(255, 99, 132, 1)',\n 'rgba(54, 162, 235, 1)',\n 'rgba(255, 206, 86, 1)',\n 'rgba(75, 192, 192, 1)',\n 'rgba(153, 102, 255, 1)',\n 'rgba(255, 159, 64, 1)'\n],\n borderWidth: 1\n};\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":490,"y":840,"wires":[["d58b635f1bfdaa7f","0869cd746de10613"]]},{"id":"0869cd746de10613","type":"debug","z":"5847b7aa62131d37","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":600,"y":740,"wires":[]},{"id":"6efcc19883dcdf68","type":"ui_group","name":"Chart JS","tab":"39a6d442788cfb84","order":1,"disp":true,"width":"24","collapse":false,"className":""},{"id":"39a6d442788cfb84","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/0/e06c8231ceb7de91d6efd1fe325ffd84796555ca.png)

---

<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:** [22 October 2021 19:41 UTC](https://discourse.nodered.org/t/how-to-specify-colours-for-bar-chart/52536/4 "2021-10-22T19:41:58Z")

</div>

Thanks @UnborN. That's a useful example of replacing a widget with your own template.  
Mind stretching but not as overwhelming as I would have expected. Compelling to watch too.

Should that little flow, maybe with variations for different kinds of chartable data, go into the [cookbook](https://cookbook.nodered.org/)?

---

<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 October 2021 19:51 UTC](https://discourse.nodered.org/t/how-to-specify-colours-for-bar-chart/52536/5 "2021-10-22T19:51:19Z")

</div>

If you do search "chart ui\_template" here in forum, you find many examples done that way. It opens many more options of chartjs library but also you can work with any JavaScript charting library you like.

---

<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:** [5 November 2021 19:52 UTC](https://discourse.nodered.org/t/how-to-specify-colours-for-bar-chart/52536/6 "2021-11-05T19:52:17Z")

</div>

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