Chris,
I just saw your response, but anticipated as much. So I put together an example, and it illustrates whatâs happening, Iâm sure my misunderstanding.
When I was a kid I moved to Montreal in 1986. So I made a toy example that has the goals, assists, points, and shot stats for the top 13 point leaders of the Habs that year. Mats Naslund led the team.
What is happening is the difference in syntax between
- html.Div([ put something here], add style here ) and
- html.Div(put something here, add style here)
I assumed that â[â was just a shorthand to denote child elements of the parent div. Below you can see, that the second plot honors my plot setting in âvhâ, and âvwâ, but the top plot does not. When I use syntax 1, the âsvg-containerâ defaults to a height of 450 px, and my style settings for the plot arenât honored.
The reason I want to use syntax 2, is that I want to add an individual style to dropdowns, but currently I get an error when I try.
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
stats= {
'Goals': [43,32,19,32,20,15,20,19,19,21,19,8,14],
'Assists': [67, 55, 63, 39, 36, 34, 23, 21, 20, 16, 15, 26, 17],
'Points' : [110, 86, 82, 71, 56, 49, 43, 40, 39, 37, 34, 34, 31],
'Shots' : [223, 202, 167, 172, 147, 115, 135, 103, 119, 112, 120, 101, 102]
}
df = pd.DataFrame(stats)
#button options
options = [{'label': str(i), 'value':str(i)} for i in ['Goals','Assists','Points','Shots']]
#grid layout
container= {
'display':'grid',
'grid-template-columns':'repeat(2, 1fr)',
'grid-template-rows':'repeat(2, minmax(100px, auto))',
'grid-padding': '1em',
}
#placeholder layout
placeholder = {
'background': "#eee",
'border-style':'solid',
'border-size':'0.5em',
'border-color':'#ddd'
}
app = dash.Dash('')
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
app.layout = html.Div([
# grid 1,1
html.Div([
html.Div(
dcc.Dropdown(
id='category',
options= options,
value= 'Goals'
),
),
html.Div([
dcc.Graph(
id = 'histogram' )
], style={'height':'60vh', 'width':'55vw'})
]),
# grid 1,2
html.Div('placeholder', style=placeholder)
,
#grid 2,1
html.Div([
html.Div([
#feature dropdown
dcc.Dropdown(
id='xvalue',
options=options,
value ='goals'
),
dcc.Dropdown(
id='yvalue',
options=options,
value='goals'
),
]),
html.Div(
dcc.Graph( id ='scatter' , style={'height':'60vh', 'width':'55vw'})
)
]),
#grid 2,2
html.Div(
'placeholder', style=placeholder )
], style=container )
#histogram callback
@app.callback(
dash.dependencies.Output('histogram', 'figure'),
[dash.dependencies.Input('category', 'value')]
)
def update_histogram(value):
return {
'data':[
go.Histogram(
x=df[value]
)],
'layout':go.Layout()
}
@app.callback(
dash.dependencies.Output('scatter', 'figure'),
[dash.dependencies.Input('xvalue', 'value'),
dash.dependencies.Input('yvalue', 'value')]
)
def update_scatter(xvalue,yvalue):
return {
'data': [
go.Scatter(
x=df[xvalue],
y=df[yvalue],
mode='markers'
)
] ,
'layout' : go.Layout( )
}
