Dashboard UI Chart Legend Font SIze

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

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

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

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

1 Like

Thank you very much bro, its working now!

2 Likes

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

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

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;

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

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

Many thanks!

Looks very interesting now:

34

And this is how it looked originally:

45

It would be perfekt without the 3D-Effect and with Time-Labels shown on the X-Axis.

My Function Node now looks like this:

[{"id":"d76c0c57.362018","type":"function","z":"427fc89b.e34038","name":"","func":"msg.ui_control = {\n    options: {\n        scales: {\n            yAxes: [{\n                ticks: {\n                    display: false,\n                    min : 0,\n                    max : 1,\n                    stepSize : 1\n                }\n            }],\n            xAxes: [{\n                type: 'time',\n                time: {\n                    unit: 'minute'\n                }\n            }]\n        },\n        legend: {\n            display: false\n        }\n    }\n};\nreturn msg;","outputs":1,"noerr":0,"x":650,"y":100,"wires":[["5b86851d.3816b4"]]}]

Explore and do experiments in this area https://www.chartjs.org/docs/latest/axes/cartesian/time.html
Along the xAxes you can adjust many things to properly distribute values.

Many thanks again. I have done some experiments and got now a good configuration:

09

msg.ui_control = {
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    display: false,
                    min : -0.01,
                    max : 1.05,
                    stepSize : 1
                }
            }],
            xAxes: [{
                type: 'time',
                time: {
                    displayFormats: {
                        millisecond: 'HH:mm',
                        second: 'HH:mm',
                        minute: 'HH:mm',
                        hour: 'HH:mm'
                    }
                },
                ticks: {
                    display: true,
                    fontSize: 11,
                    fontColor: '#000',
                    maxRotation: 0
                },
                gridLines: {
                    display: true,
                    drawBorder : false,
                    drawOnChartArea: true,
                    drawTicks: true,
                    tickMarkLength: 5
                }
            }]
        },
        legend: {
            display: false
        }
    }
};
return msg;
2 Likes

Hi!

Sorry for digging out this old thread, but I'm interested in customising my chart. I followed the suggestions here but I'm stuck. Maybe an image first:
image
Depending on the multistate switch I display the data. But I want to adjust the x-axis labels depending on the time interval. For the case in the image I'd like to have tick labels every 10 minutes. I tried:

{
    "options": {
        "scales": {
            "xAxes": [
                {
                    "type": "time",
                    "time": {
                        "displayFormats": {
                            "millisecond": "HH:mm",
                            "second": "HH:mm",
                            "minute": "HH:mm",
                            "hour": "HH",
                            "day": "MMM D"
                        },
                        "unit": "minute",
                        "stepSize": 10
                    },
                    "ticks": {
                        "display": true,
                        "fontSize": 11,
                        "maxRotation": 50
                    },
                    "gridLines": {
                        "display": false,
                        "drawBorder": false,
                        "drawOnChartArea": true,
                        "drawTicks": true,
                        "tickMarkLength": 5
                    }
                }
            ]
        },
        "legend": {
            "display": true
        }
    }
}

How do I tell the chart to show me tick labels every 10 minutes? I thought that

"stepSize": 10

was the option I needed, but it doesn't have an effect. Even if I use 1 or 1000. There must be something I didn't quite understand in the docs, can somebody give me a hint please? Thanks in advance!

You can't adjust the time gap between the ticks. But you can tell how many ticks is allowed to create.
Mostly it can be fixed value cos the layout size of chart is not changing. But can be changed if data requires so.

"ticks": {
    "autoSkip": true,
    "maxTicksLimit": 6
},
2 Likes

Thank you very much!

BTW, I didn't find this option in the documentation in Cartesian · Chart.js documentation but now found it in Linear · Chart.js documentation. It seems I'm sometimes overwhelmed with reading the docs if I don't know the right keyword I need :worried:

For me it took just to read the docs with no intention to solve some immediate problem. But hey, who the hell has time to do that :smiley:

If a day had 30-40 hours, that would be great. Then I had - besides working and family - some time to sleep :grin:

One reason why "stepSize" sounded good to me was the idea to have an equidistant spacing. Now it looks like
image
That's not as nice as an equidistant spacing but I can live with it. So thanks again! :+1:

Just to finalize my problem: the config inside the xAxes[0] object needs to be

type: 'time',
time: {
    displayFormats: {
        minute: 'HH:mm',
        hour: 'HH',
        day: 'MMM D'
    },
    unit: 'minute',
    unitStepSize: 10,
},

This way an equidistant spacing is possible (on the second image "unitStepSize: 15," was used) (Found on https://stackoverflow.com/a/37083312)
image

image

2 Likes

Bravo :slight_smile:

You should also adjust the tick colors and gridline colors cos whenever you change the scales thy fall back to library default which is some dark gray and fits only for light themes.

There is many examples shared here where you can what is needed to adjust ...