hi… How can I make charts responsive? So that by changing the size of the browser or on any device, the size of the charts fits the size of the browser page? Thank you for your help
fig1= px.line(a,x=m,y=t1)
fig2= px.bar(a,x=m,y=t2)
app =dash.Dash(__name__,title='me')
app.layout = html.Div(children=[
html.Div(children=[
dcc.Graph(figure=fig1 ),
dcc.Graph(figure=fig2)
], style={'display':'flex'}
)])
Hi,
There are many ways to make a chart responsive, one being:
dcc.Graph(id="figure-xyz", responsive=True),
There is one full chapter in the doc about this topic.
Scroll down to “Graph Resizing and Responsiveness”
I also suggest you to have a look on the basics of CSS:)
Hi David Thank you for your help… but it didn’t work… I want the size of the chart to automatically fit in the browser when I change the size of the browser.Please give more guidance. Of course, I am beginner.
fig1= px.line(a,x=m,y=t1)
app =dash.Dash(__name__,title='me')
app.layout = html.Div(children=[
dcc.Graph(id="figure-xyz1",figure=fig1 ,responsive=True)
])
Hello @mansur,
Welcome to the community!
I believe that the div wrapping the graph should be given a style of width: 100%.
Hello, thank you very much… I tried but it still didn’t work… Please give other solutions 
fig1= px.line(a,x=m,y=t1)
app =dash.Dash(__name__,title='me')
app.layout = html.Div(children=[
dcc.Graph(id="figure-xyz1",figure=fig1, responsive=True )
],style={'width': "100%"})
Can anyone help me?
Not sure if it was what you need but I usually use dbc.Row and dbc.Col and set the width of Col by xs, md, lg. Something as below:
import plotly.express as px
import plotly.graph_objects as go
import dash_bootstrap_components as dbc
import pandas as pd
import numpy as np
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input
long_df = px.data.medals_long()
fig1 = px.bar(long_df, x="nation", y="count", color="medal", title="Long-Form Input")
fig2 = px.bar(long_df, x="nation", y="count", color="medal", title="Long-Form Input")
app = dash.Dash(__name__,title='me', external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Row([
dbc.Col([
dcc.Graph(figure=fig1,responsive=True)],xs=6, md=6, lg=6),
dbc.Col([
dcc.Graph(figure=fig2,responsive=True)],xs=6, md=6, lg=6)
])
if __name__ == "__main__":
app.run_server(debug=False,port=8055)
All of these things work on an individual graph.
You can do like what @hoatran recommended if you want, it just takes it into a div which is responsive to the size.
Here is another way to accomplish the same:
import dash
from dash import html, Output, Input, State, dcc
import plotly.express as px
df = px.data.iris()
fig1= px.line(df,x='species',y='petal_width')
app =dash.Dash(__name__,title='me')
app.layout = html.Div(children=[
html.Div(children=[
dcc.Graph(figure=fig1, responsive=True, style={'flexGrow':'1', 'flexShrink':'1'}),
dcc.Graph(figure=fig1, responsive=True, style={'flexGrow':'1', 'flexShrink':'1'})
], style={'display':'flex', 'width': '100%', 'maxWidth':'100%', 'overflowX':'hidden', 'overflowY':'auto'}
)])
if __name__ == "__main__":
app.run_server(debug=True)
hi thank you for your answer …but when i minimize the browser lengthwise , the height of the chart doesn’t change and its not responsive
i found a way to change the width and height of my graph at the same time as the browser size changes… apparently , this method works … style={'height' : '40vh'} thanks to the friends who took the time to answer
app =dash.Dash(__name__,title='mee')
app.layout = html.Div(children=[
html.H1('test dash'),
dcc.Graph(style={'height' : '40vh'} , id="figure-xyz1",
figure = fig1),
dcc.Graph(style={'height' : '40vh'} , id="figure-xyz2",
figure = fig2)
])
When people refer to responsive, typically they are just referring to the width of the screen.
You are correct that you can do that with the height and get that desired result. The issue then becomes does it make sense for the chart to be that large on larger screens. 
My goal is to design a dashboard that changes the size of the charts according to the screen size of various devices. That device may be a tablet phone or a 50" monitor, that’s why it’s important to me. Of course, I’m a beginner and I’m learning
Understandable.
If you want to pursue this really well, you could do things like using dbc and have different size columns for sm and md screens, then other sizes for larger screens.
It could take it from a 1:4 ratio to a 4:1 ratio, and so forth.
There is a school of thinking that mobile should be first with designing, so keep that in mind.
When testing your site, be sure to go into developer mode and then change the output screen size to make sure it looks and interacts the way you want it.
Thank you for your advice. I will try to increase my knowledge in this field and get help from friends like you. 