Increase size of Plotly / Dash Figure

Question

I have the following code:

import numpy as np
from dash import Dash, html
from dash import dcc
import dash_bootstrap_components as dbc
import plotly.graph_objects as go


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

app.layout = html.Div(
        dbc.Row(
            [
                dbc.Col([
                    dcc.Graph(
                        id='figure',
                        figure={
                            'data': [go.Surface(
                            z=np.zeros((1000, 1000)),
                            colorscale='algae',
                            opacity=0.9,
                            showscale=False
                )]}
                    )
                ],
                md=12)
            ]
        )
)

My output looks as follows:

How do I make sure that the size of figure increases like below:

Answer 1

Your code describes the graph settings directly, which can be modified by adding layout information to it in dictionary form. I have removed the fixed size and set it to 600 pixels in height and width. I have also reduced the number of columns the graph needs and placed it as centered.

import numpy as np
from dash import Dash, html
from dash import dcc
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
#from jupyter_dash import JupyterDash

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

app.layout = html.Div(
        dbc.Row(
            [
                dbc.Col([
                    dcc.Graph(
                        id='figure',
                        figure={
                            'data': [go.Surface(
                            z=np.zeros((1000, 1000)),
                            colorscale='algae',
                            opacity=0.9,
                            showscale=False)],
                        'layout':{
                            'autosize':False,
                            'height':600,
                            'width':600}
                        }
                    )
                ],
                md=8)
            ], justify='center',
        )
)

if __name__ == "__main__":
    #app.run_server(mode='inline')
    app.run_server()

Answer 2

Add "margin" property in layout likewise -

[![import numpy as np
from dash import Dash, html
from dash import dcc
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
#from jupyter_dash import JupyterDash

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

app.layout = html.Div(
        dbc.Row(
            \[
                dbc.Col(\[
                    dcc.Graph(
                        id='figure',
                        figure={
                            'data': \[go.Surface(
                            z=np.zeros((1000, 1000)),
                            colorscale='algae',
                            opacity=0.9,
                            showscale=False)\],
                        'layout':{
                            'autosize':False,
                            'height':600,
                            'width':600,
                            'margin': {"t":"5","b":"5","l":"5","r":"5"}
                            
                                 }
                        }
                            )
                \],
                md=8)
            \], justify='center',
        )
)

if __name__ == "__main__":
    #app.run_server(mode='inline')
    app.run_server()