How to fix plot width in Dash?

Dash Python
1

Hi,

I am using code like html.Div(dcc.Graph(id='plot'), style={'width': 1000, 'overflowY': 'scroll'}) to create horizontal scroll for the plot. And for the plot I set width=3000, in the layout.

It works fine at first. But when I resize my browser (tried both Safari and Google Chrome), the width changes and the scroller no longer works. Here’s a short screen recording.

aaa
aaa.gif1320×231 206 KB

I have set width=3000 so can the width remain at 3000 when resizing the browser window?

Thanks!

2

Here’s a complete example code showing the problem: (The width is 3000 with horizontal scroll at first, after resizing the browser window the width changed to 1000)

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go

app = dash.Dash(__name__)

app.layout = html.Div(
    children=[
        dcc.Input(id='input', type='text'),
        html.Div(dcc.Graph(id='plot', style={'width': 1000, 'overflowY': 'scroll'})),
        ])

@app.callback(
    Output('plot', 'figure'),
    [Input('input', 'value')]
)
def update_graph_1(input):
    return {'data':[go.Bar(
            x=['Feature A', 'Feature B', 'Feature C',
               'Feature D', 'Feature E', 'Feature F',
               'Feature G', 'Feature H', 'Feature I',
               'Feature J', 'Feature K', 'Feature L',
               'Feature M', 'Feature N', 'Feature O',
               'Feature P', 'Feature Q', 'Feature R',
               'Feature S', 'Feature T', 'Feature U'],
            y=[20, 14, 23, 25, 22,
               20, 14, 23, 25, 22,
               20, 14, 23, 25, 22,
               20, 14, 23, 25, 22, 33])],
            'layout': go.Layout(width=3000)}

if __name__ == '__main__':
    app.run_server(debug=True)
1 Like
3

Thanks for reporting! It must be that our resize handler is overriding the width. Could you try adding autosize=False inside go.Layout?

4

Thanks for replying. I tried go.Layout(width=3000, autosize=False) and still have the same problem.

5

One last thing to try would be to explicitly set the height. In any case, this could be improved and we’re tracking the issue internally here: https://github.com/plotly/dash-core-components/issues/355