How to sync two X Axis' scaling when zooming

plotly.js
1

I’m trying to draw a graph in plotly JavaScript that contains two line traces on one subplot and another line on a second subplot. They all share two proportional X axis, and have independent Y axis.

https://codepen.io/euankirkhope/pen/OeBBPj

When zooming in only the first x axis re-scales, whilst the second always goes to the center of the axis.

How can I get both x axis to zoom and scale together?

Note I had to add a dummy invisble trace just to get X2 to show up!

You can see that when zooming the second axis always shows the same values no matter where you do a box zoom.

2

I’m not 100% sure I understand what you’re trying to accomplish, but maybe try using axis.matches instead of scaleanchor?

For example, setting xaxis.matches: 'x2' and/or xaxis.matches: 'x' gives: https://codepen.io/etpinard/pen/YogrWg

More on matches:

1 Like
3

Hi, I don’t think that works, as the second axis has a different scaling. E.g. x-axis2 is scaling of factor of 2 of xaxis1.

example one scale kelvin, one degC, or one scale mm, other meters. in my case I need to show meters, and then number of adjacent machines which are positioned along the meter length, which happen to be 2m wide. so the graph can let users see meter mark, or which machine id a point is at.