Config more than 9 colours in bar chart

[Miguel]

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

[hotNipi]

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:

[{"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}]

[mkne]

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

Any other ideas?

[mkne]

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?