# Graphs in vertical tabs do not use available space

**URL:** <https://community.plotly.com/t/graphs-in-vertical-tabs-do-not-use-available-space/75664>\
**Category:** Dash Python\
**Created:** [May 31, 2023, 6:32am UTC](https://community.plotly.com/t/graphs-in-vertical-tabs-do-not-use-available-space/75664 "2023-05-31T06:32:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Volodia](https://avatars.discourse-cdn.com/v4/letter/v/5e9695/32.png) [@Volodia](https://community.plotly.com/u/Volodia)\
**Post date:** [May 31, 2023, 6:32am UTC](https://community.plotly.com/t/graphs-in-vertical-tabs-do-not-use-available-space/75664/1 "2023-05-31T06:32:58Z")

</div>

Installed Dash versions:

```auto
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](https://user-images.githubusercontent.com/36898462/241561913-b8dee9ac-da53-469a-be1e-eae07e70736f.png)](https://user-images.githubusercontent.com/36898462/241561913-b8dee9ac-da53-469a-be1e-eae07e70736f.png)  
`vertical=False`  
[![vertical_false](https://user-images.githubusercontent.com/36898462/241561952-782093e3-c6c1-4b0c-b5b2-fad5934c32cc.png)](https://user-images.githubusercontent.com/36898462/241561952-782093e3-c6c1-4b0c-b5b2-fad5934c32cc.png)

**Minimal example used**

```auto
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)

```

---

<div class="post-metadata">

**Author:** ![jcuypers](https://avatars.discourse-cdn.com/v4/letter/j/ebca7d/32.png) [@jcuypers](https://community.plotly.com/u/jcuypers)\
**Post date:** [May 31, 2023, 6:43am UTC](https://community.plotly.com/t/graphs-in-vertical-tabs-do-not-use-available-space/75664/2 "2023-05-31T06:43:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Volodia](https://avatars.discourse-cdn.com/v4/letter/v/5e9695/32.png) [@Volodia](https://community.plotly.com/u/Volodia)\
**Post date:** [May 31, 2023, 9:41am UTC](https://community.plotly.com/t/graphs-in-vertical-tabs-do-not-use-available-space/75664/3 "2023-05-31T09:41:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [May 31, 2023, 10:55am UTC](https://community.plotly.com/t/graphs-in-vertical-tabs-do-not-use-available-space/75664/4 "2023-05-31T10:55:10Z")

</div>

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

```python
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)

```

---

<div class="post-metadata">

**Author:** ![jcuypers](https://avatars.discourse-cdn.com/v4/letter/j/ebca7d/32.png) [@jcuypers](https://community.plotly.com/u/jcuypers)\
**Post date:** [May 31, 2023, 11:15am UTC](https://community.plotly.com/t/graphs-in-vertical-tabs-do-not-use-available-space/75664/5 "2023-05-31T11:15:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Volodia](https://avatars.discourse-cdn.com/v4/letter/v/5e9695/32.png) [@Volodia](https://community.plotly.com/u/Volodia)\
**Post date:** [May 31, 2023, 2:10pm UTC](https://community.plotly.com/t/graphs-in-vertical-tabs-do-not-use-available-space/75664/6 "2023-05-31T14:10:25Z")

</div>

Thank you very much. This is very useful information