Multiple Y-axes, name on top of each other

Dash Python
1

Hello, I am fairly new to Dash so bear with me.

I am plotting a graph with 3 yaxis, however the values and name of the 2 axis on the right are on top of each other, making it difficult to read. Here is the code:

dcc.Graph(id=‘grafico’,
figure={
‘data’: [
{‘x’:df[‘Data’].values, ‘y’:df[‘VA’].values, ‘type’:‘line’, ‘name’:‘Potencia’},
{‘x’:df[‘Data’].values, ‘y’:df[‘I’].values, ‘type’:‘line’, ‘name’:‘Corrente’, ‘yaxis’: ‘y2’},
{‘x’:df[‘Data’].values, ‘y’:df[‘V’].values, ‘type’:‘line’, ‘name’:‘Tensao’, ‘yaxis’: ‘y3’}
],
‘layout’: go.Layout(
title=‘Potencia, Corrente, Tensão’,
yaxis={‘title’: ‘Potencia’, ‘titlefont’ : {‘color’: ‘#1f77b4’}, ‘tickfont’ : {‘color’: ‘#1f77b4’}},
yaxis2={‘title’: ‘Corrente’, ‘overlaying’: ‘y’,‘side’: ‘right’,
‘titlefont’: {‘color’: ‘#ff7f0e’}, ‘tickfont’: {‘color’: ‘#ff7f0e’} },
yaxis3={‘title’: ‘Tensao’, ‘overlaying’: ‘y’,‘side’: ‘right’,
‘titlefont’: {‘color’: ‘#d62728’}, ‘tickfont’: {‘color’: ‘#d62728’}}
)
}
)

Result:

example1
example1.png1255×395 42.2 KB

I tried using the example of multiple axes on ploty: https://plot.ly/python/multiple-axes/ but it didn’t help much. Here is the result:

dcc.Graph(id=‘grafico’,
figure={
‘data’: [
{‘x’:df[‘Data’].values, ‘y’:df[‘VA’].values, ‘type’:‘line’, ‘name’:‘Potencia’},
{‘x’:df[‘Data’].values, ‘y’:df[‘I’].values, ‘type’:‘line’, ‘name’:‘Corrente’, ‘yaxis’: ‘y2’},
{‘x’:df[‘Data’].values, ‘y’:df[‘V’].values, ‘type’:‘line’, ‘name’:‘Tensao’, ‘yaxis’: ‘y3’}
],
‘layout’: go.Layout(
title=‘Potencia, Corrente, Tensão’,
yaxis={‘title’: ‘Potencia’, ‘titlefont’ : {‘color’: ‘#1f77b4’}, ‘tickfont’ : {‘color’: ‘#1f77b4’}},
yaxis2={‘title’: ‘Corrente’, ‘overlaying’: ‘y’,‘side’: ‘right’, ‘anchor’: ‘x’,
‘titlefont’: {‘color’: ‘#ff7f0e’}, ‘tickfont’: {‘color’: ‘#ff7f0e’} },
yaxis3={‘title’: ‘Tensao’, ‘overlaying’: ‘y’,‘side’: ‘right’, ‘anchor’: ‘free’, ‘position’: ‘0.85’,
‘titlefont’: {‘color’: ‘#d62728’}, ‘tickfont’: {‘color’: ‘#d62728’}}
)
}
)

Graph:

example2
example2.png1270×398 43.2 KB

Any ideas on what I am doing wrong and how to fix this?

Regards,

2

Same here,

I’d be very curious how to fix this. Tried the same things to work with the positioning. However the positioning appears to define itself with respect to the complete chart width. And values >1 oder negative don’t do anything good either.

BR,
Wonko.

3

Thanks for writing in! Is the issue that the third y axis is showing up in the chart area?

In the plotly documentation you posted, check out xaxis.domain. The xaxis area is limited, so there’s more external room to place y-axes without conflict.

4

Thanks for the reply! The issue is that the third y axis shows up on top of the second y axis (first picture) or the third y axis shows up in the chart area when I try to change the position between 0 and 1 (second picture).

I was unable to understand how changing the xaxis could help, could you please provide some example?

Just to give some context, the chart is coming from a query from a database, so the amount of data will depend on the user input…

Regards,

5

Hi,

thanks a lot @charleyferrari. You were right with the hint concerning xaxis.domain.
@Coret we need to limit the graph part so that the y-axis labels are not displayed within the graph.

I did it with ‘xaxis’:{‘domain’:[0, 0.9]}
So now my y-axis are no longer in the chart. ‘anchor’:‘free’,‘position’:‘0.95’
Since 0.95 > 0.9 no more interference.

Btw this really works best with fixed width graphs…

Check on the example with the domain limiting the x-axis in the coplete chart.

Hope this helps - sure did it for me.

Regards,
Wonko.

6

Hello,

Indeed that helped to fix the issue! I completely forgot to pay attention to that part of the xaxis! Thanks @Wonko and @charleyferrari

Regards