Bar chart - custom colors

[tverilytt]

Hi!

In my Node-RED Open AQ dashboard, I have been using line chart to display air quality measurements.
I wanted to add bar chart, where bars have colors according to "National Air Quality Index"

I found tese discussions regarding bar chart colors:

Config more than 9 colours in bar chart

Bar Graph Colors determined by values

I did not need more that 9 colors, but I wanted to specify color for each bar.
angular-chart (and Chart.js) supports specifying colors, so I tried to include that in payload to input to Bar Chart node.

That did not work. After poking around in node-red-dashboard on GitHub, I found the code section included below in ui-chart-js.js.

The loadConfiguration function and its reference to item.colors caught my attention, and after putting this into msg ui_control, the colors shows up in the bar charr, that is - after a separate browser page refresh:

msg.ui_control = { look : 'bar', colors: colors };

The loadConfiguration function is called upon in the scope watch function, if the newValue is different from oldValue.
So, added a dummy property with a dynamic value, and then the bar chart colors shows up without refreshing page

msg.ui_control = { look : 'bar', colors: colors, options: { dummy: new Date().getTime() } };

The dashboard is here: Open AQ dashboard

Cheers
-jo

----- ui-chart-js.js code snippets -----

node-red/node-red-dashboard/blob/master/src/components/ui-chart-js/ui-chart-js.js

Line 50:
// Watch for any changes to controls

scope.$watchGroup(['me.item.legend','me.item.interpolate','me.item.ymin','me.item.ymax','me.item.xformat','me.item.dot','me.item.cutout','me.item.nodata','me.item.animation','me.item.spanGaps','me.item.options','me.item.look'], function (newValue, oldValue) {
                        type = newValue[11];
                        if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
                            scope.config = loadConfiguration(type, scope);
                        }
                    });

LIne 153
function loadConfiguration

From line 177:
//Build colours array

//Build colours array

 var bColours = item.colors || ['#1F77B4', '#AEC7E8', '#FF7F0E', '#2CA02C', '#98DF8A', '#D62728', '#FF9896', '#9467BD', '#C5B0D5'];
    var baseColours = bColours.concat([
        '#7EB3C6','#BB9A61','#3F8FB9','#57A13F',
        '#BC5879','#6DC2DF','#D7D185','#91CA96',
        '#DEB64D','#31615A','#B46E3F','#9B2FAA',
        '#61A240','#AA3167','#9D6D5E','#3498DB',
        '#EC7063','#DAF7A6','#FFC300','#D98880',
        '#48C9B0','#7FB3D5','#F9E79F','#922B21']);
    config.colours = config.colours || baseColours;
    scope.barColours = [];
    scope.lineColours = [];
    baseColours.forEach(function(colour, index) {
        scope.lineColours.push({
            backgroundColor: colour,
            borderColor: colour
        });
        scope.barColours.push({
            backgroundColor: baseColours,
            borderColor: "#888",
            borderWidth: 1
        });
    });

[tverilytt]