# Node red dashboard chart background color

**URL:** <https://discourse.nodered.org/t/node-red-dashboard-chart-background-color/85945>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [27 February 2024 08:32 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-background-color/85945 "2024-02-27T08:32:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nightmareside15](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nightmareside15/32/56176_2.png) [@nightmareside15](https://discourse.nodered.org/u/nightmareside15)\
**Post date:** [27 February 2024 08:32 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-background-color/85945/1 "2024-02-27T08:32:58Z")

</div>

The chart background seems following the theme from the node - red. Is there any way to replacing it to some other color other than the default theme? Also, is it also possible to change the line width like we did in chartjs? I havent tried dashboard 2 yet but Im just wondering if this is possible in the first place.  
Thank you very much!

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [27 February 2024 08:38 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-background-color/85945/2 "2024-02-27T08:38:44Z")

</div>

If you read the sidebar help text it talks about class, if you give the chart node a class name, You can then set the styling of the widget using a template node and adding css to target the class of the chart node. A web search will give you much info on styling, eg [background](https://duckduckgo.com/?q=css+background&ia=web) and [class](https://duckduckgo.com/?q=css+class&ia=web). Also there many topics if you search the forum [Search results for 'css dashboard widget' - Node-RED Forum](https://discourse.nodered.org/search?expanded=true&q=css%20dashboard%20widget)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [27 February 2024 10:13 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-background-color/85945/3 "2024-02-27T10:13:49Z")

</div>

Follow CSS override technique

```auto
.chart-with-my-background canvas{
    background-color: red;
}

```

---

<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:** [28 March 2024 10:14 UTC](https://discourse.nodered.org/t/node-red-dashboard-chart-background-color/85945/4 "2024-03-28T10:14:05Z")

</div>

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