Line up grid lines on multi-axis plot

plotly.js
1

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.

Codepen

Thanks,

Marcus

2

Maybe the new axis scaleanchor and scaleratio are what you’re looking - see them in action here: http://rickyreusser.com/plotly-mock-viewer/#axes_scaleanchor

3

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.

Marcus

1 Like
4

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

5

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

6

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

7

Here is a link to my attempt: https://codepen.io/SergioC/pen/awQLzm

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?

8

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

9

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:

10

Oh I see, then you’ll need to play around with yaxis.scaleratio. Here’s my attempt: https://codepen.io/etpinard/pen/WOYdVL?editors=0010

11

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?

12

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

https://github.com/plotly/plotly.js/issues/524

13

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

1 Like
15

I’ve been receiving help from fellow developer, Filipe Santiago @filipesantiagoAM, and together we’ve managed to put together an MVP solution as an open-source PR to be integrated with Plotly.js! This still needs some tests and approvals before being merged, but sharing the PR here for public visibility!

16

Thanks so much for your work on this and getting the PR merged :slight_smile:

I tried out the example chart above, changed to apply tickmode: sync with latest plotly (2.18.0):

I found that the y2 axis ticks, while lined up, shows not very “clean” numbers on the ticks e.g. 169.4, 145.2 etc

Is there a way to get plotly to automatically use a sensible ratio between the two axes so that round numbers appear on yaxis2?

Thanks again