How to specify colours for bar chart

Dashboard
1

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.

Untitled 4
Untitled 4698Ă—443 37.5 KB

2

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.

#! /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
3

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:

[{"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
image960Ă—480 11.9 KB

4

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?

5

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.