How to increase width of a graph and accomodate in a single line

@ragesh wrote:

I am building a dashboard using plotly dash. I am using Dash-bootsrap-components as well as bootstrap.min.css.

The template I am using is this from dash-bootstrap-components

Below I have pasted my code , kindly bare with the formatting, while I copy paste from my IDE to stackoverflow, somehow it gets misarranged

CODE :

# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {

    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "16rem",
    "padding": "2rem 1rem",
    "background-color": "#f8f9fa",
    "position": "fixed",
    "color":"#000",
}

# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
    "margin-left": "18rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",

}

sidebar = html.Div(
    [
        html.H2("Plate", className="display-4"),
        html.Hr(),
        html.P(
            "A simple dashboard", className="lead"
        ),
        dbc.Nav(
            [
                dbc.NavLink("Dashboard", href="/dashboard", id="page-1-link"),
                dbc.NavLink("Analytics", href="/page-2", id="page-2-link"),
                dbc.NavLink("Page 3", href="/page-3", id="page-3-link"),
                html.Hr(),
                dbc.NavLink("Logout", href="/logout", id="page-4-link"),
            ],
            vertical=True,
            pills=True,
        ),
    ],
    style=SIDEBAR_STYLE,
)

content = html.Div(id='page-content' ,style=CONTENT_STYLE)



app.layout = html.Div([dcc.Location(id="url"), sidebar, content])
app.config.suppress_callback_exceptions = True


# this callback uses the current pathname to set the active state of the
# corresponding nav link to true, allowing users to tell see page they are on
@app.callback(
    [Output(f"page-{i}-link", "active") for i in range(1, 4)],
    [Input("url", "pathname")],
)
def toggle_active_links(pathname):
    if pathname == "/" or pathname == "/dashboard":
        # Treat page 1 as the homepage / index
        return True, False, False
    return [pathname == f"/page-{i}" for i in range(1, 4)]


@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
def render_page_content(pathname):
    if pathname in ["/", "/page-1", "/dashboard"]:
        dashBoard = dbc.Container([
            dbc.Row([dcc.DatePickerRange(
                id='my-date-picker-range',
                min_date_allowed=dt(minDate[0],minDate[1],minDate[2]),
                max_date_allowed=dt(maxDate[0],maxDate[1],maxDate[2]),
                initial_visible_month=dt(maxDate[0],maxDate[1],maxDate[2]),
                start_date=dt(minDate[0],minDate[1],minDate[2]).date(),
                end_date=dt(maxDate[0],maxDate[1],maxDate[2]).date()
                ),
            html.Button(id="date-button" , children ="Analyze" , n_clicks = 0, className = 'btn btn-outline-success')
                ]),

            html.Div([
                html.Br(),      

                dbc.Row([

                    html.H4(['Category Overview'] , className = 'display-4'),
                    html.Br(),
                    html.Br(),
                    ]),
                dbc.Row([
                    dbc.Col([dcc.Graph(id='categoryPerformance',figure = dict(data=ge.returnCategoryOverviewBarGraph(df)[0],
                     layout=ge.returnCategoryOverviewBarGraph(df)[1]))

                        ]),
                    dbc.Col([dcc.Graph(id='categoryPerformanceTrend' )])
                    ]),
                html.Hr(),
                dbc.Row([
                    dbc.Col([
                        dcc.Dropdown(id = 'category-dd', options = category_items, value = 'Food')

                        ]),
                    dbc.Col([

                        dcc.Slider(id = 'headCount' , min = 5, max=20 , step = 5 , value = 5, marks = {i: 'Count {}'.format(i) for i in range(5,21,5)})

                        ], className = 'col-12 col-sm-6 col-md-8')
                    ]),
                dbc.Row([
                    html.Br(),
                    html.Br(),
                    dbc.Col([

                        dcc.Graph(id ='idvlCategoryPerformanceBest')


                        ]),
                    dbc.Col([dcc.Graph(id ='idvlCategoryPerformanceLeast')
                        ])
                    ])
                ])
            ] )
        return dashBoard











    elif pathname == "/page-2":
        return html.P("This is the content of page 2. Yay!")
    elif pathname == "/page-3":
        return html.P("Oh cool, this is page 3!")
    elif pathname == "/logout":
        return html.P("Log out!")
    # If the user tries to reach a different page, return a 404 message
    return dbc.Jumbotron(
        [
            html.H1("404: Not found", className="text-danger"),
            html.Hr(),
            html.P(f"The pathname {pathname} was not recognised..."),
        ]
    )

SnapShot:

image1920×1080 151 KB

Desired O/p :

I would like to increase the size of my graph 2 , keeping the height intact, I would like to increase the width of the graph. Also I need to accommodate graph 1 and 2 in same row.

Components 3 and 4 worked perfectly , but using similar class names did not work out for 1 and 2.

Kindly help me out! Thanks !

Posts: 1

Participants: 1

Read full topic