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:

r-beginners · Answer 1 · 2022-05-28T07:15:14.653

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()

I don't see any observable changes in the size of the figure. I think the figure size changes, but the actual plot area doesn't. How can I make sure that the plot area is maximised? — HJA24, May 28 '22 at 08:07
For the graph area, there is a graph area drawn by plotly and further margins, and on Dash, there is a column width specification by the bootstrap component you have introduced. In addition, there is something called the browser display area. My response was to increase the graph size and center it with less column width. — r-beginners, May 28 '22 at 08:19

score 0 · Answer 2 · answered Jun 01 '22 at 08:49

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()

Increase size of Plotly / Dash Figure

2 Answers2