Multiple y axis overlay issue

plotly.js
1

Hi,

i am trying to create a plot which supports the functionality to add dynamically y axis after the plot is rendered. I managed to add multiple y axis dynamically using the Plotly.js API but i didn’t find a way to avoid the overlapping of the y axes. I configured this property layout-yaxis-position but the added y axis is rendered inside the plot. I created an example codepen example to demonstrate this issue.

Thank you for your time and i appreciate your response.

Alex

2

Here’s a solution: https://codepen.io/etpinard/pen/yoEpvj?editors=0010

I think the main problem is yaxis.postions doesn’t allow negative values, meaning you can’t place a new yaxis to the left of an existing one. That is, unless the first yaxis is placed to the right of default position. You can do that by setting the corresponding xaxis.domain to e.g. [0.15, 1]

1 Like
4

Thanks etienne for your response,

the solution you provide works fine. Correct me if i am wrong, to support arbitrary dynamic added y axes the programmer needs to calculate the xaxis.domain based on the number of y axes and apply it using https://plot.ly/javascript/plotlyjs-function-reference/#plotlyrelayout

Plotly.relayout(
  div,
  {
    "xaxis" : {
      "domain" : [calculatedRatio, 1]
    }
  }
);

Thank you for your time,

5

Hi,

based on this codepen example https://codepen.io/alexmon/pen/rzrxxJ?editors=1010
last added y axis and its corresponding trace is rendered on the plot. Is there any error on the code?

Thank you for your time,
Alex