# Changing UI chart colors? Using ui\_control?
**URL:** https://discourse.nodered.org/t/changing-ui-chart-colors-using-ui-control/64117
**Category:** General
**Created:** [18 June 2022 22:58 UTC](https://discourse.nodered.org/t/changing-ui-chart-colors-using-ui-control/64117 "2022-06-18T22:58:40Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)
#### Post date: [18 June 2022 22:58 UTC](https://discourse.nodered.org/t/changing-ui-chart-colors-using-ui-control/64117/1 "2022-06-18T22:58:41Z")
Changing UI chart colors? I believe the following should work right?
msg.ui\_control = {"colors":['#FF0000', '#00FF00', '#0000FF', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000']};
The question is can I use predefined HTML color names? Or does it have to be an HTML hex color code?
msg.ui\_control = {"colors":['red', 'green', 'blue', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000']};
Does not seem to work?
---
### Author:  [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)
#### Post date: [18 June 2022 23:11 UTC](https://discourse.nodered.org/t/changing-ui-chart-colors-using-ui-control/64117/2 "2022-06-18T23:11:37Z")
Ah... I think I have something else goofed up...
6/18/2022, 4:08:45 PM[node: Message](http://eccentric:1880/#)msg : Object
object
payload: 12.06
enabled: true
color: "#0000ff"
ui\_control: object
colors: array[9]
0: "#0000ff"
1: "#000000"
2: "#000000"
3: "#000000"
4: "#000000"
5: "#000000"
6: "#000000"
7: "#000000"
8: "#000000"
\_msgid: "ca7fb5a7e6fcb681"
\_event: "node:a9262e35158f35f8"
The above looks right to me, but does not seem to customize the chart line color, only have 1 series so should only have to change the first color, right?
I am rolling my own 'msg' since I a function node that has multiple outputs to various UI elements...
```auto
theTemperature=msg.payload[ZERO].temperature;
theColor=Colorize(theTemperature);
theColors = { "colors": [
theColor,
'#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000'
]
};
theMessages[TEMPERATURE]={ payload: theTemperature, ...ENABLE, color: theColor, ui_control: theColors };
```
I know the temperature, enable, color object properties are working, but never tried to set ui\_control this way before. The Colorize() function varies the color based on a scale so temperature 40C red, 35C orange, etc.
---
### Author:  [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)
#### Post date: [18 June 2022 23:48 UTC](https://discourse.nodered.org/t/changing-ui-chart-colors-using-ui-control/64117/3 "2022-06-18T23:48:08Z")
Ok, I was cleaning up the code a bit, and replacing the static colors array with an array fill method, and the colorization worked! So scratching my head a bit, why the following works...
```auto
theColors = { "colors": Array(NINE).fill(theColor) };
```
But the following does not...
```auto
theColors = { "colors": [
theColor,
'#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000'
]
};
```
I only have one series, so first color should be the only one that matters, I got the default color, not black or dark blue using the above.
---
### Author:  [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)
#### Post date: [19 June 2022 00:16 UTC](https://discourse.nodered.org/t/changing-ui-chart-colors-using-ui-control/64117/4 "2022-06-19T00:16:00Z")
Ok... I swear it worked, but now I just looked at it again, and default color has taken over. So a simple array of 9 identical color values for 'colors' in ui\_control, is not working? What did I goof-up?
I found a forum thread, that suggested I quality the entire settings for chart, which I tired. Again.... this looks right to me... But it clearly is not working as expected, I just get the default color. Interesting that no errors, and if change the line type or other settings the chart adapts. Just don't seem to get the color accepted.
```auto
msg : Object
object
payload: 11.55
enabled: true
color: "#0000ff"
ui_control: object
look: "line"
legend: false
interpolate: "bezier"
xformat: "HH:mm"
colors: array[9]
0: "#0000ff"
1: "#0000ff"
2: "#0000ff"
3: "#0000ff"
4: "#0000ff"
5: "#0000ff"
6: "#0000ff"
7: "#0000ff"
8: "#0000ff"
options: object
empty
_msgid: "96ef5d84248a63b2"
_event: "node:a9262e35158f35f8"
```
---
### Author:  [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)
#### Post date: [19 June 2022 02:41 UTC](https://discourse.nodered.org/t/changing-ui-chart-colors-using-ui-control/64117/5 "2022-06-19T02:41:27Z")
Ok, I figured out what gets the colorization to work... but someone that knows the 'code' logic applicable will have to explain why this is the case.
I figured out that after I set the colors (array) I have to sent chart clear payload? Or I should say clear chart payload, the colorization starts working? Color me [COUGH] confused.
The question is... how to change the color without clearing the chart? I don't want to reset/clear the chart just to change the line color. Please tell me there is a way to do this, I hope?
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [18 August 2022 02:41 UTC](https://discourse.nodered.org/t/changing-ui-chart-colors-using-ui-control/64117/6 "2022-08-18T02:41:48Z")
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.