# Dash Checkboxes not rendering on or close to Plotly Layout

**URL:** <https://community.plotly.com/t/dash-checkboxes-not-rendering-on-or-close-to-plotly-layout/80046>\
**Category:** Dash Python\
**Created:** [November 11, 2023, 3:18am UTC](https://community.plotly.com/t/dash-checkboxes-not-rendering-on-or-close-to-plotly-layout/80046 "2023-11-11T03:18:57Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![damned\_viz](https://avatars.discourse-cdn.com/v4/letter/d/3bc359/32.png) [@damned\_viz](https://community.plotly.com/u/damned_viz)\
**Post date:** [November 11, 2023, 3:18am UTC](https://community.plotly.com/t/dash-checkboxes-not-rendering-on-or-close-to-plotly-layout/80046/1 "2023-11-11T03:18:58Z")

</div>

![Screenshot from 2023-11-10 19-11-14](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/5/d/5d7bb3222e6e5f37ac1ddfc69014b9295bb5c36a.png)

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

---

<div class="post-metadata">

**Author:** ![Berbere](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/berbere/32/25940_2.png) [@Berbere](https://community.plotly.com/u/Berbere)\
**Post date:** [November 11, 2023, 12:20pm UTC](https://community.plotly.com/t/dash-checkboxes-not-rendering-on-or-close-to-plotly-layout/80046/2 "2023-11-11T12:20:19Z")

</div>

Hey @damned_viz,

you could try something along the line of below:

```auto
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",)
])

```