# Using msg.ui\_control to set Chart node attributes

**URL:** <https://discourse.nodered.org/t/using-msg-ui-control-to-set-chart-node-attributes/78956>\
**Category:** Dashboard\
**Created:** [5 June 2023 10:22 UTC](https://discourse.nodered.org/t/using-msg-ui-control-to-set-chart-node-attributes/78956 "2023-06-05T10:22:22Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![john56](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@john56](https://discourse.nodered.org/u/john56)\
**Post date:** [5 June 2023 10:22 UTC](https://discourse.nodered.org/t/using-msg-ui-control-to-set-chart-node-attributes/78956/1 "2023-06-05T10:22:22Z")

</div>

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](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md) 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.

---

<div class="post-metadata">

**Author:** ![john56](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@john56](https://discourse.nodered.org/u/john56)\
**Post date:** [8 June 2023 06:57 UTC](https://discourse.nodered.org/t/using-msg-ui-control-to-set-chart-node-attributes/78956/2 "2023-06-08T06:57:01Z")

</div>

These are some things I've tried:

```auto
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

```

---

<div class="post-metadata">

**Author:** ![grahambaxter](https://avatars.discourse-cdn.com/v4/letter/g/f0a364/32.png) [@grahambaxter](https://discourse.nodered.org/u/grahambaxter)\
**Post date:** [17 June 2023 08:46 UTC](https://discourse.nodered.org/t/using-msg-ui-control-to-set-chart-node-attributes/78956/3 "2023-06-17T08:46:14Z")

</div>

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:

```auto

```

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,

            },
        }]

    }
}

```

}

```auto

```

At least it is usable!

---

<div class="post-metadata">

**Author:** ![grahambaxter](https://avatars.discourse-cdn.com/v4/letter/g/f0a364/32.png) [@grahambaxter](https://discourse.nodered.org/u/grahambaxter)\
**Post date:** [17 June 2023 08:48 UTC](https://discourse.nodered.org/t/using-msg-ui-control-to-set-chart-node-attributes/78956/4 "2023-06-17T08:48:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![grahambaxter](https://avatars.discourse-cdn.com/v4/letter/g/f0a364/32.png) [@grahambaxter](https://discourse.nodered.org/u/grahambaxter)\
**Post date:** [17 June 2023 09:05 UTC](https://discourse.nodered.org/t/using-msg-ui-control-to-set-chart-node-attributes/78956/5 "2023-06-17T09:05:23Z")

</div>

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.

---

<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:** [17 June 2023 09:07 UTC](https://discourse.nodered.org/t/using-msg-ui-control-to-set-chart-node-attributes/78956/6 "2023-06-17T09:07:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![grahambaxter](https://avatars.discourse-cdn.com/v4/letter/g/f0a364/32.png) [@grahambaxter](https://discourse.nodered.org/u/grahambaxter)\
**Post date:** [17 June 2023 09:12 UTC](https://discourse.nodered.org/t/using-msg-ui-control-to-set-chart-node-attributes/78956/7 "2023-06-17T09:12:00Z")

</div>

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?

---

<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:** [17 June 2023 09:21 UTC](https://discourse.nodered.org/t/using-msg-ui-control-to-set-chart-node-attributes/78956/8 "2023-06-17T09:21:41Z")

</div>

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.

> [@Line Chart Series Labels](https://discourse.nodered.org/t/line-chart-series-labels/24798):
>
> If I understand correctly, the series labels cannot be changed for line charts, which is making my line charts impossible to read. The reason is I have several sensors with mac addresses, however these mac addresses are meaningless to the end user and what they need to see is a a user-friendly name of where the sensor is located such as upstairs, outside instead of the mac address. showing the mac address of these sensors instead of their related location means that the charts cant really be e…

---

<div class="post-metadata">

**Author:** ![grahambaxter](https://avatars.discourse-cdn.com/v4/letter/g/f0a364/32.png) [@grahambaxter](https://discourse.nodered.org/u/grahambaxter)\
**Post date:** [18 June 2023 12:11 UTC](https://discourse.nodered.org/t/using-msg-ui-control-to-set-chart-node-attributes/78956/9 "2023-06-18T12:11:03Z")

</div>

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

---

<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:** [18 June 2023 19:56 UTC](https://discourse.nodered.org/t/using-msg-ui-control-to-set-chart-node-attributes/78956/10 "2023-06-18T19:56:53Z")

</div>

Can't tell more than I can see from sources

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

---

<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:** [18 June 2023 20:01 UTC](https://discourse.nodered.org/t/using-msg-ui-control-to-set-chart-node-attributes/78956/11 "2023-06-18T20:01:08Z")

</div>

Indeed as package.json line 106

> <https://github.com/node-red/node-red-dashboard/blob/master/package.json>

---

<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:** [18 July 2023 20:02 UTC](https://discourse.nodered.org/t/using-msg-ui-control-to-set-chart-node-attributes/78956/12 "2023-07-18T20:02:00Z")

</div>

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