How to position the plot figure in the correct space?

Dash Python
1

I have written the following code below

import numpy as np
import pandas as pd
import plotly.graph_objects as go
import pandas_ta as pta
import dash_bootstrap_components as dbc
import csv
from dash import Dash, html, dcc, callback, Input, Output, State
from pymongo import MongoClient

def get_tickers(file_of_tickers):
    tickers = []
    with open(file_of_tickers, mode='r') as file:
        csvFile = csv.reader(file)
        for lines in csvFile:
            tickers.append(lines[0])

    tickers.insert(0, 'Choose Company')
    return tickers

company_tickers = get_tickers('Symbols.csv')

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app_title = html.H1(children="Stocks Trading Web App", style={'text-align':'center'})

companies_dd = dcc.Dropdown(
    id='tickers_id',
    options=company_tickers,
    value='Choose Company'
)

indicators_dd = dcc.Dropdown(
    id='indicator_id',
    options=['Choose Indicator', 'SMA', 'EMA', 'MCAD'],
    value='Choose Indicator'
)

button = dbc.Button('Generate',
                    id='button_id',
                    n_clicks=0
)

graph_div = html.Div(id='graph_div')

app_layout = html.Div([
    dbc.Row(app_title),
    dbc.Row([
        dbc.Col(companies_dd),
        dbc.Col(indicators_dd),
        dbc.Col(button),
        dbc.Col(graph_div)
    ])
])

@callback(
    Output('graph_div', 'children'),
    Input('button_id', 'n_clicks'),
    State('tickers_id', 'value')
    #State('indicator_id', 'value')
)
def plot_graph(n_clicks, input1):
    client = MongoClient('mongodb://localhost:27017/')
    db = client.stocksdb
    if(n_clicks):
        dcc.Interval(id='interval_db', interval=86400000 * 7, n_intervals=0)
        with client:
            df = pd.DataFrame(db.companies.find({'Company': input1}))
        client.close()
        dcc.Interval(id='interval_db', interval=8640000 * 7, n_intervals=0)
        fig = go.Figure(data=[go.Candlestick(
            x=df['Date'],
            open=df['Open'],
            high=df['High'],
            low=df['Low'],
            close=df['Close']
        )])

        return dcc.Graph(figure=fig)
    else:
        return ""

app.layout = dbc.Container(app_layout)

if __name__ == "__main__":
    app.run(debug=True)

So when I open this code on the web browser I get the following output

Output
Output1181×527 55.9 KB

As seen in the output photo the Plot is not in the correct place under the drop down menus. What code is needed to fix this problem?

2

I think you should add a row for your graph if you want it be under dropdown menus.
Something as below:

app_layout = html.Div([
    dbc.Row(app_title),
    dbc.Row([
        dbc.Col(companies_dd),
        dbc.Col(indicators_dd),
        dbc.Col(button)
    ]),
    dbc.Row([
        dbc.Col(graph_div)
    ])
])