✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Graph size in dash

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

Hi @rajtulluri
Welcome to the Dash Community. Have you seen this post? I think it might have the answer you’re looking for.

Hi @rajtulluri

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

2 Likes

Hey @AnnMarieW and @adamschroeder

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