Plot changes when added to a Dash app

Dash Python
1

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:

newplot
newplot1414×525 27.5 KB

and this is how it looks on my Dash App:

dashplot
dashplot1881×587 43.1 KB

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()

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 fig.update_yaxes(tick0=0, dtick=10) but this didn’t work either.

Please someone help me out here!

2

Hi @atharvakatre

I ran your code and it looks just like the Colab image.
What version of dash are you running?

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)
3

@AnnMarieW
Still getting the broken plot on the dash app.
Tried reinstalling dash
My dash version is 1.19.0

4

Also tried running the code on a new virtualenv but didn’t work.

5

Hi @atharvakatre

I run the code and have the same problem. :thinking: I’m using Windows.

dash                               1.19.0
dash-bootstrap-components          0.11.1
dash-core-components               1.15.0
dash-daq                           0.5.0
dash-extensions                    0.0.44
dash-html-components               1.1.2
dash-renderer                      1.9.0
dash-table                         4.11.2

image
image956×330 15.2 KB

6

@Eduardo @AnnMarieW
I found out the solution thanks to @alexcjohnson for addressing the issue on github.

Thanks for your help guys :slight_smile:

1 Like