How to specify colours for bar chart

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.

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


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

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


[{"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   //;\n   if( > 10) {\n\n   }\n;\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}]

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?

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.

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