# Checklist not displaying graph

**URL:** <https://community.plotly.com/t/checklist-not-displaying-graph/73888>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [March 26, 2023, 10:51am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888 "2023-03-26T10:51:56Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![arafeek](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@arafeek](https://community.plotly.com/u/arafeek)\
**Post date:** [March 26, 2023, 10:51am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/1 "2023-03-26T10:51:56Z")

</div>

Hi,  
I have an app that displays graphs, I added checkbox so that the user can select what to display, here is the code:

> app.layout = html.Div(children=[  
> html.H1(children=‘Network Traffic Monitor’, style={‘text-align’: ‘center’}),  
> html.Div([  
> html.Label([‘Select a Graph to Display:’],style={‘font-weight’: ‘bold’}),  
> dcc.Checklist(  
> id=‘list’,  
> options=[  
> {‘label’: ‘Top 10 inboud traffic IP addresses’, ‘value’: ‘fig1’},  
> # {‘label’: ‘Top 10 outboud traffic IP addresses’, ‘value’: ‘fig2’},  
> # {‘label’: ‘Top Active Ports’, ‘value’: ‘fig3’},  
> # {‘label’: ‘Top Active IP-Ports’, ‘value’: ‘fig4’},  
> ],  
> value=[‘fig1’],  
> style={“width”: “50%”},  
> inline=True  
> ),  
> html.Div(dcc.Graph(id=‘graph’)),  
> ]),  
> ])
> 
> @app.callback(  
> Output(‘graph’, ‘figure’),  
> [Input(component\_id=‘list’, component\_property=‘value’)])

However, it is showing a blank graph like the below:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/a/6/a6324d4f2c5a3815fdd22dab64e92f18a4810716.png)

A similar code I am using for a dropdown and works fine (thanks to @hoatran ), in general I thought all I need is to change the feature from dropdown to checkbox, but apparently is it not

Any help is highly appreciated

---

<div class="post-metadata">

