# Help with linear chart x-axis behavior

**URL:** <https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336>\
**Category:** Dashboard\
**Created:** [3 February 2021 20:59 UTC](https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336 "2021-02-03T20:59:54Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![garrenr14](https://avatars.discourse-cdn.com/v4/letter/g/82dd89/32.png) [@garrenr14](https://discourse.nodered.org/u/garrenr14)\
**Post date:** [3 February 2021 20:59 UTC](https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336/1 "2021-02-03T20:59:54Z")

</div>

Hello,

I am trying to build a ui\_chart in Node-Red 1.2.6 and Dashboard 2.24.1 but I'm having troubles with the X-Axis scale. I'm only seeing the last ~2 hours of data appear in the X-axis, when the x-coordinates are passed as timestamps. What I expect to see is the full range of x-axis values, which typically span about 10 hours.

The confusing thing is that I have many devices running this exact code and so I can confirm it works in the following other versions:

- Node-Red v0.20.5 with Dashboard 2.15.5
- Node-Red v1.1.2 with Dashboard 2.23.0

Here's an example of a message that I'm passing into the node-red-dashboard:ui\_chart node:

```auto
{
    "topic": "screen_refresh",
    "_msgid": "71792fdf.38ad",
    "_event": "node:21dc8520.ba973a",
    "payload": [{
            "series": ["Planned", "Actual"],
            "data": [[{
                        "x": 1612360815216,
                        "y": 41
                    }, {
                        "x": 1612364402965,
                        "y": 41
                    }, {
                        "x": 1612368015214,
                        "y": 34
                    }, {
                        "x": 1612371603412,
                        "y": 41
                    }, {
                        "x": 1612375215212,
                        "y": 27
                    }, {
                        "x": 1612378803858,
                        "y": 41
                    }, {
                        "x": 1612382415214,
                        "y": 34
                    }, {
                        "x": 1612384796774,
                        "y": 27
                    }, {
                        "x": 1612385180922,
                        "y": 0
                    }
                ], [{
                        "x": 1612360815216,
                        "y": 25
                    }, {
                        "x": 1612364402965,
                        "y": 40
                    }, {
                        "x": 1612368015214,
                        "y": 36
                    }, {
                        "x": 1612371603412,
                        "y": 48
                    }, {
                        "x": 1612375215212,
                        "y": 33
                    }, {
                        "x": 1612378803858,
                        "y": 48
                    }, {
                        "x": 1612382415214,
                        "y": 34
                    }, {
                        "x": 1612384796774,
                        "y": 8
                    }, {
                        "x": 1612385180922,
                        "y": 0
                    }
                ]],
            "labels": [""]
        }
    ],
    "ui_control": {
        "ymin": 0,
        "ymax": 50,
        "xmin": 1612360815216,
        "xmax": 1612385180922,
        "look": "line",
        "xformat": "h a",
        "interpolate": "linear",
        "nodata": "Waiting for Data",
        "dot": true,
        "legend": "true"
    },
    "chartTitle": "Planned vs Actual Run 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:** [3 February 2021 21:12 UTC](https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336/2 "2021-02-03T21:12:38Z")

</div>

There is a config field in the chart where you can specify the max time range or number of data points. Is that configured appropriately?

---

<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:** [3 February 2021 21:29 UTC](https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336/3 "2021-02-03T21:29:16Z")

</div>

Six hours presented with the data you have shared using chart node without any configuration adjustments.

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

```auto
Node-RED version: v1.2.6
29 Jan 08:00:26 - [info] Node.js version: v14.15.3
29 Jan 08:00:26 - [info] Windows_NT 10.0.18363 x64 LE
29 Jan 08:00:27 - [info] Loading palette nodes
29 Jan 08:00:28 - [info] Dashboard version 2.26.1

```

---

<div class="post-metadata">

**Author:** ![garrenr14](https://avatars.discourse-cdn.com/v4/letter/g/82dd89/32.png) [@garrenr14](https://discourse.nodered.org/u/garrenr14)\
**Post date:** [3 February 2021 22:09 UTC](https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336/4 "2021-02-03T22:09:56Z")

</div>

I must be missing something in the config of the chart. I'm seeing this:

![chartPic](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/c/ec766a730b845658df40fc53cb79449e0ffa59d0.png)

And here's my node config:

 ![chartConfig](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/2/925d580ff1eca0386a81ac3ec87ac04cc5be5ad8.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:** [3 February 2021 22:12 UTC](https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336/5 "2021-02-03T22:12:35Z")

</div>

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

That should be line chart

---

<div class="post-metadata">

**Author:** ![garrenr14](https://avatars.discourse-cdn.com/v4/letter/g/82dd89/32.png) [@garrenr14](https://discourse.nodered.org/u/garrenr14)\
**Post date:** [3 February 2021 22:14 UTC](https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336/6 "2021-02-03T22:14:29Z")

</div>

Right but this should override it, it even overrides the bar chart as is:

`msg.ui_control.look='line';`

---

<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:** [3 February 2021 22:21 UTC](https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336/7 "2021-02-03T22:21:04Z")

</div>

True. But it takes quite of work for chart that way and with first injection of the data, it fails for me completely. Only if chart has already initialized and then send the data again, it is rendered correctly. That will be easy fix.  
The other helpful thing is to update the dashboard. There is improvements for chart.

---

<div class="post-metadata">

**Author:** ![garrenr14](https://avatars.discourse-cdn.com/v4/letter/g/82dd89/32.png) [@garrenr14](https://discourse.nodered.org/u/garrenr14)\
**Post date:** [3 February 2021 22:24 UTC](https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336/8 "2021-02-03T22:24:36Z")

</div>

The latest data is injected three times per minute, so that explains why the chart remains blank for the first 20 seconds.

Updating Dashboard might be difficult as these devices are on an isolated network. Do you have any tricks for pushing the Dashboard package manually? Would it be as simple as coping the directory `../.node-red/node_modules/node-red-dashboard`?

---

<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:** [3 February 2021 22:47 UTC](https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336/9 "2021-02-03T22:47:47Z")

</div>

I'm not expert of that area... Probably the copy paste way is not the correct way to do it.

---

<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:** [3 February 2021 23:09 UTC](https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336/10 "2021-02-03T23:09:15Z")

</div>

The other thing, if you need to change the chart type on fly (from bar to line) is to send message with `ui_control` part first and then after slight delay send message with chart data only. That way the chart has time to initialize correctly.

---

<div class="post-metadata">

**Author:** ![garrenr14](https://avatars.discourse-cdn.com/v4/letter/g/82dd89/32.png) [@garrenr14](https://discourse.nodered.org/u/garrenr14)\
**Post date:** [3 February 2021 23:10 UTC](https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336/11 "2021-02-03T23:10:16Z")

</div>

Good to know, thank you!

---

<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:** [4 February 2021 10:02 UTC](https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336/12 "2021-02-04T10:02:15Z")

</div>

> [@hotNipi](#):
>
> send message with `ui_control` part first and then after slight delay send message with chart data only.

Have you shown that the delay is necessary? When I have done that I did not leave a delay (send one message immediately after the other). A delay should not be necessary unless there is some async stuff in the chart node code for the ui\_control message.

---

<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:** [4 February 2021 10:16 UTC](https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336/13 "2021-02-04T10:16:27Z")

</div>

You are probably correct.  
Tried and it seems that if you change the chart type on fly, it cannot render the data on first attempt.  
But it works if you clear the chart after the type change and before new data input.

---

<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:** [4 February 2021 10:27 UTC](https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336/14 "2021-02-04T10:27:45Z")

</div>

For me, sending an empty array in the payload (to clear the chart), in the ui\_control message did it.

I also determined that if you set some of the bar chart options up for the bar chart (scales and axes) that these conflict with the line graph, so in the ui\_control message I also had to set `options: {}`. See this thread for more details. [Line chart not display after switch to bar and back to line](https://discourse.nodered.org/t/line-chart-not-display-after-switch-to-bar-and-back-to-line/40074)

---

<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:** [6 March 2021 10:27 UTC](https://discourse.nodered.org/t/help-with-linear-chart-x-axis-behavior/40336/15 "2021-03-06T10:27:59Z")

</div>

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