# Config more than 9 colours in bar chart

**URL:** https://discourse.nodered.org/t/config-more-than-9-colours-in-bar-chart/36826
**Category:** Dashboard
**Created:** [1 December 2020 19:40 UTC](https://discourse.nodered.org/t/config-more-than-9-colours-in-bar-chart/36826 "2020-12-01T19:40:21Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Miguel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/miguel/32/61392_2.png) [@Miguel](https://discourse.nodered.org/u/Miguel)
#### Post date: [1 December 2020 19:40 UTC](https://discourse.nodered.org/t/config-more-than-9-colours-in-bar-chart/36826/1 "2020-12-01T19:40:21Z")

</div>

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

---

<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: [2 December 2020 07:29 UTC](https://discourse.nodered.org/t/config-more-than-9-colours-in-bar-chart/36826/2 "2020-12-02T07:29:41Z")

</div>

With ui\_chart node you can't.  
But you can make charts using `chartjs` library and present it in `ui_template`. So you can control many more things than just colors of the bars...

Here's the basics:

```auto
[{"id":"3afc2e42.168ee2","type":"function","z":"6d08d5ab.a8aa3c","name":"make data","func":"var d = [];\nvar c = [\"#0ac6f5\",\"#14c0eb\",\"#1fbae0\",\"#29b4d6\",\"#33adcc\",\"#3da7c2\",\"#47a1b8\",\"#529bad\",\"#5c95a3\",\"#668f99\",\"#70898f\",\"#7a8385\",\"#857c7a\",\"#8f7670\",\"#997066\",\"#a36a5c\",\"#ad6452\",\"#b85e47\",\"#c2583d\",\"#cc5233\",\"#d64b29\",\"#e0451f\",\"#eb3f14\",\"#f5390a\"]\nvar l = [];\n\n\nfor(var i = 0;i<24;++i){\n d.push(Math.random()*10)\n l.push(i.toString())\n}\nmsg.payload = {data:JSON.stringify(d),colors:JSON.stringify(c),labels:JSON.stringify(l)};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":630,"y":1300,"wires":[["7bf30f5e.3c7d1"]]},{"id":"639096c5.76e7a8","type":"ui_template","z":"6d08d5ab.a8aa3c","group":"109b0b40.54c0b5","name":"BAR Chart","order":4,"width":"14","height":"6","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":950,"y":1300,"wires":[[]]},{"id":"7bf30f5e.3c7d1","type":"template","z":"6d08d5ab.a8aa3c","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart\" width=600 height =250></canvas>\n<script>\nfunction createChart(){\n var ctx = document.getElementById('myChart').getContext('2d');\n var chart = new Chart(ctx, {\n \n // The type of chart we want to create\n type: 'bar',\n\n // The data for our dataset\n data: {\n labels: {{{payload.labels}}},\n datasets: [\n {\n label: 'DATA',\n backgroundColor:{{{payload.colors}}} ,\n data: {{{payload.data}}},\n borderWidth: 1\n }\n]\n }\n }\n );\n}\n\ncreateChart()\n\n</script>\n","output":"str","x":800,"y":1300,"wires":[["639096c5.76e7a8"]]},{"id":"1cddf5d5.9564da","type":"inject","z":"6d08d5ab.a8aa3c","name":"Test","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"","payloadType":"date","x":450,"y":1300,"wires":[["3afc2e42.168ee2"]]},{"id":"cfe72466.cb83d8","type":"ui_button","z":"6d08d5ab.a8aa3c","name":"","group":"109b0b40.54c0b5","order":2,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-refresh","payload":"true","payloadType":"bool","topic":"","x":450,"y":1260,"wires":[["3afc2e42.168ee2"]]},{"id":"2792f669.01963a","type":"comment","z":"6d08d5ab.a8aa3c","name":"Refresh","info":"","x":450,"y":1220,"wires":[]},{"id":"aece168d.c89348","type":"comment","z":"6d08d5ab.a8aa3c","name":"chartjs.org","info":"https://www.chartjs.org/samples/latest/charts/line/basic.html","x":800,"y":1340,"wires":[]},{"id":"ab4d4b5e.528e18","type":"ui_template","z":"6d08d5ab.a8aa3c","group":"109b0b40.54c0b5","name":"Title","order":3,"width":"14","height":"1","format":"<style>\n #charttitle{\n text-align:center;\n }\n</style>\n<div id='charttitle'>CHART TITLE</div>\n\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":930,"y":1260,"wires":[[]]},{"id":"109b0b40.54c0b5","type":"ui_group","name":"body","tab":"24b8f2c0.76ab8e","order":2,"disp":false,"width":"14","collapse":false},{"id":"24b8f2c0.76ab8e","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![mkne](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mkne/32/34037_2.png) [@mkne](https://discourse.nodered.org/u/mkne)
#### Post date: [20 December 2020 22:47 UTC](https://discourse.nodered.org/t/config-more-than-9-colours-in-bar-chart/36826/3 "2020-12-20T22:47:30Z")

</div>

I have the same problem with more than 9 colors in a line chart. I would prefer a solution without using separate libraries. I've tried to analyse which color is used for the 10th time series but I wasn't able to find it using the developer tools in Google Chrome.  
Does anybody know in which css file and class this is defined?  
Is the 10th color really selected randomly?  
In my case it's always the same color. I would prefer to read the color definitions from the chart node as I have to use these colors in another widget. Or maybe I could define the colors using global variables like in a theme. I have also tried using ui\_control as describe by Justone here: [Chart line colours](https://discourse.nodered.org/t/chart-line-colours/7296/3)

Any other ideas?

---

<div class="post-metadata">

### Author: ![mkne](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mkne/32/34037_2.png) [@mkne](https://discourse.nodered.org/u/mkne)
#### Post date: [20 December 2020 23:07 UTC](https://discourse.nodered.org/t/config-more-than-9-colours-in-bar-chart/36826/4 "2020-12-20T23:07:47Z")

</div>

This is the HTML code produced for the chart:  
`<canvas ng-if="me.item.look==='line'" class="chart chart-line" chart-data="config.data" chart-series="config.series" chart-labels="config.labels" chart-options="config.options" chart-dataset-override="config.overrides" chart-colors="config.colours" height="472" width="948" style="display: block; width: 632px; height: 315px;"> </canvas>`

Does anybody know where config.colours comes from?

---

<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: [19 January 2021 23:07 UTC](https://discourse.nodered.org/t/config-more-than-9-colours-in-bar-chart/36826/5 "2021-01-19T23:07:47Z")

</div>

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