Autoscale Graph Problem in Card

Dash Python
1

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

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
        ]
    )
)])
2

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

3

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

4

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

5

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