Graphs in vertical tabs do not use available space

Dash Python
1

Installed Dash versions:

dash                          2.9.2
dash-core-components          2.0.0
dash-html-components          2.0.0
dash-table                    5.0.0
dash-testing-stub             0.0.2

Browsers/OS

  • OS: Linux
  • Browser ungoogled-chromium, firefox

Describe the bug

The width of the graph object does not extend to the right side of the screen. When removing vertical=True the graph fills the entire screen.

Expected behavior

The graph object should use the available space to the right.

Screenshots
vertical=True
vertical_true
vertical=False
vertical_false

Minimal example used

from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

app = Dash(__name__)

daily_profile = [0, 0, 0, 0, 0, 0, 0, 0.05, 0.15, 0.2, 0.4, 0.8, 0.7, 0.4, 0.2, 0.15, 0.05, 0, 0, 0, 0, 0, 0, 0]
daily_production = pd.DataFrame(data=daily_profile)

tab = dcc.Tab([dcc.Graph(figure=px.bar(daily_production))], label="tab")

app.layout = html.Div([
    dcc.Tabs([tab]
             , vertical=True # remove to fix graph behavior
             )
])

if __name__ == "__main__":
    app.run_server(debug=True)
2

Hi, you likely need to set the parent container (create one if needed) to take up full screen space (make sure your full hierarchy is set correctly if you would have multiple nested divs)

The graph is able to resize according to its parent size only, whatever settings you give it.

The easiest way to troubleshoot is to give your containers some background colour or use F12 developer tools in order for you to see what is actually happening

Regards
J

3

Show me how to do it using my code from the example, if you don’t mind

4

Hi @Volodia this behaviour seems to be a bit strange, I agree with you. If you wrap the dcc.Graph() with a html.Div() and set the width to 100vw it works however (which is what @jcuypers mentioned):

from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

app = Dash(__name__)

daily_profile = [0, 0, 0, 0, 0, 0, 0, 0.05, 0.15, 0.2, 0.4, 0.8, 0.7, 0.4, 0.2, 0.15, 0.05, 0, 0, 0, 0, 0, 0, 0]
daily_production = pd.DataFrame(data=daily_profile)

tab = dcc.Tab(
    children=[
        html.Div(
            dcc.Graph(
                figure=px.bar(
                    daily_production
                )
            ),
            style={'width': '100vw'}
        )
    ], label="tab"
)

app.layout = html.Div([
    dcc.Tabs([tab]
             , vertical=True # remove to fix graph behavior
             )
])

if __name__ == "__main__":
    app.run_server(debug=True)
5

Yes thanks, you might also need to set the height to get the desired result.

6

Thank you very much. This is very useful information