# Autoscale Graph Problem in Card

**URL:** <https://community.plotly.com/t/autoscale-graph-problem-in-card/60391>\
**Category:** Dash Python\
**Created:** [January 24, 2022, 5:39pm UTC](https://community.plotly.com/t/autoscale-graph-problem-in-card/60391 "2022-01-24T17:39:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kilobit](https://avatars.discourse-cdn.com/v4/letter/k/4da419/32.png) [@kilobit](https://community.plotly.com/u/kilobit)\
**Post date:** [January 24, 2022, 5:39pm UTC](https://community.plotly.com/t/autoscale-graph-problem-in-card/60391/1 "2022-01-24T17:39:26Z")

</div>

Hi,  
Could someone give me example how to aoutosize dcc.Graph in Card? for width I have no problem but height goes above card.  
I dont know which settings i should use to get autoscale height like it happends in width case

```auto
fig = html.Div([dcc.Graph(id='test', style={"height":"auto"})]) # THIS HEIGHT NOT WORKS

dbc.Row([
    dbc.Col(
        dbc.Card([
            dbc.CardBody([fig],style={"height": "auto"}) # THIS HEIGHT OF CARD WORKS, BUT GRAPH IS BIGGER THAN CARD
        ]
    )
)])

```

---

<div class="post-metadata">

**Author:** ![jlfsjunior](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jlfsjunior/32/16061_2.png) [@jlfsjunior](https://community.plotly.com/u/jlfsjunior)\
**Post date:** [January 24, 2022, 7:17pm UTC](https://community.plotly.com/t/autoscale-graph-problem-in-card/60391/2 "2022-01-24T19:17:26Z")

</div>

Hi,

One way to go with it is to provide something like `style={"height":"100%"}` to `dcc.Graph` _and_ set the Card or CardBody to a fixed/viewport height (“50vh” or “250px”). Details in [this old thread](https://community.plotly.com/t/cant-seem-to-change-default-height-on-graph/6742/7)

---

<div class="post-metadata">

**Author:** ![kilobit](https://avatars.discourse-cdn.com/v4/letter/k/4da419/32.png) [@kilobit](https://community.plotly.com/u/kilobit)\
**Post date:** [January 24, 2022, 7:27pm UTC](https://community.plotly.com/t/autoscale-graph-problem-in-card/60391/3 "2022-01-24T19:27:12Z")

</div>

hi, I have tried it already dcc.Graph height to 100% and 50% but same result, , I have many cards in another cards, but anyway graph is showing in one part only when window of my browser is resized to 80%, when I zoom in my browser window to 100% i dont see my X axis ☹

---

<div class="post-metadata">

**Author:** ![jlfsjunior](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jlfsjunior/32/16061_2.png) [@jlfsjunior](https://community.plotly.com/u/jlfsjunior)\
**Post date:** [January 24, 2022, 7:43pm UTC](https://community.plotly.com/t/autoscale-graph-problem-in-card/60391/4 "2022-01-24T19:43:09Z")

</div>

But have you fixed the Card height as well? This is quite important, as the Graph container needs to be constrained by its parent.

---

<div class="post-metadata">

**Author:** ![kilobit](https://avatars.discourse-cdn.com/v4/letter/k/4da419/32.png) [@kilobit](https://community.plotly.com/u/kilobit)\
**Post date:** [January 24, 2022, 8:10pm UTC](https://community.plotly.com/t/autoscale-graph-problem-in-card/60391/5 "2022-01-24T20:10:19Z")

</div>

ok i solved the problem.  
To get right output I had to add two additional html.Div()'s each one with style={“height”:“100%”} to dcc.Graph