**Author:** ![hoatran](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/hoatran/32/21447_2.png) [@hoatran](https://community.plotly.com/u/hoatran)\
**Post date:** [March 26, 2023, 11:58am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/2 "2023-03-26T11:58:14Z")

</div>

How did you code your callback? Can you show us?

---

<div class="post-metadata">

**Author:** ![arafeek](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@arafeek](https://community.plotly.com/u/arafeek)\
**Post date:** [March 26, 2023, 12:22pm UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/3 "2023-03-26T12:22:44Z")

</div>

Do you mean this part?

> @app.callback(  
> Output(‘graph’, ‘figure’),  
> [Input(component\_id=‘list’, component\_property=‘value’)])  
> def select\_graph(value):  
> if value == ‘fig1’:  
> fig1 = go.Figure(data = px.bar(df[‘Source’],  
> x=inbound\_ip\_count.index, y= inbound\_ip\_count.values,  
> labels={  
> ‘x’: ‘IP Addresses’,  
> ‘y’: ‘Packets’,  
> },  
> title=‘Top 10 inbound traffic IP addresses’)  
> )  
> return fig1

But again, my question is that is there a difference between the checklist and dropbox?

---

<div class="post-metadata">

**Author:** ![hoatran](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/hoatran/32/21447_2.png) [@hoatran](https://community.plotly.com/u/hoatran)\
**Post date:** [March 26, 2023, 12:34pm UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/4 "2023-03-26T12:34:06Z")

</div>

In this case if you want to show each figure based on selected value, I think you should use Radioitems instead of Checklist. And basically Radioitems and Dropdown is same.

---

<div class="post-metadata">

**Author:** ![arafeek](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@arafeek](https://community.plotly.com/u/arafeek)\
**Post date:** [March 26, 2023, 12:35pm UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/5 "2023-03-26T12:35:06Z")

</div>

Thanks but actually I want the checkbox, as user might select more than one to display

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [March 26, 2023, 3:24pm UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/6 "2023-03-26T15:24:49Z")

</div>

Hi @arafeek  
checkbox allows the user to select more than one option, then the value returned to the callback is a list, not a single value, you can’t ask

```auto
if value == ‘fig1’:

```

and expect a true answer. 🥴  
In a dropdown works because the input is a single value.  
That’s why @hoatran suggest a checklist.

---

<div class="post-metadata">

**Author:** ![hoatran](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/hoatran/32/21447_2.png) [@hoatran](https://community.plotly.com/u/hoatran)\
**Post date:** [March 27, 2023, 3:07am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/7 "2023-03-27T03:07:06Z")

</div>

Can you post your sample data and code of yours? If not I think you could think about using subplots. Something as below:

```auto
import dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import pandas as pd
import plotly.express as px
from dash.exceptions import PreventUpdate

df = px.data.gapminder().query("continent=='Oceania'")
df = df[df['country'] == 'Australia']
df2 = df.melt(id_vars=['country','year'], value_vars=['lifeExp','gdpPercap','pop'])

app = dash.Dash( __name__ , title='Dashboard', external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
    html.Div(id='graph'),
    dcc.Checklist(id='checklist', 
                  options=['lifeExp','gdpPercap','pop'],
                  value=['lifeExp'])
])

@app.callback(Output('graph','children'), 
              Input('checklist','value'))

def update_graph(checklist):
    if len(checklist) == 1:
        dff = df2[df2['variable'].isin(checklist)]
        fig = px.line(dff,x='year',y='value',color='variable')     
        return dcc.Graph(figure=fig)
    elif len(checklist) >= 2:
        dff = df2[df2['variable'].isin(checklist)]
        fig = px.line(dff,x='year',y='value',facet_col="variable")
        return dcc.Graph(figure=fig)
    else:
        raise PreventUpdate

if __name__ == " __main__":
    app.run_server(debug=False)

```

 ![Screenshot 2023-03-27 100619](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/9/5/9590ecd3afaa99248865aad60846e497421a2ffd.png)  
 ![Screenshot 2023-03-27 100631](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/3/4/345712daa14b3a5028aca0e3fe09a972f95b8e42.png)  
 ![Screenshot 2023-03-27 100643](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/a/9/a9d05964911313e78bdc0b8419d938d883815270.png)

---

<div class="post-metadata">

**Author:** ![arafeek](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@arafeek](https://community.plotly.com/u/arafeek)\
**Post date:** [March 27, 2023, 11:49am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/8 "2023-03-27T11:49:51Z")

</div>

Hi @hoatran , thanks again, in fact there is a change of plan, I will go with the dropdown as it takes less space, however I have another issue with it, but I am not sure if I should start a new topic or we can continue here, anyways, I will post the situation here, but please let me know if you want me to open a new case:  
The following code suppose to calculate two graphs (data included), then based on the selection of the drop down, it shows whatever graph select, it works ok, until…  
The issue is when I enable the multi select, the initial graph upon loading is ok, but once i select another graph, everything dissappears and even if I cancel all and return to the first graph only, it does not show anymore, any idea why?  
Also, when I select more than one graph, can I show 2 per row? because (I think) what will happen is that it will show one per row.

here is the code, and thanks

```auto
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
import dash
import dash_bootstrap_components as dbc
from dash import Input, Output, dcc, html
import time, os, glob, sys
import multiprocessing as mp

app = dash.Dash( __name__ , title='Network Monitoring Dashboard', external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([
    dcc.Interval(
            id='interval-component',
            interval=5*3000, # in milliseconds
            n_intervals=0
        ),
    dbc.Col([
        html.Div([
        html.Label(['Choose a graph:'],style={'font-weight': 'bold'}),
        dcc.Dropdown(
            id='dropdown',
            options=[
                {'label': 'Top 10 incoming traffic IP addresses', 'value': 'fig1'},
                {'label': 'Top 10 outgoing traffic IP addresses', 'value': 'fig2'},
                {'label': 'Top Active Ports', 'value': 'fig3'},
                {'label': 'Top Active IP-Ports', 'value': 'fig4'},
                    ],
            multi=True,
            value='fig1',
            style={"width": "60%"}, clearable=False),
        ]),
    html.Div(id='graph-container'),
])
])

@app.callback(Output('graph-container', 'children'),
              [Input('dropdown', 'value'),
              Input('interval-component','n_intervals')])
def update_graph(value, n):
    data = [['192.168.0.105','192.168.0.103','TCP'],
                ['192.168.0.103','192.168.0.105','TCP'],
                ['192.168.0.105','192.168.0.103','UDP'],
                ['52.98.151.66','192.168.0.105','TCP'],
                ['192.168.0.105','52.98.151.66','ICMP'],
                ['52.98.228.226','192.168.0.105','ICMP'],
                ['52.98.228.226','192.168.0.105','UDP'],
                ['192.168.0.103','224.0.0.251','1UDP'],
                ['192.168.0.105','52.98.228.226','TCP']]
    column_names = ['Source', 'Destination','Protocol']
    for i in range(6):
        df = pd.DataFrame (data)
        df.columns = column_names

    inbound_ip_count = df.groupby('Source').size().nlargest(n=10)
    outbound_ip_count = df.groupby('Destination').size().nlargest(n=10)
    port_count = df.groupby('Protocol').size().nlargest(n=10)
    sources_grp = df.groupby(['Source', 'Protocol'], as_index=False)['Destination']\
        .count().sort_values('Destination', ascending=False)
    
    # Get the top 5 occurrences of Source
    top_sources = df['Source'].value_counts()[:5].index.tolist()
    
    # Filter the dataframe to only include the top 5 occurrences of Source
    top_sources_df = sources_grp[sources_grp['Source'].isin(top_sources)]\
        .reset_index(drop=True)
    
    # Rename the count column to 'Protocol Count'
    top_sources_df = top_sources_df.rename(columns={'Destination': 'Protocol Count'})

    if value == 'fig1':
        fig1 = go.Figure(data = px.bar(df['Source'],
                        x=inbound_ip_count.index, y= inbound_ip_count.values,
                        labels={
                          'x': 'IP Addresses',
                          'y': 'Packets',
                      },
                            title='Top 10 incoming traffic IP addresses')
                      )
        return dcc.Graph(id='live-graph2', figure = fig1)
    # Ploting top 10 Outbound traffic IP addresses
    elif value == 'fig2':
        fig2 = go.Figure(data = px.bar(df['Destination'],
                        x=outbound_ip_count.index, y=outbound_ip_count.values,
                        labels={
                          'x': 'IP Addresses',
                          'y': 'Packets',
                      },
                        title='Top 10 Outbound traffic IP addresses')
                     )
        return dcc.Graph(id='live-graph2', figure = fig2)

def server_run():
    app.run_server(debug=False, use_reloader=False)
if __name__ == " __main__":
    if not os.path.exists(r'c:/DataCapture'):
        os.mkdir(r'c:\DataCapture')
# p1 = mp.Process(target=capturing_loop)
    p2 = mp.Process(target=server_run)
# p1.start()
    p2.start()

```

---

<div class="post-metadata">

**Author:** ![hoatran](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/hoatran/32/21447_2.png) [@hoatran](https://community.plotly.com/u/hoatran)\
**Post date:** [March 28, 2023, 1:49am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/9 "2023-03-28T01:49:39Z")

</div>

I think you should add one more condition when you choose both of them. Something as below:

```auto
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
import dash
import dash_bootstrap_components as dbc
from dash import Input, Output, dcc, html
import time, os, glob, sys
import multiprocessing as mp
from dash.exceptions import PreventUpdate

app = dash.Dash( __name__ , title='Network Monitoring Dashboard', external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([
    dcc.Interval(
            id='interval-component',
            interval=5*3000, # in milliseconds
            n_intervals=0
        ),
    dbc.Col([
        html.Div([
        html.Label(['Choose a graph:'],style={'font-weight': 'bold'}),
        dcc.Dropdown(
            id='dropdown',
            options=[
                {'label': 'Top 10 incoming traffic IP addresses', 'value': 'fig1'},
                {'label': 'Top 10 outgoing traffic IP addresses', 'value': 'fig2'},
                {'label': 'Top Active Ports', 'value': 'fig3'},
                {'label': 'Top Active IP-Ports', 'value': 'fig4'},
                    ],
            multi=True,
            value=['fig1'],
            style={"width": "60%"}, clearable=False),
        ]),
    html.Div(id='graph-container'),
])
])

@app.callback(Output('graph-container', 'children'),
              [Input('dropdown', 'value'),
              Input('interval-component','n_intervals')])
def update_graph(value, n):
    data = [['192.168.0.105','192.168.0.103','TCP'],
                ['192.168.0.103','192.168.0.105','TCP'],
                ['192.168.0.105','192.168.0.103','UDP'],
                ['52.98.151.66','192.168.0.105','TCP'],
                ['192.168.0.105','52.98.151.66','ICMP'],
                ['52.98.228.226','192.168.0.105','ICMP'],
                ['52.98.228.226','192.168.0.105','UDP'],
                ['192.168.0.103','224.0.0.251','1UDP'],
                ['192.168.0.105','52.98.228.226','TCP']]
    column_names = ['Source', 'Destination','Protocol']
    for i in range(6):
        df = pd.DataFrame (data)
        df.columns = column_names

    inbound_ip_count = df.groupby('Source').size().nlargest(n=10)
    outbound_ip_count = df.groupby('Destination').size().nlargest(n=10)
    port_count = df.groupby('Protocol').size().nlargest(n=10)
    sources_grp = df.groupby(['Source', 'Protocol'], as_index=False)['Destination']\
        .count().sort_values('Destination', ascending=False)
    
    # Get the top 5 occurrences of Source
    top_sources = df['Source'].value_counts()[:5].index.tolist()
    
    # Filter the dataframe to only include the top 5 occurrences of Source
    top_sources_df = sources_grp[sources_grp['Source'].isin(top_sources)]\
        .reset_index(drop=True)
    
    # Rename the count column to 'Protocol Count'
    top_sources_df = top_sources_df.rename(columns={'Destination': 'Protocol Count'})

    if value == ['fig1']:
        fig1 = go.Figure(data = px.bar(df['Source'],
                        x=inbound_ip_count.index, y= inbound_ip_count.values,
                        labels={
                          'x': 'IP Addresses',
                          'y': 'Packets',
                      },
                            title='Top 10 incoming traffic IP addresses')
                      )
        return dcc.Graph(id='live-graph2', figure = fig1)
    # Ploting top 10 Outbound traffic IP addresses
    elif value == ['fig2']:
        fig2 = go.Figure(data = px.bar(df['Destination'],
                        x=outbound_ip_count.index, y=outbound_ip_count.values,
                        labels={
                          'x': 'IP Addresses',
                          'y': 'Packets',
                      },
                        title='Top 10 Outbound traffic IP addresses')
                     )
        return dcc.Graph(id='live-graph2', figure = fig2)
    
    elif value == ['fig1','fig2']:
        df2 = df.melt(id_vars=['Protocol'], value_vars=['Source','Destination'])
        df3= df2.groupby(['variable','value'])['value'].count().reset_index(name='counts')
        fig3 = px.bar(df3,x='value', y='counts',facet_col='variable')
                     
        return dcc.Graph(id='live-graph2', figure = fig3)
    else:
        raise PreventUpdate

if __name__ == ' __main__':
    app.run_server(debug=False)

```

 ![Screenshot 2023-03-28 084907](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/0/5/05f99188f50766e4d611873637aa52ead16f0c34.png)

---

<div class="post-metadata">

**Author:** ![arafeek](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@arafeek](https://community.plotly.com/u/arafeek)\
**Post date:** [March 28, 2023, 2:48am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/10 "2023-03-28T02:48:31Z")

</div>

Thanks,

Interesting,

However, a point and an issue:  
The point is that if I have more than 2 graphs, in fact I have 4, then I have to make all possible combinations in separate if statements, correct? which are:

> (1+2), (1+3), (1+4), (2+3), (2+4), (3+4)

The issue here is that if I select fig1, then fig2, they both show as expected, but if I remove fig1 (leaving only fig2), then I re select fig1, fig1 will not show until I remove fig2 and add it again, so selection should be in sequence.

Any idea how to manage this please?

Thanks, as always, great support

---

<div class="post-metadata">

**Author:** ![arafeek](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@arafeek](https://community.plotly.com/u/arafeek)\
**Post date:** [March 28, 2023, 2:54am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/11 "2023-03-28T02:54:54Z")

</div>

> [@hoatran](#):
>
> `elif value == ['fig1','fig2']:`

BTW, in the above elif, why did you use

> fig3

?

---

<div class="post-metadata">

**Author:** ![hoatran](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/hoatran/32/21447_2.png) [@hoatran](https://community.plotly.com/u/hoatran)\
**Post date:** [March 28, 2023, 2:56am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/12 "2023-03-28T02:56:51Z")

</div>

Yep, I think so, we have to define it with if else.  
With this problem I think you can add `or` in your if condition:

` elif value == ['fig1','fig2'] or value == ['fig2','fig1']:`

For the fig3, it’s just the name. You can name it whatever you want.

---

<div class="post-metadata">

**Author:** ![arafeek](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@arafeek](https://community.plotly.com/u/arafeek)\
**Post date:** [March 28, 2023, 2:58am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/13 "2023-03-28T02:58:58Z")

</div>

Thanks,

But for fig3, I thought it should represent something that it displays, correct?

---

<div class="post-metadata">

**Author:** ![hoatran](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/hoatran/32/21447_2.png) [@hoatran](https://community.plotly.com/u/hoatran)\
**Post date:** [March 28, 2023, 3:01am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/14 "2023-03-28T03:01:12Z")

</div>

So as I said, it’s just the name. You can set it as fig, fig1, fig2 or fig\_1\_2, something like this. In this case fig3 is representing graphs with 2 options.

```auto
    elif value == ['fig1','fig2'] or value == ['fig2','fig1']:
        df2 = df.melt(id_vars=['Protocol'], value_vars=['Source','Destination'])
        df3= df2.groupby(['variable','value'])['value'].count().reset_index(name='counts')
        fig3 = px.bar(df3,x='value', y='counts',facet_col='variable')
                     
        return dcc.Graph(id='live-graph2', figure = fig3)

```

---

<div class="post-metadata">

**Author:** ![arafeek](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@arafeek](https://community.plotly.com/u/arafeek)\
**Post date:** [March 28, 2023, 3:03am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/15 "2023-03-28T03:03:13Z")

</div>

mmm, something to digest first, but thanks again

---

<div class="post-metadata">

**Author:** ![hoatran](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/hoatran/32/21447_2.png) [@hoatran](https://community.plotly.com/u/hoatran)\
**Post date:** [March 28, 2023, 3:08am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/16 "2023-03-28T03:08:27Z")

</div>

Yep, please tell me if you have any questions or don’t understand.

---

<div class="post-metadata">

**Author:** ![arafeek](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@arafeek](https://community.plotly.com/u/arafeek)\
**Post date:** [March 28, 2023, 3:22am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/17 "2023-03-28T03:22:22Z")

</div>

> [@hoatran](#):
>
> `['fig1','fig2'] or value == ['fig2','fig1']`

Ok, this works, however my concern is that I have to redo the calculation for each graph in each if statement, so I moved the graphs (fig1, fig2) outside the if statement, then added those lines:

> elif value == [‘fig1’,‘fig2’] or value == [‘fig2’,‘fig1’]:  
> return dcc.Graph(id=‘live-graph2’, figure = fig1), dcc.Graph(id=‘live-graph2’, figure = fig2)

The result is ok, displaying the graphs as expected, but in separate rows, any suggestion on how to put both in the same row?

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [March 28, 2023, 3:26am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/18 "2023-03-28T03:26:13Z")

</div>

Hello @arafeek,

To put them in the same row, you can wrap them in a `html.Div([fig1, fig2], style={'display':'flex'})` where fig1 and fig2 are your dcc.Graphs. 🙂

---

<div class="post-metadata">

**Author:** ![arafeek](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@arafeek](https://community.plotly.com/u/arafeek)\
**Post date:** [March 28, 2023, 3:27am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/19 "2023-03-28T03:27:43Z")

</div>

And this should be in the layout section, correct?

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [March 28, 2023, 3:30am UTC](https://community.plotly.com/t/checklist-not-displaying-graph/73888/20 "2023-03-28T03:30:41Z")

</div>

```auto
return html.Div([dcc.Graph(id=‘live-graph2’, figure = fig1), dcc.Graph(id=‘live-graph2’, figure = fig2)],
style={'display':'flex'})

```

Assuming you are returning to single div, this should do the trick.

Or you could style the div with the display flex. Its up to you.

[Next page](https://community.plotly.com/t/checklist-not-displaying-graph/73888.md?page=2)