# Dashboard UI Chart Legend Font color

**URL:** <https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-color/48898>\
**Category:** Dashboard\
**Created:** [26 July 2021 00:03 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-color/48898 "2021-07-26T00:03:41Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ylechasseur](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ylechasseur/32/6549_2.png) [@ylechasseur](https://discourse.nodered.org/u/ylechasseur)\
**Post date:** [26 July 2021 00:03 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-color/48898/1 "2021-07-26T00:03:41Z")

</div>

Hi,  
I am trying to get the Legend Text color change from black to White. Whatever I am doing, it always stay Black.

Any idea will be very Welcome 🙂

Thanks a lot

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/915b9a0e9a7499c87bb875aa5062c0b1ae8dc56a.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/3/33f5d5621a9a1bcd833e68cfb259b918b4c814d9.png)

In my node Chart Config, I have this configuration:

msg.ui\_control = {  
options: {  
plugins: {  
legend: {  
display: true,  
labels: {  
fontColor:'#ffffff',  
fontFamily:"'Arial'",  
fontStyle:'normal',  
fontSize:9  
}  
}  
},  
animations: {  
tension: {  
duration: 1000,  
easing: 'linear',  
from: 1,  
to: 0,  
loop: true  
}  
},

```
    scales: {
        yAxes: [{
            gridLines:{
                color:'#99999933',
                zeroLineColor:'#99999933',
                tickMarkLength:5
            },
            ticks: {
               fontFamily:"'Arial'",
               fontStyle:'normal',
               fontSize:9,
               fontColor:'#ffffff',
               lineHeight:1,
               precision:0,
               stepSize:3,
               suggestedMin: 22,
               suggestedMax: 29
            }
        }],
        xAxes: [{
            type: 'time',
            time: {
               distribution: 'series'
               },
            
            gridLines: {
                 color:'#99999933',
                zeroLineColor:'#99999933',
                tickMarkLength:5
            },
            legend: {
        display: true,
         labels: {
              fontColor:'#ffffff',
             fontSize:12,
                }
            },
           ticks: {
                   fontFamily:"'Arial'",
                   fontStyle:'normal',
                   fontSize:9,
                   fontColor:'#ffffff',
                   lineHeight:1,
                   precision:0,
                   stepSize:3,
                   suggestedMin: 22,
                   suggestedMax: 29
                }
        }],
    
    }
}
};

```

delete msg.payload;  
return msg;

---

<div class="post-metadata">

**Author:** ![MyRandomThoughts](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/myrandomthoughts/32/41085_2.png) [@MyRandomThoughts](https://discourse.nodered.org/u/MyRandomThoughts)\
**Post date:** [26 July 2021 11:11 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-color/48898/2 "2021-07-26T11:11:23Z")

</div>

IIRC the colour comes from the dashboard theme. Ensure you have the Dark theme selected and refresh the page

---

<div class="post-metadata">

**Author:** ![ylechasseur](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ylechasseur/32/6549_2.png) [@ylechasseur](https://discourse.nodered.org/u/ylechasseur)\
**Post date:** [26 July 2021 11:46 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-color/48898/3 "2021-07-26T11:46:06Z")

</div>

God !! I didn't realized

Works Thanks a lot

Yves

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [9 August 2021 11:46 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-color/48898/4 "2021-08-09T11:46:18Z")

</div>

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