# Changing line thickness in ui\_chart

**URL:** https://discourse.nodered.org/t/changing-line-thickness-in-ui-chart/42626
**Category:** Dashboard
**Created:** [14 March 2021 17:02 UTC](https://discourse.nodered.org/t/changing-line-thickness-in-ui-chart/42626 "2021-03-14T17:02:49Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [14 March 2021 17:02 UTC](https://discourse.nodered.org/t/changing-line-thickness-in-ui-chart/42626/1 "2021-03-14T17:02:50Z")

</div>

What is the correct way to use `msg.ui_control` to change the line thickness in a ui\_chart? I've seen this post, and example by @hotNipi -

> [@How To Change Line Thickness of Chart](https://discourse.nodered.org/t/how-to-change-line-thickness-of-chart/13788/2):
>
> Property to change line thickness is line.borderWidth msg.ui\_control = { options: { elements: { line: { borderWidth: 5 // default = 3 } }, .....

and I'm adding `msg.ui_control` in the function which formats the chart data, a simplified extract would be;

```auto
msg.payload = chartdata;
msg.topic = 'status';
msg.ui_control = {
    "options": {
        "elements": {
            "line": {
                "borderWidth": 1
            }
        }
    }
}

```

...which changes the chart unexpectedly!

![chart](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/658c4f666cbb21887dce9f2795890faa18bef453.jpeg)

---

<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: [14 March 2021 17:59 UTC](https://discourse.nodered.org/t/changing-line-thickness-in-ui-chart/42626/2 "2021-03-14T17:59:25Z")

</div>

By changing the line options, most of related things fall back to library default.  
So it takes to adjust those things.  
Assuming you don't want the fill and points

```auto
msg.ui_control = {
    "options": {
        "elements": {
            "line": {
                "borderWidth": 1,
                "fill":false
            },
            "point":{
                "radius":0
            }
        }
    }
}

```

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [14 March 2021 18:13 UTC](https://discourse.nodered.org/t/changing-line-thickness-in-ui-chart/42626/3 "2021-03-14T18:13:26Z")

</div>

Aah OK, I did read the [chart.js documentation](https://www.chartjs.org/docs/latest/charts/line.html) and expected those options to return to default unless specified otherwise.  
But it works fine now, thanks.  
Much better with a 1px line width 😊

![chart](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/b/6b45c42247c48b8b25e069fa2165c9b0b437dda6.jpeg)

---

<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: [28 March 2021 18:13 UTC](https://discourse.nodered.org/t/changing-line-thickness-in-ui-chart/42626/4 "2021-03-28T18:13:39Z")

</div>

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