# Dashboard UI Chart Legend Font SIze

**URL:** <https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112>\
**Category:** Dashboard\
**Created:** [14 May 2019 10:33 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112 "2019-05-14T10:33:53Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![seishuuin](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@seishuuin](https://discourse.nodered.org/u/seishuuin)\
**Post date:** [14 May 2019 10:33 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/1 "2019-05-14T10:33:53Z")

</div>

Is it possible to modify the Chart Legend Size? I find the default sizing too small and would like to increase the legend sizing.

I couldn't find any previous post about this inquiry so I am posting it as a new topic 🙂

---

<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:** [14 May 2019 10:46 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/2 "2019-05-14T10:46:36Z")

</div>

Have you tried with options already? [https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md)

_2. The chart can take many of the angular-chartjs options for changing axes label, scales etc_

Actual properties what can be changed:  
[https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration](https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration)

---

<div class="post-metadata">

**Author:** ![seishuuin](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@seishuuin](https://discourse.nodered.org/u/seishuuin)\
**Post date:** [15 May 2019 03:32 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/3 "2019-05-15T03:32:46Z")

</div>

I have read through the links that you have provided before but am slightly clueless on how to implement it as I am new to programming ☹

---

<div class="post-metadata">

**Author:** ![seishuuin](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@seishuuin](https://discourse.nodered.org/u/seishuuin)\
**Post date:** [15 May 2019 04:17 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/4 "2019-05-15T04:17:07Z")

</div>

I have tried using the switch node by setting it to msg.ui\_control and the JSON output as  
{"options.legend.labels.fontSize":20}  
Am I on the right track....?

---

<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:** [15 May 2019 04:49 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/5 "2019-05-15T04:49:17Z")

</div>

> [@seishuuin](#):
>
> {"options.legend.labels.fontSize":20}

Nearly there 🙂

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9849c6d3e256a85c619b911b123337c7f93dcd7f.png)

---

<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:** [15 May 2019 05:17 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/6 "2019-05-15T05:17:10Z")

</div>

And now as you have opened magic box of chart modifications we are waiting nice graphs like

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/ac0e1c091447bda2629321d0c7e283c93b988a9c.png)

---

<div class="post-metadata">

**Author:** ![seishuuin](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@seishuuin](https://discourse.nodered.org/u/seishuuin)\
**Post date:** [15 May 2019 05:43 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/7 "2019-05-15T05:43:27Z")

</div>

Hmmm. Okay I tried to do what you have helped me with. But the Chart Legend still does not have any difference. Should I not be using the Chart Node (under the dashboard nodes) for this application and make my own chart node?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e1861fa561a75a1b33abfc4388c71033d00702f7.png)

---

<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:** [15 May 2019 05:59 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/8 "2019-05-15T05:59:01Z")

</div>

About versions you are using?  
Node-RED:  
dashboard:

---

<div class="post-metadata">

**Author:** ![seishuuin](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@seishuuin](https://discourse.nodered.org/u/seishuuin)\
**Post date:** [15 May 2019 06:00 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/9 "2019-05-15T06:00:04Z")

</div>

Node-Red: 0.19.5  
Dashboard: 2.10.1

---

<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:** [15 May 2019 06:01 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/10 "2019-05-15T06:01:12Z")

</div>

You might have some things missing then i think. Try to update if you can.

---

<div class="post-metadata">

**Author:** ![seishuuin](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@seishuuin](https://discourse.nodered.org/u/seishuuin)\
**Post date:** [15 May 2019 06:02 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/11 "2019-05-15T06:02:43Z")

</div>

Okay sure. Is there any npm commands that I can update Node-Red safely? I wouldn't want to lose my progress now.

---

<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:** [15 May 2019 06:08 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/12 "2019-05-15T06:08:12Z")

</div>

Read carefully [https://nodered.org/docs/getting-started/upgrading](https://nodered.org/docs/getting-started/upgrading)  
and act as per environment you are using.  
With successful updates your current work is preserved

---

<div class="post-metadata">

**Author:** ![seishuuin](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@seishuuin](https://discourse.nodered.org/u/seishuuin)\
**Post date:** [15 May 2019 06:41 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/13 "2019-05-15T06:41:38Z")

</div>

Alright, Thank you! I'm using Siemens IOT2040, and will update Node-red and nodejs!

---

<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:** [15 May 2019 06:46 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/14 "2019-05-15T06:46:30Z")

</div>

And dashboard. You can use Palette manager for dashboard (and other nodes) update .

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

---

<div class="post-metadata">

**Author:** ![seishuuin](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@seishuuin](https://discourse.nodered.org/u/seishuuin)\
**Post date:** [15 May 2019 09:10 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/15 "2019-05-15T09:10:28Z")

</div>

Thank you very much bro, its working now!

---

<div class="post-metadata">

**Author:** ![Harpau](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/harpau/32/8425_2.png) [@Harpau](https://discourse.nodered.org/u/Harpau)\
**Post date:** [16 May 2019 14:26 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/16 "2019-05-16T14:26:21Z")

</div>

@hotNipi: I would like to do something very similar: Remove the numbers in front of the Y-axis. I tried to find the solution myself using the chartjs documentation you mentioned, but I did not succeed because of my poor developer skills. Can you help me with that?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [16 May 2019 15:12 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/17 "2019-05-16T15:12:48Z")

</div>

A bit more complex but try this function

```auto
[{"id":"c2ff6ac4.9e10a8","type":"function","z":"439238bf.9f6608","name":"","func":"msg.ui_control = {\n options: {\n scales: {\n yAxes: [{\n ticks: {\n display: false\n }\n }]\n }\n }\n}\nreturn msg;","outputs":1,"noerr":0,"x":650,"y":440,"wires":[["57e2e0a7.e79a3"]]}]

```

---

<div class="post-metadata">

**Author:** ![Harpau](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/harpau/32/8425_2.png) [@Harpau](https://discourse.nodered.org/u/Harpau)\
**Post date:** [16 May 2019 19:58 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/18 "2019-05-16T19:58:55Z")

</div>

Many thanks, I have tried it. It works, but overwrites all other settings, So all settings that are normally made in the Options Dialog have to be made in the function. Unfortunately this is even more complex and definitely above my skills...

![21](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1328ce1b6930024b20bf7e87c8742524a83394c1.png)

In the above, the Chart for Britta is using the following function (I included the legend option):

```auto
msg.ui_control = {
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    display: false
                }
            }]
        },
        legend: {
            display: false
        }
    }
};
return msg;

```

---

<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:** [16 May 2019 20:08 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/19 "2019-05-16T20:08:30Z")

</div>

Too early to give up. You are here in most helpful community ever seen. Nobody leaves with no solution. The way to go is to try, get stuck, share the problem and learn on the way to solution.

Edit: Im too slow on phone typing ...

---

<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:** [16 May 2019 20:21 UTC](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/20 "2019-05-16T20:21:12Z")

</div>

Try to give min and max values for ticks property. Should bring back the line into chart area.

```auto
msg.ui_control = {
    options: {
        legend: {
            display: false
        },
       scales: {
            yAxes: [{
                ticks: {
                    display:false,
                    max: 1,
                    min: 0,
                    stepSize: 0.5// make it 1 to get rid of horizontal center line
                }
            }],
            
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'minute'
                }
            }]
       }
    }
}

```

[Next page](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112.md?page=2)