Align two charts perfectly?

[metawops]

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.

[Steve-Mcl]

Try sending a message like so:

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)

[metawops]

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

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

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.

[Buckskin]

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.

or format the y axis label

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

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

[metawops]

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 ...

{
   grid: { left: 200 }
}

{
   "grid": { "left": 200 }
}

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

and then studying the documentation thoroughly I finally learned (from here) that the correct version is:

{
   "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.

[Buckskin]

@Buckskin

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

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

[metawops]

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:

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

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

Looks acceptable now on the big screen:

... 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. )