# Multiple y axis overlay issue

**URL:** <https://community.plotly.com/t/multiple-y-axis-overlay-issue/5508>\
**Category:** plotly.js\
**Created:** [August 23, 2017, 9:56am UTC](https://community.plotly.com/t/multiple-y-axis-overlay-issue/5508 "2017-08-23T09:56:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![amonast](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@amonast](https://community.plotly.com/u/amonast)\
**Post date:** [August 23, 2017, 9:56am UTC](https://community.plotly.com/t/multiple-y-axis-overlay-issue/5508/1 "2017-08-23T09:56:27Z")

</div>

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](https://plot.ly/javascript/reference/#layout-yaxis-position) but the added y axis is rendered inside the plot. I created an example [codepen example](https://codepen.io/alexmon/pen/XaYNQj) to demonstrate this issue.

Thank you for your time and i appreciate your response.

Alex

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [August 23, 2017, 2:30pm UTC](https://community.plotly.com/t/multiple-y-axis-overlay-issue/5508/2 "2017-08-23T14:30:02Z")

</div>

Here’s a solution: [https://codepen.io/etpinard/pen/yoEpvj?editors=0010](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]`

---

<div class="post-metadata">

**Author:** ![amonast](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@amonast](https://community.plotly.com/u/amonast)\
**Post date:** [August 24, 2017, 10:55am UTC](https://community.plotly.com/t/multiple-y-axis-overlay-issue/5508/4 "2017-08-24T10:55:50Z")

</div>

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](https://plot.ly/javascript/plotlyjs-function-reference/#plotlyrelayout)

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

```

Thank you for your time,

---

<div class="post-metadata">

**Author:** ![amonast](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@amonast](https://community.plotly.com/u/amonast)\
**Post date:** [August 25, 2017, 10:20am UTC](https://community.plotly.com/t/multiple-y-axis-overlay-issue/5508/5 "2017-08-25T10:20:41Z")

</div>

Hi,

based on this codepen example [https://codepen.io/alexmon/pen/rzrxxJ?editors=1010](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