How to increase chart size relative to div

Dash Python
1

I am new to Dash Plotly, so please excuse improper terms.

I want to build a dashboard that is 2 x 2, which is two charts on top row and two on the bottom row. Thanks to help from contributors on the site, I am making progress.

However, it seems my charts are small relative to the div they are in. Attached is a screenshot that has 2 charts on top and only one on the bottom. I added borders to show me the div I am working in. Notice how small the charts seem versus the size of the rectangles.

I do not want legends or axis labels, so is there any way to increase the size of the chart while leaving the div or the rectangle the same size it is now?

Thanks for an help.

Dashboard%202x2
Dashboard 2x2.JPG1331×631 35.1 KB

1 Like
2

I think you you have set the margin size and used css in your program. Any way try this code in the div class.
html.Div([
dcc.Graph(
id=“g1”,
figure={‘layout’: {
‘height’: 300,
‘width’: 1000,
}}
)
], style={‘overflow’: ‘scroll’, ‘height’: 350, ‘width’: 500, ‘float’: ‘right’,
‘backgroundColor’: ‘#F7FBFE’, ‘marginLeft’: 10, ‘marginRight’: 190, ‘marginTop’: 10,
‘marginBottom’: 10,
‘border’: ‘thin grey dashed’, ‘padding’: ‘6px 0px 0px 8px’},
className=“one-third column”),

3

Hi @Jfrick100, you can change your plot margin when you define your plot layout:

layout = go.Layout(
    margin=dict(
        b=40, #bottom margin 40px
        l=40, #left margin 40px
        r=20, #right margin 20px
        t=20, #top margin 20px
    )
)

Hope this helps!

4

bala_bala,

Thank you for the reply. I tested it and played around with different settings. This worked well.

One thing that confuses me though is that in the documentation, I see go.Figure used instead of the figure={‘layout’: {.

If I built a chart with the go.Figure method, how do I add the height and width? And can the width be dynamic as html allows width to be specified as a percent?

Thanks for your help,

James

1 Like
5

RenaudLN

This also helped me. With samples of code like this, I can experiment and learn a lot.

Thanks for your help,

James

6

So you want you use the go.Figure then you have to define the height and width in div itself.
i.e)
dcc.Graph(
id=“g1”,
figure={‘layout’: {
‘height’: 600,
‘width’: 1500,
}}
)

and then the trace and figure in callback,

trace1 = go.Scatter(
x=[1,2,3,4],
y=[1,2,3,4],
line=dict(color=‘green’),
visible=True,
name=“actual price”,
)

    trace2 = go.Scatter(
        x=[1,2,3,4],
        y=[1,2,3,4],
        line=dict(color='red'),
        visible=True,
        name="lstm predicted price",
        showlegend=True)

fig = go.Figure(data=[trace1, trace2])

return fig