# Styling a line chart

**URL:** <https://discourse.nodered.org/t/styling-a-line-chart/92163>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, dashboard-2\
**Created:** [4 October 2024 12:16 UTC](https://discourse.nodered.org/t/styling-a-line-chart/92163 "2024-10-04T12:16:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Desmond-Zeh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/desmond-zeh/32/92216_2.png) [@Desmond-Zeh](https://discourse.nodered.org/u/Desmond-Zeh)\
**Post date:** [4 October 2024 12:16 UTC](https://discourse.nodered.org/t/styling-a-line-chart/92163/1 "2024-10-04T12:16:51Z")

</div>

Hello!  
Please any idea on how I can change the font size of legend, x and y axes of a line chart. I’ve succeeded in changing the line thickness, but the legend and axes are not quite visible.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [4 October 2024 12:28 UTC](https://discourse.nodered.org/t/styling-a-line-chart/92163/2 "2024-10-04T12:28:43Z")

</div>

Please specify what ui node you are using and update the category/tags accordingly so that people can better respond. Thanks.

---

<div class="post-metadata">

**Author:** ![Desmond-Zeh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/desmond-zeh/32/92216_2.png) [@Desmond-Zeh](https://discourse.nodered.org/u/Desmond-Zeh)\
**Post date:** [4 October 2024 12:50 UTC](https://discourse.nodered.org/t/styling-a-line-chart/92163/3 "2024-10-04T12:50:47Z")

</div>

I used a chart ui node and function node which modifies the thickness of the lines as required.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/8/f8c12b89ee38f24bc905f49c0394c0f0d0549cf0.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [4 October 2024 13:30 UTC](https://discourse.nodered.org/t/styling-a-line-chart/92163/4 "2024-10-04T13:30:34Z")

</div>

If you copy the javascript in your function node and paste it here using the `</>` button

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

Then people can copy, test and adjust your code before advising you how to achieve your desired result.

Alternatively we could laboriously re-type the code shown in your picture before testing and adjusting it.  
(Or of course, not)

---

<div class="post-metadata">

**Author:** ![Desmond-Zeh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/desmond-zeh/32/92216_2.png) [@Desmond-Zeh](https://discourse.nodered.org/u/Desmond-Zeh)\
**Post date:** [4 October 2024 13:51 UTC](https://discourse.nodered.org/t/styling-a-line-chart/92163/5 "2024-10-04T13:51:38Z")

</div>

Noted.  
I've also tried this with the template node, but just the label section has appended to my chart,

```auto
<style>
    
     .chart>div>.label{
    font-size : 100px !important ;
   font-weight : bold !important ;
    text-color :#f9f9f9f9 !important;
            }
           .chart>div>.legend{
                background : #f9f9f9f9 !important;
                padding : 15px !important;
            }
            .chart>div>.legend>div>.item{
                font-size : 36px !important;
                color : gold !important;
            }
           .chart>div>.legend-item-symbol{
               background-radius : 0 !important;
            }
            .chart > div > .axes{
                font-size : 36px !important;
                color : purple !important;
            }
     </style>

```

For the line thickness, the function node handles that quite better:

```auto
msg.ui_control = {
    options: {
 elements: {
   line: {
borderWidth : 15,
fill : false
           }
        
            }
        }
    
}
return msg;

```

Below is the image of what I've achieved so far, the x and y elements are not quite visible and so does the legend.

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

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [4 October 2024 14:52 UTC](https://discourse.nodered.org/t/styling-a-line-chart/92163/6 "2024-10-04T14:52:13Z")

</div>

Thanks for the update.

I assume from your other posts that this is a Dashboard v2 chart (@flowfuse/node-red-dashboard) not Dashboard v1 (node-red-dashboard).

Your axis labels do seem to be too small.  
Are you displaying the chart on a particularly high resolution screen?

I have tried and failed to style any part of the Dashboard v2 chart widget so I'm sorry I can't suggest anything useful.

The developers do read and respond to forum posts, maybe they will advise you.

---

<div class="post-metadata">

**Author:** ![Desmond-Zeh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/desmond-zeh/32/92216_2.png) [@Desmond-Zeh](https://discourse.nodered.org/u/Desmond-Zeh)\
**Post date:** [5 October 2024 10:22 UTC](https://discourse.nodered.org/t/styling-a-line-chart/92163/7 "2024-10-05T10:22:01Z")

</div>

Thank you

---

<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:** [3 January 2025 10:22 UTC](https://discourse.nodered.org/t/styling-a-line-chart/92163/8 "2025-01-03T10:22:22Z")

</div>

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