Displaying 2 dual-axis graphs in a single layout

📊 Plotly Python
1

I am trying to display two stacked graphs on a single layout, where each graph is displaying two traces. The second trace on each graph uses a different scale and has a custom y-axis displayed on the right of the graph.

Here is the code I am using.

import plotly.plotly as py
import plotly.graph_objs as go
import plotly.offline as po

from random import randint

xvalues = range(0,100)
y1values = [570, 561, 547, 558, 549, 565, 569, 560, 545, 546, 570, 574, 551, 575, 559, 
	547, 566, 559, 564, 559, 568, 571, 550, 547, 546, 573, 573, 549, 559, 572, 555, 568, 
	570, 575, 562, 575, 567, 570, 553, 556, 551, 567, 574, 554, 562, 555, 565, 557, 546, 
	546, 565, 558, 551, 556, 554, 562, 573, 556, 546, 548, 569, 552, 559, 554, 568, 556, 
	547, 566, 565, 570, 574, 557, 551, 553, 569, 552, 561, 564, 559, 559, 571, 574, 554, 
	557, 559, 545, 555, 567, 557, 565, 562, 559, 575, 573, 558, 549, 559, 555, 552, 546]
y2values = [4, 6, 6, 8, 6, 7, 5, 8, 7, 3, 4, 4, 8, 6, 5, 7, 4, 8, 6, 5, 4, 9, 7, 5, 3, 
	6, 8, 5, 4, 3, 7, 5, 5, 6, 6, 5, 8, 9, 7, 3, 6, 3, 8, 9, 5, 6, 9, 4, 6, 5, 8, 7, 4, 3, 
	6, 6, 9, 4, 3, 8, 9, 5, 6, 8, 5, 7, 3, 7, 9, 4, 3, 4, 7, 4, 6, 3, 3, 8, 9, 5, 5, 3, 8, 
	4, 4, 7, 5, 8, 4, 7, 4, 8, 8, 6, 6, 3, 7, 6, 8, 6]

trace1 = go.Scatter(
	x=xvalues, y=y1values, mode='lines', line=dict(width=2, color='#b04553'), name='t1')
trace2 = go.Scatter(
	x=xvalues, y=y2values, yaxis='y2', mode='lines', line=dict(width=2, color='#2de35f'), name='t2')

trace3 = go.Scatter(
	x=xvalues, y=y1values, mode='lines', xaxis='x2', yaxis='y3', line=dict(width=2, color='#b04553'), name='t3')
trace4 = go.Scatter(
	x=xvalues, y=y2values, xaxis='x2', yaxis='y4', mode='lines', line=dict(width=2, color='#2de35f'), name='t4')

axis=dict(
    showline=True,
    zeroline=False,
    showgrid=True,
    mirror=True,
    ticklen=4, 
    gridcolor='#ffffff',
    tickfont=dict(size=10)
)

layout = dict(
    width=950,
    height=800,
    autosize=False,
    title='2 Dual Axis Graphs',
    margin = dict(t=100),
    showlegend=False,          

    xaxis1=dict(axis, **dict(domain=[0, 1], showticklabels=False)), 
    yaxis1=dict(axis, **dict(domain=[0, 0.33], anchor='x1', hoverformat='.2f',
    	range=[100,600])),  
    yaxis2=dict(axis, **dict(domain=[0, 0.33], anchor='x1', hoverformat='.2f', 
    	range=[0,10],overlaying='y',side='right')),  
 
    xaxis2=dict(axis, **dict(domain=[0, 1], showticklabels=False)), 
    yaxis3=dict(axis, **dict(domain=[0.4, 0.73], anchor='x2', hoverformat='.2f',
    	range=[100,600])),  
    yaxis4=dict(axis, **dict(domain=[0.4, 0.73], anchor='x2', hoverformat='.2f', 
    	range=[0,10],overlaying='y',side='right')),  
 
    plot_bgcolor='rgba(228, 222, 249, 0.65)'
)

fig = dict(data=[trace4], layout=layout)
po.plot(fig, filename='2x2graph.html')

If I display each trace individually everything works as expected. I can even display traces 1 and 2, or traces 3 and 4 and the corresponding graphs will appear at the desired position in the layout.

However, when I try and display all 4 traces at once, things go amis. It seems to me that trace 4 is being drawn on top of trace 1 instead of on top of trace 2, although it’s hard to say for sure.

I’m only getting started with Plotly so this may be a newbie error. I would be grateful for any help the community can offer.

Thanks!

Damian