# Line Chart series query

**URL:** <https://discourse.nodered.org/t/line-chart-series-query/48478>\
**Category:** General\
**Created:** [16 July 2021 06:21 UTC](https://discourse.nodered.org/t/line-chart-series-query/48478 "2021-07-16T06:21:43Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoshuaG](https://avatars.discourse-cdn.com/v4/letter/j/edb3f5/32.png) [@JoshuaG](https://discourse.nodered.org/u/JoshuaG)\
**Post date:** [16 July 2021 06:21 UTC](https://discourse.nodered.org/t/line-chart-series-query/48478/1 "2021-07-16T06:21:43Z")

</div>

I have a chart setup what I needed to show positive and negative numbers in different colours,  
how I have achieved this is to check the value before hand and set the topic to High or Low depending on its value.

But now I have graphs that look like this.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/9/29b50e609254b01cbc630fe6ecca0944b4b4902a.png)  
Ideally it would put both lines on top of each other, or not plot the 0 for the the other topic when the value isn't being used.

Below is the code I used to find the negativity

```auto
if (pl <= 0){
    pl2 = pl
    pl1 = 0
} else {
    pl2 = 0
    pl1 = pl
}
//series 1 #green
msg = {
    payload: pl1,
    timestamp: ts,
    topic: "high"
},

//series 2 #red
msg2 = {
    payload: pl2,
    timestamp: ts,
    topic: "low"
}

if (pl > 0){
    return msg
}
else {
    return msg2
}

```

---

<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:** [16 July 2021 06:30 UTC](https://discourse.nodered.org/t/line-chart-series-query/48478/2 "2021-07-16T06:30:20Z")

</div>

The answer may be somewhere in this thread

> [@Stacked Bars Chart with msg.ui\_control](https://discourse.nodered.org/t/stacked-bars-chart-with-msg-ui-control/31587):
>
> I need to have a bar chart with stacked columns. Unfortunately this is not an option you can find in the configuration window (why?, it's a super standard bar chart style ), so I followed HotNipi's Feb. 10th post suggesting to use msg.ui\_control : msg.ui\_control = { options: { scales: { xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] } } } It works, but it has some undesired side-ef…

---

<div class="post-metadata">

**Author:** ![JoshuaG](https://avatars.discourse-cdn.com/v4/letter/j/edb3f5/32.png) [@JoshuaG](https://discourse.nodered.org/u/JoshuaG)\
**Post date:** [16 July 2021 06:43 UTC](https://discourse.nodered.org/t/line-chart-series-query/48478/3 "2021-07-16T06:43:50Z")

</div>

That does get me part way there, I'm still showing 0 values though which I'd like to hide if possible.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/a/9ad82d2340d1a4dfe5ef4334ee14a1921ac89fa8.png)

---

<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:** [16 July 2021 06:45 UTC](https://discourse.nodered.org/t/line-chart-series-query/48478/4 "2021-07-16T06:45:17Z")

</div>

What if you set `null` for values you don't need to show?

---

<div class="post-metadata">

**Author:** ![JoshuaG](https://avatars.discourse-cdn.com/v4/letter/j/edb3f5/32.png) [@JoshuaG](https://discourse.nodered.org/u/JoshuaG)\
**Post date:** [16 July 2021 06:51 UTC](https://discourse.nodered.org/t/line-chart-series-query/48478/5 "2021-07-16T06:51:22Z")

</div>

I'm not sure how I would do this because I only ever send one payload just with a different topic.

Edit: Also I hate how the time has decided to slant itself, looking at the docs now to see fi that can be controlled.

---

<div class="post-metadata">

**Author:** ![JoshuaG](https://avatars.discourse-cdn.com/v4/letter/j/edb3f5/32.png) [@JoshuaG](https://discourse.nodered.org/u/JoshuaG)\
**Post date:** [16 July 2021 06:56 UTC](https://discourse.nodered.org/t/line-chart-series-query/48478/6 "2021-07-16T06:56:12Z")

</div>

Infact after the chart has moved on a bit I've noticed its working exactly as required, just need to sort the text out and it'll be perfect  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/6/563f25bd9c045e813ee41ea2366bca0c92164d7f.png)

---

<div class="post-metadata">

**Author:** ![JoshuaG](https://avatars.discourse-cdn.com/v4/letter/j/edb3f5/32.png) [@JoshuaG](https://discourse.nodered.org/u/JoshuaG)\
**Post date:** [16 July 2021 10:37 UTC](https://discourse.nodered.org/t/line-chart-series-query/48478/7 "2021-07-16T10:37:58Z")

</div>

@hotNipi Sorry to tag you.

I use a chart pre-formatter to set my axis max and min to fix values so all charts (9) loot the same and can be compared without interpreting the axis.  
Is there a way to fix the values using ui control as I am not having much luck.

---

<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:** [16 July 2021 10:48 UTC](https://discourse.nodered.org/t/line-chart-series-query/48478/8 "2021-07-16T10:48:52Z")

</div>

If they really are always the same why not fix them in the config ?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/652c1ae9ea6741342c7bb1b4b8b177adbd04db0d.png)  
But yes you can set them with ui\_control - see

> <https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md>

---

<div class="post-metadata">

**Author:** ![JoshuaG](https://avatars.discourse-cdn.com/v4/letter/j/edb3f5/32.png) [@JoshuaG](https://discourse.nodered.org/u/JoshuaG)\
**Post date:** [16 July 2021 11:02 UTC](https://discourse.nodered.org/t/line-chart-series-query/48478/9 "2021-07-16T11:02:28Z")

</div>

I have set them in the config, but since adding the ui\_control lines above it is ignoring them

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

---

<div class="post-metadata">

**Author:** ![JoshuaG](https://avatars.discourse-cdn.com/v4/letter/j/edb3f5/32.png) [@JoshuaG](https://discourse.nodered.org/u/JoshuaG)\
**Post date:** [16 July 2021 12:43 UTC](https://discourse.nodered.org/t/line-chart-series-query/48478/10 "2021-07-16T12:43:22Z")

</div>

@hotNipi @dceejay  
Its funny both those code work individually but when I put them together whichever one is on top wins.

I'm currently using

```auto
ui= {
        options: {
            "Max": 60,
            "Min": -140
        },
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }

```

but that doesn't stack the bars, if I put the mix/max at the bottom it does fit the axis.  
Hopefully I'm just doing something stupid.

I pass `ui_control: ui` when I build my message

edit: Sorry, when my code is like above I get fixed axis, when I use

```auto
ui= {
        options: {
            "Max": 60,
            "Min": -140,
        
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        }}
    }

```

I lose the fix axis

---

<div class="post-metadata">

**Author:** ![JoshuaG](https://avatars.discourse-cdn.com/v4/letter/j/edb3f5/32.png) [@JoshuaG](https://discourse.nodered.org/u/JoshuaG)\
**Post date:** [16 July 2021 13:51 UTC](https://discourse.nodered.org/t/line-chart-series-query/48478/11 "2021-07-16T13:51:10Z")

</div>

@dceejay I notice that your the author of that config-fields.md you link me.

I've been playing with the interactive bit on this website: [Stacked Bar Chart | Chart.js](https://www.chartjs.org/docs/latest/samples/bar/stacked.html)  
And using

```auto
const config = {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Chart.js Bar Chart - Stacked'
      },
    },
    responsive: true,
    scales: {
      xAxes: {
        stacked: true,
      },
      yAxes: {
        stacked: true,
        min:-75,
        max:50
      }
    }
  }
};

```

limits the data as you would expect, but when I use the same options layout for the node it doesn't.  
I don't know if the ui dashboard isn't using the latest version of Chart.js. I 'm wondering if you could explain why it doesn't work?

---

<div class="post-metadata">

**Author:** ![JoshuaG](https://avatars.discourse-cdn.com/v4/letter/j/edb3f5/32.png) [@JoshuaG](https://discourse.nodered.org/u/JoshuaG)\
**Post date:** [16 July 2021 14:06 UTC](https://discourse.nodered.org/t/line-chart-series-query/48478/12 "2021-07-16T14:06:32Z")

</div>

After a bit more digging and looking at the angular-chartjs documentation for 2.6.0 I see the options used to be under ticks. So I can do what i need to do by using

```auto
ui= {
    options: {
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true,
                ticks: {
                    max: 60,
                    min: -140
                }
            }]
        }
    }    
}

```

What a journey, thanks for you time.

---

<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 July 2021 14:06 UTC](https://discourse.nodered.org/t/line-chart-series-query/48478/13 "2021-07-30T14:06:41Z")

</div>

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