Hi I’m really new to Plotly/Dash so sorry if this is a really dumb question but I couldn’t find an answer to my problem after searching for a while. Basically, every time I load my app (locally), the Dropdowns overlap with my Graph even though I’ve wrapped them in Divs and styled them with 'display': 'block'. Each Dropdown is coded like this:
html.Div([
html.P('y-axis metric'),
dcc.Dropdown(
id='yaxis-column',
options=[{'label': i, 'value': i} for i in metrics],
value='Total Points',
clearable=False,
searchable=False,
persistence_type='session',
persistence=True,
style={'background-color': '#52575C',
'display': 'block',
'margin': 'auto'}
)
],
style={'display': 'block',
'marginLeft': 'auto',
'marginRight': 'auto',
'width': '25%'})
all of my code is below:
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
import numpy as np
app = dash.Dash(__name__,
external_stylesheets=[dbc.themes.SLATE],
meta_tags=[
{
'name': 'description',
'content': '''
A Fantasy Premier League (FPL) dashboard
which allows users to plot several key
performance metrics against each other
which allows users to obtain key
insights on the statistical indicators of top
players in the Premier League (EPL).
'''
},
{
'name': 'viewport',
'content': 'width=device-width, initial-scale=1.0'
},
{
'http-equiv': 'X-UA-Compatible',
'content': 'IE=edge'
},
]
)
df = pd.read_csv(https://raw.githubusercontent.com/kyleschan/fpl_data/main/combined_df.csv)
metrics = sorted(df.loc[:, 'Minutes':].columns)
teams = sorted(df['Team'].unique())
positions = [(1, 'GKP'),
(2, 'DEF'),
(3, 'MID'),
(4, 'FWD')]
app.layout = html.Div([
html.H1('2-D Player Comparison',
style={'text-align': 'center'}),
html.Br(),
html.Div([
dcc.Markdown("""
**Purpose**
A Fantasy Premier League (FPL) dashboard
which allows users to plot several key
performance metrics against each other
which allows users to obtain key
insights on the statistical indicators of top
players in the Premier League (EPL).
"""),
],
style={'display': 'block',
'marginLeft': 'auto',
'marginRight': 'auto',
'width': '25%'
}),
html.Br(),
dcc.Graph(id='metric-graph',
responsive=True,
config={
'scrollZoom': True,
'modeBarButtonsToRemove': [
'select2d',
'lasso2d',
'zoomIn2d',
'zoomOut2d',
'hoverClosestCartesian',
'hoverCompareCartesian'
],
'displaylogo': False,
'watermark': False,
},
style={'background-color': '#52575C',
'display': 'block',
'margin': 'auto'}),
html.Br(),
html.Div([
html.H2('Metrics',
style={'text-align': 'center'}),
html.Div([
html.P('x-axis metric'),
dcc.Dropdown(
id='xaxis-column',
options=[{'label': i, 'value': i} for i in metrics],
value='ICT Index',
clearable=False,
searchable=False,
persistence_type='session',
persistence=True,
style={'background-color': '#52575C',
'display': 'block',
'margin': 'auto'}
)
],
style={'display': 'block',
'marginLeft': 'auto',
'marginRight': 'auto',
'width': '25%'}),
html.Br(),
html.Div([
html.P('y-axis metric'),
dcc.Dropdown(
id='yaxis-column',
options=[{'label': i, 'value': i} for i in metrics],
value='Total Points',
clearable=False,
searchable=False,
persistence_type='session',
persistence=True,
style={'background-color': '#52575C',
'display': 'block',
'margin': 'auto'}
)
],
style={'display': 'block',
'marginLeft': 'auto',
'marginRight': 'auto',
'width': '25%'}),
html.Br(),
html.Br(),
html.H2('Filters',
style={'text-align': 'center'}),
html.Div([
html.P('Team Filter'),
dcc.Dropdown(
id='team-filter',
options=[{'label': i, 'value': i} for i in teams],
clearable=True,
searchable=False,
multi=True,
persistence_type='session',
persistence=True,
style={'background-color': '#52575C',
'display': 'block',
'margin': 'auto'}
)
],
style={'display': 'block',
'marginLeft': 'auto',
'marginRight': 'auto',
'width': '25%'}),
html.Br(),
html.Div([
html.P('Position Filter'),
dcc.Dropdown(
id='position-filter',
options=[{'label': v, 'value': k} for k, v in positions],
clearable=True,
searchable=False,
multi=True,
persistence_type='session',
persistence=True,
style={'background-color': '#52575C'}
)
],
style={'display': 'block',
'marginLeft': 'auto',
'marginRight': 'auto',
'width': '25%'}),
],
id='dropdown',
style={'display': 'block',
'float': 'center',}
),
],
)
@app.callback(
Output('metric-graph', 'figure'),
[Input('xaxis-column', 'value'),
Input('yaxis-column', 'value'),
Input('team-filter', 'value'),
Input('position-filter', 'value')])
def update_graph(xaxis,
yaxis,
team_filter,
pos_filter):
if team_filter:
filtered_df = df[df['Team'].isin(team_filter)]
else:
filtered_df = df
if pos_filter:
filtered_df = filtered_df[filtered_df['Position'].isin(pos_filter)]
fig = px.scatter(filtered_df,
x=xaxis,
y=yaxis,
hover_name='web_name',
hover_data={
'web_name': False
},
text='web_name',
color='Team',
size=np.maximum(filtered_df['Total Points'], 0),
render_mode='gl',
labels=dict(x=str(xaxis),
y=str(yaxis),
color='Team',
size='Total Points')
)
fig.update_traces(textposition='top right', showlegend=False)
fig.update_xaxes(title=xaxis,
title_font_size=20,
showgrid=False,
zeroline=False)
fig.update_yaxes(title=yaxis,
title_font_size=20,
showgrid=False,
zeroline=False)
fig.update_layout(title={'text': f'{xaxis} vs. {yaxis}',
'font': {'size': 32},
'x': 0.5
},
autosize=True,
hovermode='closest',
plot_bgcolor='#1F242D',
paper_bgcolor='#272B30',
font_color='#A3791C')
return fig
if __name__ == '__main__':
app.run_server(debug=True)
Based on my code, I thought the Divs should all be in their own blocks, but that is not the case for my app. I’ve also attached screenshots below. What’s also weird is that after changing an option in the Dropdown, they move below the Graph (which is where I want them to be). The Dropdowns also happen to move to their proper positions after inspecting them which has made debugging annoying. I appreciate any help I can get on this problem!
On start-up:
After changing a value in a Dropdown:
