# Align two charts perfectly?

**URL:** <https://discourse.nodered.org/t/align-two-charts-perfectly/100373>\
**Category:** Dashboard\
**Tags:** dashboard-2, ui-chart\
**Created:** [13 February 2026 16:54 UTC](https://discourse.nodered.org/t/align-two-charts-perfectly/100373 "2026-02-13T16:54:43Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![metawops](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/metawops/32/105800_2.png) [@metawops](https://discourse.nodered.org/u/metawops)\
**Post date:** [13 February 2026 16:54 UTC](https://discourse.nodered.org/t/align-two-charts-perfectly/100373/1 "2026-02-13T16:54:43Z")

</div>

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

How can I make the y-axes of the two charts perfectly align vertically, so that both x-axes' markings are aligned perfectly?  
The y-axes positions (meaning: the vertical lines at the leftmost x value which is identical for both charts) should be at the same x-position regardless of the numbers that are displayed to the left of the y-axes.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [13 February 2026 17:42 UTC](https://discourse.nodered.org/t/align-two-charts-perfectly/100373/2 "2026-02-13T17:42:19Z")

</div>

Try sending a message like so:

```auto
msg.ui_update = {
  grid: {
    left: 80, // Force a fixed pixel width for the left margin
    right: 20, // Do the same for the right to align the end-points
    containLabel: false // Optional: manual control is often more precise
  }
}
return msg

```

to both charts.

(untested)

---

<div class="post-metadata">

**Author:** ![metawops](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/metawops/32/105800_2.png) [@metawops](https://discourse.nodered.org/u/metawops)\
**Post date:** [13 February 2026 19:47 UTC](https://discourse.nodered.org/t/align-two-charts-perfectly/100373/3 "2026-02-13T19:47:28Z")

</div>

Thanks for caring & trying to help, @Steve-Mcl, much appreciated!

However, this did something very weird: The y-axes' scales are now wayyyyy off:

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

Granted, the y-axes are aligned now but why did the scale change so much? And why are there those peaks with values that never came from the data source? 🧐

I'll try and study the docs!

* * *

UPDATE:  
I think I know what happened! 🤦‍♂️  
I used an inject node in front of a function node to trigger this message. The inject node transported the default timestamp in `msg.payload` and this got transported to the chart somehow.  
However, after I removed the timestamp from the inject node (so that msg.payload is empty I assume?) the sent `msg.ui_update` did nothing to the chart. 🤔

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [13 February 2026 20:08 UTC](https://discourse.nodered.org/t/align-two-charts-perfectly/100373/4 "2026-02-13T20:08:29Z")

</div>

Update on Steve's suggestion: send this for the first chart only

`msg.ui_update = {chartOptions: grid: {left: '10%'} }`

The 10% will require adjustment until the y Axis grid line lines up with chart 2. This will move the left hand side. The only downside is that the y axis label also moves.

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

or format the y axis label

`msg.ui_update = {chartOptions: yAxis: {axisLabel: {formatter: ' {value} '}}}`

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

again, adjust the number of spaces until the y axis line up

---

<div class="post-metadata">

**Author:** ![metawops](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/metawops/32/105800_2.png) [@metawops](https://discourse.nodered.org/u/metawops)\
**Post date:** [15 February 2026 17:11 UTC](https://discourse.nodered.org/t/align-two-charts-perfectly/100373/5 "2026-02-15T17:11:21Z")

</div>

Okay, just a quick update.  
Because I'm totally new with the Dashboard 2 module I had to learn first this `msg.ui_update` thing.  
After a few wrong tries of sending `msg.ui_update` with these JSON object variants ...

```json
{
   grid: { left: 200 }
}

```

```json
{
   "grid": { "left": 200 }
}

```

```json
{
   "options": {
      "grid": { "left": 200 }
   }
}

```

and then studying the documentation thoroughly I finally learned (from [here](https://dashboard.flowfuse.com/nodes/widgets/ui-chart#dynamic-properties)) that the correct version is:

```json
{
   "chartOptions": {
      "grid": { "left": 200 }
   }
}

```

Good. The `200` was just an example to see if I can reach to the chart _at all_.

Then I tried the `"10%"` option but needed to set it for both charts. There was no miraculous automagic adjustment of the 2nd chart's y-axis after I applied the `"left": "10%"` to the 1st chart only.  
Having both at 10% left kinda works. But only on large enough screens.  
When I look at the dashboard on my iPhone in portrait orientation the y axes are still/again not alinged properly. 🧐 To fix this I needed to got as high as `"left": "22%"` – but that looks really bad on the big screen again ... 😒

So, any further suggestions very welcome. 😊

Thanks so far, folks!! ❤

* * *

EDIT: I'm investigating two y-axes in one chart next so I can put both curves into the same, single chart.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [15 February 2026 19:47 UTC](https://discourse.nodered.org/t/align-two-charts-perfectly/100373/6 "2026-02-15T19:47:51Z")

</div>

> [@Buckskin](#):
>
> msg.ui\_update = {chartOptions: yAxis: {axisLabel: {formatter: ' {value} '}}}

Have you tried this? (Note spaces before & after `{value}`)

---

<div class="post-metadata">

**Author:** ![metawops](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/metawops/32/105800_2.png) [@metawops](https://discourse.nodered.org/u/metawops)\
**Post date:** [16 February 2026 13:53 UTC](https://discourse.nodered.org/t/align-two-charts-perfectly/100373/7 "2026-02-16T13:53:19Z")

</div>

Thank, @Buckskin, I tried it now. Took me a while to understand the concept (again: totally new to Dashboard 2) but thanks to the docs and some experimenting I was able to achieve a satisfying solution now! 😊  
This is the JSON I'm sending to the first chart only now:

```JSON
{
    "chartOptions": {
        "yAxis": {
            "axisLabel": {
                "formatter": " {value}"
            }
        }
    }
}

```

(Those are 11 space characters in front of the `{value}`. 🙈)

Looks acceptable now on the big screen:

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

... and on the iPhone display, too – in portrait _and_ in landscape! 👍

So I'd say: case closed. (Although I'd love to have an option "align y-axes" I could simply set to `true` which does everything for me. 🤷‍♂️)

---

<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:** [2 March 2026 13:53 UTC](https://discourse.nodered.org/t/align-two-charts-perfectly/100373/8 "2026-03-02T13:53:32Z")

</div>

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