# Graph size in dash

**URL:** <https://community.plotly.com/t/graph-size-in-dash/40696>\
**Category:** Dash Python\
**Created:** [June 6, 2020, 3:00pm UTC](https://community.plotly.com/t/graph-size-in-dash/40696 "2020-06-06T15:00:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rajtulluri](https://avatars.discourse-cdn.com/v4/letter/r/5fc32e/32.png) [@rajtulluri](https://community.plotly.com/u/rajtulluri)\
**Post date:** [June 6, 2020, 3:00pm UTC](https://community.plotly.com/t/graph-size-in-dash/40696/1 "2020-06-06T15:00:34Z")

</div>

Hey,

So I am new to Dash and building my own web app using Dash. I am trying to plot multiple graphs inside divisions. I have currently manually set the width and height of the graph to the size I would prefer inside the div tag.  
Running the app on different browsers and devices I notice that since my div sizes are set relatively they are rendered perfectly, but the graph sizes are in fact hardcoded and hence are not rendered as they should,  
I want to adjust the size (plot size) of the graph relative to the div as we do for div within a div. Is there any method using which I can achieve this??

I am attaching my code for your reference below

> dcc.Graph(  
> id= ‘line-total-cases’  
> )

The code that resides in the callback function.

> data= [  
> go.Scatter(  
> x= country\_df.date,  
> y= country\_df.total\_cases,  
> hovertemplate= ‘Total cases reported: %{y:.0f}’,  
> mode= ‘lines’,  
> line= dict(color=‘cadetblue’, width= 3.5)  
> )  
> ]
> 
> layout= go.Layout(  
> title= {‘text’:‘**Total cases reported in the country - ‘+country.capitalize()+’**’, ‘x’:0.5, ‘y’:0.95},  
> yaxis= { ‘showticklabels’:False},  
> xaxis= {‘showgrid’:False},  
> paper\_bgcolor= ‘#F8F8F8’,  
> plot\_bgcolor= ‘#F8F8F8’,  
> height=370,  
> width= 460,   
> margin= dict(l=38,b=32,t=30,r=45)  
> )

Thanks  
Raj tulluri

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [June 6, 2020, 4:11pm UTC](https://community.plotly.com/t/graph-size-in-dash/40696/2 "2020-06-06T16:11:46Z")

</div>

Hi @rajtulluri  
Welcome to the Dash Community. Have you seen [this post](https://community.plotly.com/t/cant-seem-to-change-default-height-on-graph/6742/22)? I think it might have the answer you’re looking for.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [June 6, 2020, 4:47pm UTC](https://community.plotly.com/t/graph-size-in-dash/40696/3 "2020-06-06T16:47:27Z")

</div>

Hi @rajtulluri

New responsiveness options were added in recently. You could also check out: [https://dash.plotly.com/dash-core-components/graph](https://dash.plotly.com/dash-core-components/graph)

---

<div class="post-metadata">

**Author:** ![rajtulluri](https://avatars.discourse-cdn.com/v4/letter/r/5fc32e/32.png) [@rajtulluri](https://community.plotly.com/u/rajtulluri)\
**Post date:** [June 6, 2020, 5:07pm UTC](https://community.plotly.com/t/graph-size-in-dash/40696/4 "2020-06-06T17:07:38Z")

</div>

Hey @AnnMarieW and @adamschroeder

Thank you so much for the quick response. Both the solutions worked for me.