Align two charts perfectly?

Dashboard
,
1

image
image3556Ă—1018 192 KB

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.

2

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)

1 Like
3

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
image3550Ă—1018 168 KB

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? :face_with_monocle:

I'll try and study the docs!

UPDATE:
I think I know what happened! :man_facepalming:
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. :thinking:

4

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
image513Ă—286 18.5 KB

or format the y axis label

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

image
image514Ă—283 18.8 KB

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