How do I chart two axes on the same side?

plotly.js
1

I tried following this as a reference: https://codepen.io/plotly/pen/OVqZEO

I know I can change the axis placement based on position between 0 and 1. But positions 0 and 1 are in same position as my default x and y axes so I can’t move the new axis further out but moving them further in would cause the new axis to collide with the chart. So I could use some advice if anyone has a similar issue.

Here is a picture of what the double left y axes look like

two_axes_sameside
two_axes_sameside.JPG1168×329 34.9 KB 

    {
       "title":{
          "text":"Default Chart Title"
       },
       "xaxis":{
          "title":{
             "text":"Date"
          },
          "type":"date",
          "range":[
             "2018-05-03",
             "2019-05-03"
          ],
          "autorange":true
       },
       "yaxis":{
          "title":{
             "text":"Price"
          },
          "type":"linear",
          "range":[
             118.86888888888889,
             222.6911111111111
          ],
          "autorange":true
       },
       "yaxis2":{
          "title":{
             "text":"Price"
          },
          "anchor":"free",
          "overlaying":"y",
          "side":"left",
          "position":0,
          "type":"linear",
          "range":[
             25.321666666666665,
             47.88833333333333
          ],
          "autorange":true
       }
    }

my traces
trace 1

{
    "name": "Stock1",
    "type": "lines",
    "x": [array of data],
    "y": [array of data]
}

trace 2

{
    "name": "Stock2",
    "type": "lines",
    "x": [array of data],
    "y": [array of data],
    "yaxis": "y2"
}
2

The div is in a standard bootstrap layout like so:

<div class="row">
    <div class="col">
        <div id="chart-container">
        </div>
    </div>
</div>

Would it help to limit the width of the chart container?

3

Never mind, I figured it out.

1 Like
4

Sorry. Here is how I solved this issue. In order to correctly position two Y axes on the same side you need to shorten the X Axis enough to make room for the two Y Axes. So all other code being the same, you just add this property to the x axis to make wiggle room for your extra Y axis

layout.xaxis = {
    domain: [0.1, 0.9]
}
1 Like