Plotly graph is going outside parent container

📊 Plotly Python
1

This topic is already been posted in stackoverflow (python - Plotly graph is going outside parent container - Stack Overflow).

I’m trying to build a Dashboard using Plotly in Python. I’ve initialized a dashboard, and divided it into portions/containers using ‘dash_html_components.Div()’. Later, I’ve used ‘dash_core_components.Graph()’ to plot graph inside a div. The problem arises when I try to plot a graph inside a div, the plot actually goes outside the div size/container. Though the graph maintains width, but not the height.

This is the image of my dashboard, and the portion that is ticked, there I want to place a graph.

Dashboard without graph:

st 1-ticked
st 1-ticked1366×565 14.3 KB

Dashboard with graph:

st 2
st 21366×556 16.5 KB

Code:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.graph_objs as go
# import pandas_datareader.data as web # requires v0.6.0 or later
from datetime import datetime
import pandas as pd
from datetime import datetime
 
 
 
#building Dashboard
app = dash.Dash()
 
app.layout = html.Div([    #(row=main, col=main) block
    
    html.Div([    ##(row=1, col=1) block
    ], style = {    ##(row=1, col=1) block style
        'display': 'block',
        'float': 'left',
        # 'margin': 'auto',
        'width': '25%',
        'height': '50%',
        # 'border': '1px solid #006600',
        'background-color': 'cyan'
    }),

    html.Div([    ##(row=1, col=2) block

        #graph containing div

        dcc.Graph(
            id = 'my_graph',
            figure={
                'data': [go.Scatter(
                    x = [0,1],
                    y = [0,1],
                    mode = 'lines'
                )],
                'layout': go.Layout(
                    title = 'graph',
                    autosize = True
                )
            }
        )

    ], style = {    ##(row=1, col=2) block style
        'display': 'block',
        'float': 'left',
        # 'margin': 'auto',
        'width': '25%',
        'height': '50%',
        # 'border': '1px solid #006600',
        'background-color': 'DarkCyan'
    }),

    html.Div([    ##(row=1, col=3) block
    ], style = {    ##(row=1, col=3) block sty;e
        'display': 'block',
        'float': 'left',
        # 'margin': 'auto',
        'width': '50%',
        'height': '50%',
        # 'border': '1px solid #006600',
        'background-color': 'MediumSeaGreen'
    })
 
    
    
    
    
    
], style = { #(row=main, col=main) block style
    'display': 'block',
    'float': 'center',
    'margin': '-1vw auto',
    # 'margin': '-1vw 11vw 0 11vw',
    'width': '70vw',
    'height': '30vw',
    # 'border': '1px solid #006600',
    'background-color': 'gray',
    'box-shadow': '10px 10px 5px gray'
    
})
 
 

if __name__ == '__main__':
    app.run_server(port=1000)