Using msg.ui_control to set Chart node attributes

Dashboard
1

I've successfully used the msg.ui_control xformat property to set the formatting of the time displayed on the x-axis. I would also like to change some other properties of the chart via the "options" property. The example given on this page is {scales: {yAxes: [{ticks: {fontSize: 20}}]}}. but I cannot get it to work. i.e. it makes no difference to the chart. Ultimately I would like to be able to set the 'minRotation' and 'maxRotation' for the tick labels on the x-axis and perhaps also change the colours of the chart.
Would someone please show me the syntax to make this work.

2

These are some things I've tried:

msg.ui_control = { "xformat": "HH:mm" };   // this works
msg.ui_control.xformat = "HH:mm";  // this also works
msg.ui_control.animation = { duration: 1000, easing: "easeOutQuint" };  // this works too
msg.ui_control.options = { scales: { xAxes: { ticks: { 'maxRotation':45, 'minRotation':45 }}}};  // does not work
msg.ui_control.options = { scales: { yAxes: [{ ticks: { fontSize: 20 }}]}};  // does not work
3

Interestingly I am currently struggling with the same sort of thing. Indeed, fontSize doas not seem to work, but fontColor apparently does.

However, what I would like to do is get the "ticks" callback working. It never seems to be called. I suppose I should be grateful that I have got "logarithmic" going

This is my ui_control:

msg.ui_control =
{
// look: "line",
options: {
scales: {
yAxes: [{
type: "logarithmic",
gridLines: {
display: true,
color: "gray",
lineWidth: 0.5
},
ticks: {
display: true,
autoSkip: false,
callback: function (label, index, labels) {
label = label.replace('e+2', '00W');
label = label.replace('e+3', 'kW');
return label;
},
max: 10000,
min: 100,
fontColor: "white",

            },
        }],
        xAxes: [{
            type: 'time',
            time: {
                displayFormats: {
                    minute: 'HH:mm'
                }
            },
            gridLines: {
                display: true,
                color: "gray",
                lineWidth: 0.5
            },
            ticks: {
                fontColor: "white",
                autoSkip: true,

            },
        }]

    }
}

}

At least it is usable!

4

And it looks like I need a lesson in the use of the preformatted flag!

5

Correction, fontSize:nn does work for me. However, it messes up the scaling of the rest of the graph so I guess once you adjust this you have to take responsibility for the rest of the measurements.

6

No you can't send callbacks with msg.ui_control. Those will work only if you make the chart from scratch using the ui_template node where you can pass options with callbacks at the creation.

7

Thank you; that will stop me from wasting time!

Do I need to add to add something to the palette in order to do it from scratch?

8

Not really. The ui_template node is part of dashboard widgets and the charting library is also part of dashboard so you just need to implement it.

Here's one example but you can search here in forum to find more. There is many.

1 Like
9

Thank you very much. I have done as you suggested and I have been able to configure a chart exactly how I want it.

How can you tell the version of chart.js which is in use? It is apparently not V3.xx

10

Can't tell more than I can see from sources

image

11

Indeed as package.json line 106

12

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