Black Lives Matter. Please consider donating to Black Girls Code today.

Line up grid lines on multi-axis plot

I have a multi-axis plot and I want the grid lines for y1 and y2 to line up. Ideally, the scaling of the grid lines would be the same as the plot is responsively re-drawn but hopefully that can be handled by autorange. Tried looking through the documentation but couldn’t find something that matched the desired result, unless I missed it. An example is at the link below.




Maybe the new axis scaleanchor and scaleratio are what you’re looking - see them in action here:

This looks to be pointing in the right direction. Is there a general method to determining the scale ratio to use? It seems that if I want the zeros of y1 and y2 to match up I sacrifice having the grid lines match up and vice versa. I determined a ratio by using the max y1 and max y2 and getting their ratio. That works for matching up the zeros but not the grid lines. 0.05 seems to work nice for the grid lines in this case, 1:20 ratio. See the updated Codepen for example.


1 Like

Any update as to how this problem can be solved? I am having a similar issue

I was never able to find a solution that worked :frowning:

Pasting a link to minimal codePen or jsFiddle example would help us help you immensely here.

Here is a link to my attempt:

I added
" scaleanchor : ‘y2’ "
This solves the problem of the grid lines lining up, but it looks bad due to both charts starting at different zero-lines.

Is there a way of matching the grid lines and the zero-lines as well?

It would probably be best to set zeroline: false in this case.

I updated my codepen and all that does is make the bold zero line disappear. I want the zero on the right and the zero on the left to match as well as having uniform matching grid lines.

Something like the image below but using plotly:

Oh I see, then you’ll need to play around with yaxis.scaleratio. Here’s my attempt:

Although that attempt seems to be the best that either one of us could do, that attempt is still the equivalent of not having yaxis.scaleratio nor yaxis.scaleanchor.

It seems that when the scaleratio is in place the scaleanchor stops doing what it is suppose to do. Is this a bug of some sort?

This used to be an issue but it has been closed, does this mean that it won’t be implemented?

I’ve crafted a comprehensive solution. This was fairly rushed, so if there are any mistakes or confusions, please do let me know