Django + plotly-dash: cannot render graphs side to side

Question

I have followed this Subplot ( Side to side ) in python Dash and How to add multiple graphs to Dash app on a single browser page?, to find a way to get graphs rendering side to side in my template.

I cannot get it to work, the size of the graphs are adjusting well, but they keep rendering one below the other. I am confused about what is going wrong, and as I am just picking up dash, I am struggling to identify the root cause of the issue.

UPDATE: As adivced in the comments, i have tried including graph1 and graph2 inside as children of one div tag and display, however it still does not let get two graphs next to each other.

Here is what my file looks like:

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
from django_plotly_dash import DjangoDash
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from django_plotly_dash import DjangoDash
import dash_table
import os 
#external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
external_stylesheets =  'home/ubuntu/exostocksaas/staticfiles/css/style.css'
app = DjangoDash('tryout', external_stylesheets=external_stylesheets)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df_bar = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df_bar, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    
    
    # All elements from the top of the page
html.Div(children=[
        
        
        html.Div(children=[
            html.H1('Hello Dash'),

            html.Div(''' Dash: A web application framework for Python.'''),

                dcc.Graph(id='graph1',figure=fig, style={"width":500, "margin": 10,'display': 'flex'}),  
            
                html.H3('Hello Dash'),
                dcc.Graph(id='graph2',figure=fig, style={"width":500, "margin": 10,'display': 'flex'}),   
], 
),
        html.Div(children=[
             html.H1('Hello Dash', style={"width":500, "margin": 0,'display': 'flex'}),

             html.Div('''Dash: A web application framework for Python.''', style={"width":500, "margin": 0,'display': 'inline-block'}),
                dcc.Graph(id='graph2',figure=fig, style={"width":500, "margin": 0,'display': 'flex'}),                  
                ]),
    
        html.H1('Hello Dash'),

        html.Div('''Dash: A web application framework for Python.'''),
        dcc.Graph(id='graph3',figure=fig, style={"width":500, "margin": 0,'display': 'flex'}
        ),  

    ], className='row'),

    html.Div([
        html.H1(children='Hello Dash'),

        html.Div(children='''
            Dash: A web application framework for Python.
        '''),
        
dash_table.DataTable(
    id='table',

    columns=[{"name": i, "id": i} for i in df_bar.columns],
    data=df_bar.to_dict('records'),
    sort_action='native',
    filter_action='native',
    export_format='csv',


    style_cell={'textAlign': 'center', 'font-size' : '16px','width': '10px',
        'overflow': 'hidden'
},


    style_data_conditional=[
        {
            'if': {'row_index': 'odd'},
            'backgroundColor': 'rgb(248, 248, 248)'
        }
    ],
    style_header={
        'backgroundColor': 'rgb(230, 230, 230)',
        'fontWeight': 'bold',
        'font-size' : '20px'
    }

)
    ], className='six columns')
    
])

still no luck, I can't find a way to get it to work

I take it you have a CSS file as well somewhere. Not sure what styles you're setting, but I would recommend using Flexbox to do this. — coralvanda
– coralvanda, Commented Jan 30, 2021 at 15:41
i have a css file indeed. I am a bit confused on how to make flexbox work in this python file to achieve the display I try to get — Murcielago
– Murcielago, Commented Jan 30, 2021 at 17:22
You'll need one div that contains both the graphs as its children, and it should be given the display: flex property either in your CSS file or by setting the style prop in Python. — coralvanda
– coralvanda, Commented Jan 30, 2021 at 18:43
i thought I understand your advice @coralvanda but it still not workout out — Murcielago
– Murcielago, Commented Jan 30, 2021 at 22:55
hey @Murcielago were you able to eventually figure out how to render them side by side using django-plotly-dash? — hkhare
– hkhare, Commented May 24, 2023 at 18:43

coralvanda · Accepted Answer · 2021-01-31 15:01:13Z

1

I ran this locally and it worked. I eliminated your stylesheets so I could show the CSS here using the style prop.

    html.Div(children=[

        html.Div(
            style=dict(display='flex', height=500),
            children=[
                html.H1('Hello Dash'),

                html.Div(''' Dash: A web application framework for Python.'''),

                dcc.Graph(id='graph1', figure=fig,
                          style={"width": 500, "margin": 10, 'display': 'flex'}),

                html.H3('Hello Dash'),
                dcc.Graph(id='graph2', figure=fig,
                          style={"width": 500, "margin": 10, 'display': 'flex'}),
            ],
        ),
    ], className='row'),

answered Jan 31, 2021 at 15:01

coralvanda

6,6562 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Django + plotly-dash: cannot render graphs side to side

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related