Dash Checkboxes not rendering on or close to Plotly Layout

Dash Python
1

Screenshot from 2023-11-10 19-11-14
Screenshot from 2023-11-10 19-11-141037×486 57.9 KB

I want the checkbox to be in the layout close to the graph, and if that’s not possible, much closer to the graph with whitespace above and below the checkboxes. i’ve tried all sorts of padding, margins, width adjustment, xanchor, yanchor adjustment, etc.

Relevant (I think) functions from my code are below.

def setup_app():
app = Dash(name)

app.layout = html.Div([
    dcc.Graph(id='time-series-chart', style={'display': 'inline-block', 'width': '70%'}),
    html.Div([
        dcc.Checklist(
            id='variable-checklist',
            options=[{'label': label_mapping[key], 'value': key} for key in label_mapping],
            value=list(label_mapping.keys()),
            labelStyle={'display': 'block'}
        )
    ], style={'display': 'inline-block', 'width': '30%', 'verticalAlign': 'top'})
], style={'display': 'flex'})

return app

def update_graph(app, yearly_data_ma):
@app.callback(
Output(‘time-series-chart’, ‘figure’),
[Input(‘variable-checklist’, ‘value’)]
)
def update_output(selected_variables):
# Create figure
fig = make_subplots(specs=[[{“secondary_y”: True}]])
# Add traces for selected variables
for var in selected_variables:
fig.add_trace(
go.Scatter(
x=yearly_data_ma.index,
y=yearly_data_ma[var],
mode=‘lines’,
name=label_mapping[var],
line=dict(color=color_map[label_mapping[var]]),
visible=True
),
secondary_y=False,
)
# Update layout
fig.update_layout(
title=‘Yearly Normalized Trend of Hazardous Materials Incidents with Spillage’,
showlegend=True,
legend=dict(
x=0.5,
y=1,
xanchor=‘center’,
yanchor=‘bottom’,
orientation=‘h’
),
font=dict(family=‘Arial’),
margin=dict(l=75, r=75, t=75, b=75)
)
fig.update_xaxes(title=‘Year’)
fig.update_yaxes(title=‘Normalized Count of Incidents’, secondary_y=False)
return fig

2

Hey @damned_viz,

you could try something along the line of below:

import dash_bootstrap_components as dbc


app.layout = dbc.Container([
    
    dbc.Row(
        [
            dbc.Col(dcc.Graph(id='time-series-chart'), span = 9),
            dbc.Col(dcc.Checklist(
                        id='variable-checklist',
                        options=[{'label': label_mapping[key], 'value': key} for key in label_mapping],
                        value=list(label_mapping.keys()),
                        labelStyle={'display': 'block'}
                        ), span = 3),

        ],
            align = "center",)
])