# Ui\_chart styling

**URL:** <https://discourse.nodered.org/t/ui-chart-styling/43974>\
**Category:** Dashboard\
**Created:** [10 April 2021 20:29 UTC](https://discourse.nodered.org/t/ui-chart-styling/43974 "2021-04-10T20:29:58Z")\
**Posts on this page:** 11\
**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:** [10 April 2021 20:29 UTC](https://discourse.nodered.org/t/ui-chart-styling/43974/1 "2021-04-10T20:29:58Z")

</div>

In [this previous thread](https://discourse.nodered.org/t/how-to-change-line-thickness-of-chart/13788), an example by @hotNipi demonstrated how the line styling of a ui\_chart could be changed (also add a 'fill'), and other styling.

Instead of applying a global style which changes all series in a line chart, is it possible to for example add a 'fill' to one series, a dashed line to the second series, etc.

---

<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:** [11 April 2021 06:28 UTC](https://discourse.nodered.org/t/ui-chart-styling/43974/2 "2021-04-11T06:28:02Z")

</div>

That takes to change options for (every) `dataset`.  
`dataset` is property of `Chart.data` which you can't reach if you are using ui\_chart node. You must create chart (with `ui_template`) to have reference to data object. And of course, then you'll need to configure much more than just line type.

---

<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:** [11 April 2021 17:07 UTC](https://discourse.nodered.org/t/ui-chart-styling/43974/3 "2021-04-11T17:07:15Z")

</div>

> [@hotNipi](#):
>
> You must create chart (with `ui_template` ) to have reference to data object

Really don't want to go down that road. I've seen your previous ui\_template example, and it would still require a lot of work to implement it.

> [@hotNipi](#):
>
> `dataset` is property of `Chart.data` which you can't reach if you are using ui\_chart node.

Is that something that could be exposed (if @dceejay chose to do so?)

---

<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:** [11 April 2021 22:19 UTC](https://discourse.nodered.org/t/ui-chart-styling/43974/4 "2021-04-11T22:19:33Z")

</div>

> [@Paul-Reed](#):
>
> Is that something that could be exposed (if @dceejay chose to do so?)

Is this possible, or likely?

---

<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:** [13 April 2021 10:12 UTC](https://discourse.nodered.org/t/ui-chart-styling/43974/5 "2021-04-13T10:12:19Z")

</div>

unlikely unless someone fancies offering up a pull request.

---

<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:** [13 April 2021 11:17 UTC](https://discourse.nodered.org/t/ui-chart-styling/43974/6 "2021-04-13T11:17:20Z")

</div>

> [@dceejay](#):
>
> unlikely

That's a shame, because without lots of coding, the ui\_chart is the only option for users to use.  
If we could style the series individually, it would open up lots of opportunities for users like hotnipi to do their magic.

---

<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:** [13 April 2021 11:57 UTC](https://discourse.nodered.org/t/ui-chart-styling/43974/7 "2021-04-13T11:57:05Z")

</div>

Why is it a shame ? I do this on my own free time as do you. As you know the Angular 1 framework that the dashboard is built on will become unsupported (beyond EOL) later in the year - so I personally don't feel any urgency to add new features to something we need to replace fairly soon. If you feel different then by all means make it happen. Hotnipi has shown you a way to do it using the template so there is the workaround.

---

<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:** [13 April 2021 12:27 UTC](https://discourse.nodered.org/t/ui-chart-styling/43974/8 "2021-04-13T12:27:05Z")

</div>

> [@dceejay](#):
>
> As you know the Angular 1 framework that the dashboard is built on will become unsupported (beyond EOL) later in the year

No I didn't know, and you didn't say that in your last posts. Had I known, I would not have raised this in the first place, or commented further...

---

<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:** [13 April 2021 12:56 UTC](https://discourse.nodered.org/t/ui-chart-styling/43974/9 "2021-04-13T12:56:17Z")

</div>

No worries.

---

<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:** [16 April 2021 20:04 UTC](https://discourse.nodered.org/t/ui-chart-styling/43974/10 "2021-04-16T20:04:44Z")

</div>

> [@dceejay](#):
>
> Hotnipi has shown you a way to do it using the template so there is the workaround.

Here is a [link to the workaround](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/25) mentioned above.  
Chart.js can be extensively customised, and now data can be restored in the chart upon a browser connect, so older data is not lost when a browser is closed.

---

<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:** [30 April 2021 20:04 UTC](https://discourse.nodered.org/t/ui-chart-styling/43974/11 "2021-04-30T20:04:59Z")

</div>

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