Plot changes when added to a Dash app

[AtharvaKatre]

result of pip list

dash                      1.19.0
dash-bootstrap-components 0.11.3
dash-core-components      1.15.0
dash-html-components      1.1.2
dash-renderer             1.9.0
dash-table                4.11.2

- OS: Windows
- Browser: Chorme

Describe the bug

My plot is changing when I add it to my Dash app, I think it’s due to the yaxis ticks, their range is changing automatically.

My plot when executed in Colab Notebook:

and this is how it looks on my Dash App:

plot code:

planets_distance = pd.read_html('https://en.wikipedia.org/wiki/Titius%E2%80%93Bode_law')[0].drop('m',axis=1)
planets_distance.drop(planets_distance.tail(4).index,inplace=True)
planets_distance['Planet'] = planets_distance['Planet'].apply(lambda x: '('+x.split('2')[0]+')' if x[-1]=='2' else x)
planets_distance['k'].iloc[8]=(int(planets_distance['k'].iloc[7])+int(planets_distance['k'].iloc[9]))/2  #filling missing data
planets_distance['T–B rule distance (AU)'].iloc[8]=(float(planets_distance['T–B rule distance (AU)'].iloc[7])+float(planets_distance['T–B rule distance (AU)'].iloc[9]))/2 #filling missing data

fig = go.Figure()
fig.add_trace(go.Scatter(x=planets_distance['Planet'],y=planets_distance['T–B rule distance (AU)'],name="T-B Rule Prediction",mode="lines",hoverinfo='skip',line_width=2,line_color='orange'))
fig.add_trace(go.Scatter(x=planets_distance['Planet'],y=planets_distance['Semimajor axis (AU)'],name='Planet',hoverinfo='y', text=planets_distance['Planet'], mode='markers+text', marker_color='yellow'))
fig.update_traces(textposition='top center')
fig.update_layout(xaxis=dict(showgrid=False))
fig.update_layout(yaxis=dict(showgrid=False))
fig.update_traces(marker=dict(size=16,
                              symbol='octagon-dot',
                              line=dict(width=1,color='black')
                              ),
                  selector=dict(mode='markers+text'))
fig.update_layout(yaxis_title='Mean Distance from Sun (AU - Astronomical Distance)', xaxis_title="<br>Data Source : <a href='https://en.wikipedia.org/wiki/Titius–Bode_law'>Wikipedia</a>", title='Eight planets, Ceres, Pluto, and Eris versus<br>the predicted distances by Titius–Bode law.', title_x=0.5, template='plotly_dark',showlegend=True)
fig.update_layout(margin=dict(t=50, b=0, l=20, r=20))
fig.show()

Dash file code

import dash
import dash_core_components as dcc
import plotly.graph_objects as go
import pandas as pd

app = dash.Dash(__name__)

planets_distance = pd.read_html('https://en.wikipedia.org/wiki/Titius%E2%80%93Bode_law')[0].drop('m',axis=1)
planets_distance.drop(planets_distance.tail(4).index,inplace=True)
planets_distance['Planet'] = planets_distance['Planet'].apply(lambda x: '('+x.split('2')[0]+')' if x[-1]=='2' else x)
planets_distance['k'].iloc[8]=(int(planets_distance['k'].iloc[7])+int(planets_distance['k'].iloc[9]))/2  #filling missing data
planets_distance['T–B rule distance (AU)'].iloc[8]=(float(planets_distance['T–B rule distance (AU)'].iloc[7])+float(planets_distance['T–B rule distance (AU)'].iloc[9]))/2 #filling missing data

fig = go.Figure()
fig.add_trace(go.Scatter(x=planets_distance['Planet'],y=planets_distance['T–B rule distance (AU)'],name="T-B Rule Prediction",mode="lines",hoverinfo='skip',line_width=2,line_color='orange'))
fig.add_trace(go.Scatter(x=planets_distance['Planet'],y=planets_distance['Semimajor axis (AU)'],name='Planet',hoverinfo='y', text=planets_distance['Planet'], mode='markers+text', marker_color='yellow'))
fig.update_traces(textposition='top center')
fig.update_layout(xaxis=dict(showgrid=False))
fig.update_layout(yaxis=dict(showgrid=False))
fig.update_traces(marker=dict(size=16,
                              symbol='octagon-dot',
                              line=dict(width=1,color='black')
                              ),
                  selector=dict(mode='markers+text'))
fig.update_layout(yaxis_title='Mean Distance from Sun (AU - Astronomical Distance)', xaxis_title="<br>Data Source : <a href='https://en.wikipedia.org/wiki/Titius–Bode_law'>Wikipedia</a>", title='Eight planets, Ceres, Pluto, and Eris versus<br>the predicted distances by Titius–Bode law.', title_x=0.5, template='plotly_dark',showlegend=True)
fig.update_layout(margin=dict(t=50, b=0, l=20, r=20))

app.layout = dcc.Graph(figure=fig)

if __name__ == "__main__":
    app.run_server(debug=True)

There is no change in the code in the dash plot.

I noticed the changing yaxis range in the dash plot so I tried setting the yaxis ticks manually with fig.update_yaxes(tick0=0, dtick=10) and fig.update_yaxes(tickvals=[0,10,20,30,40,50,60,70,80]), also tried running the whole code in a new virtualenv but none of these work either.

Please someone help me out here!

[alexcjohnson]

I'm guessing in colab you have an older version of plotly.py, prior to plotly/plotly.py#2951
You can either explicitly convert the distance values to numbers instead of strings, or you can force a numeric y axis (instead of categorical) like:
fig.update_yaxes(type='linear')

[AtharvaKatre]

Yeah thanks a lot I didn't realize the distance values were in string. Still not sure why the older version of plotly in colab can handle it whereas the newer version messes up

[alexcjohnson]

In the PR I linked above we changed the default behavior of plotly.py to not treat numeric strings as numbers, because this causes all sorts of other confusing issues. But you can get exactly the old behavior if you prefer by setting fig.update_layout(autotypenumbers='convert types').