Having problem in making the figures get aligned in one single row

Dash Python
1

hello new to plotly.

currently trying to create one dashboard while creating it having problem in alignments.

here is the code .

app = Dash(__name__)

app.layout = html.Div([
    dbc.Col
    (
        [
            dbc.Row(html.H1(children='NIFTY ENERGY INDEX', style={'textAlign':'center'})),
    
            dbc.Row(dcc.Graph(figure=fig_line)),
            dbc.Row(dcc.Graph(figure=fig_candle)),
            dbc.Row(dcc.Graph(figure=fig_Weekly)),
            dbc.Row(
                [
                    dbc.Col(dcc.Graph(figure=fig_monthly)),
                    dbc.Col(dcc.Graph(figure=fig_quarterly)),
                    dbc.Col(dcc.Graph(figure=fig_yearly))
                ]
            )
        ]    
    )
    
    
])

screenshot of dashboard

image
image1876×921 55 KB

image
image1883×900 15.7 KB

how to make those figures of nifty weekly,monthly comes in one single row.

1 Like
2

Try To remove Col, style each graph with width:33.3%

3

You need to add an external stylesheet when using dash_bootstrap_components. Check out the theme explorer.

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc

external_stylesheets = [dbc.themes.ZEPHYR]
app = Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dbc.Col([
        dbc.Row(html.H1(children='NIFTY ENERGY INDEX', style={'textAlign': 'center'})),
        dbc.Row(dcc.Graph()),
        dbc.Row(dcc.Graph()),
        dbc.Row(dcc.Graph()),
        dbc.Row([
            dbc.Col(dcc.Graph()),
            dbc.Col(dcc.Graph()),
            dbc.Col(dcc.Graph())
        ])
    ])
])

if __name__ == '__main__':
    app.run(debug=True)
1 Like
4

Thanks a lot this worked like wonder.

1 Like