# Ui\_control parameters for a line plot

**URL:** <https://discourse.nodered.org/t/ui-control-parameters-for-a-line-plot/42989>\
**Category:** Dashboard\
**Created:** [22 March 2021 09:23 UTC](https://discourse.nodered.org/t/ui-control-parameters-for-a-line-plot/42989 "2021-03-22T09:23:42Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![haegar33](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haegar33/32/38805_2.png) [@haegar33](https://discourse.nodered.org/u/haegar33)\
**Post date:** [22 March 2021 09:23 UTC](https://discourse.nodered.org/t/ui-control-parameters-for-a-line-plot/42989/1 "2021-03-22T09:23:42Z")

</div>

I am trying to modify a simple line plot with the msg.ui\_control variable.  
However I am not sure which parameters are allowed.

1. If I follow the table [here](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md) I got basically the same parameters as in the ui\_chart widget itself.
2. If I try some more extended setting parameters according to the [chartjs documentation](https://www.chartjs.org/docs/latest/axes/cartesian/linear.html) most of the settings there are not working. for example a function like this:

```auto
msg.payload = [{"series": series, "data": jsondata, "labels": labels}];  
msg.ui_control = {
    options: {
    scales: {
        yAxes: {
            ticks: { max: 10 }
            }
        }
    }
}
msg.ui_control.options.scales.yAxes.ticks.min = 0;

return msg;

```

shows an empty plot when used as an input to a ui\_chart node. Are the chart.js parameters not valid here?

---

<div class="post-metadata">

**Author:** ![Simon01011](https://avatars.discourse-cdn.com/v4/letter/s/e68b1a/32.png) [@Simon01011](https://discourse.nodered.org/u/Simon01011)\
**Post date:** [22 March 2021 09:58 UTC](https://discourse.nodered.org/t/ui-control-parameters-for-a-line-plot/42989/2 "2021-03-22T09:58:48Z")

</div>

HI!

I'm using that as well, see:

> [@Dashboard UI Chart Legend Font SIze](https://discourse.nodered.org/t/dashboard-ui-chart-legend-font-size/11112/24):
>
> 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", …

Try using strings in your object

---

<div class="post-metadata">

**Author:** ![haegar33](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haegar33/32/38805_2.png) [@haegar33](https://discourse.nodered.org/u/haegar33)\
**Post date:** [22 March 2021 10:43 UTC](https://discourse.nodered.org/t/ui-control-parameters-for-a-line-plot/42989/3 "2021-03-22T10:43:47Z")

</div>

Thanks for the hint! I placed the keywords in quotes (which should be obsolete for a JSON string) and now the plot reappears with the default axes ticks. Looks like the complete msg.ui\_control is ignored.. 🙄

---

<div class="post-metadata">

**Author:** ![Simon01011](https://avatars.discourse-cdn.com/v4/letter/s/e68b1a/32.png) [@Simon01011](https://discourse.nodered.org/u/Simon01011)\
**Post date:** [22 March 2021 11:20 UTC](https://discourse.nodered.org/t/ui-control-parameters-for-a-line-plot/42989/4 "2021-03-22T11:20:40Z")

</div>

The yAxes in your first post should be an array, see here [Cartesian · Chart.js documentation](https://www.chartjs.org/docs/latest/axes/cartesian/)

Edit: I tried with your code above (array "[...]" added), and it doesn't work. To make it work I had to add some x axis configuration

```auto
            xAxes: [{
                type: 'time',
            }],

```

That worked

---

<div class="post-metadata">

**Author:** ![haegar33](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haegar33/32/38805_2.png) [@haegar33](https://discourse.nodered.org/u/haegar33)\
**Post date:** [22 March 2021 13:11 UTC](https://discourse.nodered.org/t/ui-control-parameters-for-a-line-plot/42989/5 "2021-03-22T13:11:32Z")

</div>

You are a hero 😀 Indeed this works. Apparently you need a complete description of all axes.

Thanks a lot!

---

<div class="post-metadata">

**Author:** ![Simon01011](https://avatars.discourse-cdn.com/v4/letter/s/e68b1a/32.png) [@Simon01011](https://discourse.nodered.org/u/Simon01011)\
**Post date:** [22 March 2021 13:25 UTC](https://discourse.nodered.org/t/ui-control-parameters-for-a-line-plot/42989/6 "2021-03-22T13:25:28Z")

</div>

You're welcome 😃

> [@haegar33](#):
>
> Apparently you need a complete description of all axes.

In my case I only cusomize my x-axis. So it seems you can modify your x-axis without using the y-axis, but you cannot modify the y-axis without the x-axis. Maybe - in contrast to my example above - an empty object is enough? I didn't test it...

---

<div class="post-metadata">

**Author:** ![haegar33](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haegar33/32/38805_2.png) [@haegar33](https://discourse.nodered.org/u/haegar33)\
**Post date:** [22 March 2021 13:44 UTC](https://discourse.nodered.org/t/ui-control-parameters-for-a-line-plot/42989/7 "2021-03-22T13:44:18Z")

</div>

It might test a little further but for now I am happy to have a line plot which displays correctly (and controlled) on my 8y old iPad as well as my latest PC. Not trivial considering all the issues with javasscript framework versions..

---

<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:** [5 April 2021 13:44 UTC](https://discourse.nodered.org/t/ui-control-parameters-for-a-line-plot/42989/8 "2021-04-05T13:44:45Z")

</div>

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