Dashboard UI Chart Legend Font SIze

Dashboard
1

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 :slight_smile:

2

Have you tried with options already? 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

2 Likes
3

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 :frowning:

4

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....?

5

Nearly there :slight_smile:

image
image717×256 10.1 KB

1 Like
6

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

image
image.png1050×420 49.3 KB

1 Like
7

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
image.png924×203 26.7 KB

8

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

1 Like
9

Node-Red: 0.19.5
Dashboard: 2.10.1

10

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

1 Like
11

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

12

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

1 Like
13

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

14

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

image
image.png269×511 11.3 KB

1 Like
15

Thank you very much bro, its working now!

2 Likes
16

@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?

17

A bit more complex but try this function

[{"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"]]}]
18

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

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

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

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 ...

20

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

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'
                }
            }]
       }
    }
}