# Bar chart fill property

**URL:** https://discourse.nodered.org/t/bar-chart-fill-property/4411
**Category:** Dashboard
**Created:** [30 October 2018 07:18 UTC](https://discourse.nodered.org/t/bar-chart-fill-property/4411 "2018-10-30T07:18:12Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![abra](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/abra/32/3443_2.png) [@abra](https://discourse.nodered.org/u/abra)
#### Post date: [30 October 2018 07:18 UTC](https://discourse.nodered.org/t/bar-chart-fill-property/4411/1 "2018-10-30T07:18:12Z")

</div>

Is it possible to display only a line with the actual value when using a bar chart, instead of filling it ?  
If yes, is it possible to put 2 different values in the same bar chart, both displayed as a line (eventually with different colors) ? I would like to use a bar chart to display the min and the max value of some MQTT value.

---

<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: [30 October 2018 07:35 UTC](https://discourse.nodered.org/t/bar-chart-fill-property/4411/2 "2018-10-30T07:35:47Z")

</div>

No that is not possible with the existing chart

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [30 October 2018 09:32 UTC](https://discourse.nodered.org/t/bar-chart-fill-property/4411/3 "2018-10-30T09:32:52Z")

</div>

I do the equivalent by using a line chart with two lines. One for min and one for max.

---

<div class="post-metadata">

### Author: ![abra](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/abra/32/3443_2.png) [@abra](https://discourse.nodered.org/u/abra)
#### Post date: [30 October 2018 12:10 UTC](https://discourse.nodered.org/t/bar-chart-fill-property/4411/4 "2018-10-30T12:10:46Z")

</div>

@Colin: How exactly did you achieved that ? The line chart has normally the time on the Y-axis. Could you please post some samples here?

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [30 October 2018 12:23 UTC](https://discourse.nodered.org/t/bar-chart-fill-property/4411/5 "2018-10-30T12:23:58Z")

</div>

Sorry, I assumed you were plotting against time. If not then I don't know.

---

<div class="post-metadata">

### Author: ![abra](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/abra/32/3443_2.png) [@abra](https://discourse.nodered.org/u/abra)
#### Post date: [30 October 2018 14:39 UTC](https://discourse.nodered.org/t/bar-chart-fill-property/4411/6 "2018-10-30T14:39:51Z")

</div>

Thanks anyway.  
Does the line chart allow to set the content by passing a list of (x , y) pairs ?  
If yes, is it possible in this case to replace the time on the x-axis (I wrongly wrote the Y-axis above) with some other values ?

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [30 October 2018 16:19 UTC](https://discourse.nodered.org/t/bar-chart-fill-property/4411/7 "2018-10-30T16:19:01Z")

</div>

> [@abra](#):
>
> If yes, is it possible in this case to replace the time on the x-axis (I wrongly wrote the Y-axis above) with some other values ?

Perhaps you could share a picture that shows the kind of bar chart you are trying to get ?

Even if the standard dashboard chart node is somehow simple it is quite flexible. You can import the example flow from this link to see how many possibilities you have when using the node.

[https://github.com/node-red/node-red-dashboard/blob/master/Charts.md](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md)

 ![r-01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/637ad3243fc15831120f5be23b2aa5b2d183812f.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: [30 October 2018 19:17 UTC](https://discourse.nodered.org/t/bar-chart-fill-property/4411/8 "2018-10-30T19:17:46Z")

</div>

See [https://github.com/node-red/node-red-dashboard/blob/master/Charts.md](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md) for how to send x and y. But. You can only have one x value per y so you need to plot two very close together but not exactly the same value.

---

<div class="post-metadata">

### Author: ![abra](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/abra/32/3443_2.png) [@abra](https://discourse.nodered.org/u/abra)
#### Post date: [30 October 2018 20:14 UTC](https://discourse.nodered.org/t/bar-chart-fill-property/4411/9 "2018-10-30T20:14:21Z")

</div>

@Andrei, @dceejay : Thanks for your suggestions.

The effect I am looking for is something like a bar chart, with the bar moving up and down. I mean where the lower part of the bar chart can be moving also above or below 0, not only on 0.

---

<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: [30 October 2018 20:42 UTC](https://discourse.nodered.org/t/bar-chart-fill-property/4411/10 "2018-10-30T20:42:43Z")

</div>

If you mean waterfall chart, there isn't any "out of box" solution.  
[https://canvasjs.com/javascript-charts/waterfall-chart/](https://canvasjs.com/javascript-charts/waterfall-chart/)

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [31 October 2018 01:00 UTC](https://discourse.nodered.org/t/bar-chart-fill-property/4411/11 "2018-10-31T01:00:13Z")

</div>

> [@abra](#):
>
> above or below 0, not only on 0.

Still not clear what you want. If your concern is negative values then the standard chart can handle it without any hacking.

 ![r-01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/ecd530d3e52ec31b930f42f376b4968b1400c42b.png)

---

<div class="post-metadata">

### Author: ![abra](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/abra/32/3443_2.png) [@abra](https://discourse.nodered.org/u/abra)
#### Post date: [31 October 2018 06:02 UTC](https://discourse.nodered.org/t/bar-chart-fill-property/4411/12 "2018-10-31T06:02:54Z")

</div>

@hotNipi : Yes, that is what I mean

@Andrei: Thanks for your reply. I want for instance to display a bar between 7.5 and 15, and not between 0 and 7.5 (on the y-axis). Al the Y values in a bar chart are displayed filled until 0.  
I am looking for a node-red solution to display a chart with "flying bricks", as in the link posted by @hotNipi.
