# Bar chart - custom colors
**URL:** https://discourse.nodered.org/t/bar-chart-custom-colors/58499
**Category:** Dashboard
**Tags:** chart
**Created:** [16 February 2022 23:32 UTC](https://discourse.nodered.org/t/bar-chart-custom-colors/58499 "2022-02-16T23:32:55Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@tverilytt](https://discourse.nodered.org/u/tverilytt)
#### Post date: [16 February 2022 23:32 UTC](https://discourse.nodered.org/t/bar-chart-custom-colors/58499/1 "2022-02-16T23:32:56Z")
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"](https://app.cpcbccr.com/ccr_docs/About_AQI.pdf)
I found tese discussions regarding bar chart colors:
[Config more than 9 colours in bar chart](https://discourse.nodered.org/t/config-more-than-9-colours-in-bar-chart/36826)
[Bar Graph Colors determined by values](https://discourse.nodered.org/t/bar-graph-colors-determined-by-values/5156)
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](https://aq.eu-gb.mybluemix.net/ui)
Cheers
-jo
----- ui-chart-js.js code snippets -----
>
Line 50:
// Watch for any changes to controls
```auto
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
```auto
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
});
});
```
---
### Author:  [@tverilytt](https://discourse.nodered.org/u/tverilytt)
#### Post date: [17 February 2022 22:52 UTC](https://discourse.nodered.org/t/bar-chart-custom-colors/58499/2 "2022-02-17T22:52:58Z")
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [19 March 2022 22:53 UTC](https://discourse.nodered.org/t/bar-chart-custom-colors/58499/3 "2022-03-19T22:53:35Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.