Hi, I´m having problems to fit an dcc graph into a tab. I see the dash documentation and put the responsive mode and I get this
when I try to do that into my own tab I get this
How to fit this graph as the documentation?
I alredy use responsive= True
Thanks for your help.
hi @lotso
Welcome to the Dash community.
Can you please share more about your problem and an example code that you use. It would be great if we could run your code directly on our computer and see the same problem you’re seeing.
Thank you,
Hi @adamschroeder I´m using dash core component into a html div, I do a css grid in this div and the graph doesn´t fit well when I put the responsive mode.
This is my dash component
html.Main(className='content',children=[
html.H1('Welcome, Human'),
html.P('Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia, explicabo!'),
html.Div(className='contenedor',children=[
dcc.Tabs([
dcc.Tab(label='Dashboard', children=[
html.Br(),
html.Div(className='contenedor_pestaña_1',children=[
html.Div(className='mini_container',children=[
html.H3('Obligaciones'),
html.H1('1234'),
]),
html.Div(className='mini_container',children=[
html.H3('Obligaciones'),
html.H1('1234'),
]),
html.Div(className='mini_container',children=[
html.H3('Nuevos'),
html.H1('1234'),
html.H4(''),
]),
html.Div(className='mini_container',children=[
html.H3('ICV'),
html.H1('1234'),
html.H4(''),
]),
html.Div(className='gaficas_1',children=[
dcc.Graph(
figure={
'data': [
{'x': [1, 2, 3], 'y': [1, 4, 1],
'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [1, 2, 3],
'type': 'bar', 'name': u'Montréal'},
]
},responsive=True
),
]),
html.Div(className='gaficas_1',children=[
dcc.Graph(
figure={
'data': [
{'x': [1, 2, 3], 'y': [1, 4, 1],
'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [1, 2, 3],
'type': 'bar', 'name': u'Montréal'},
]
},responsive=True
),
]),
html.Div(className='gaficas_1',children=[
dcc.Graph(
figure={
'data': [
{'x': [1, 2, 3], 'y': [1, 4, 1],
'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [1, 2, 3],
'type': 'bar', 'name': u'Montréal'},
]
},responsive=True
),
]),
html.Div(className='gaficas_1',children=[
dcc.Graph(
figure={
'data': [
{'x': [1, 2, 3], 'y': [1, 4, 1],
'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [1, 2, 3],
'type': 'bar', 'name': u'Montréal'},
]
},responsive=True
),
]),
]),
]),
dcc.Tab(label='Tab two', children=[
dcc.Graph(
figure={
'data': [
{'x': [1, 2, 3], 'y': [1, 4, 1],
'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [1, 2, 3],
'type': 'bar', 'name': u'Montréal'},
]
},responsive=True
),
dcc.Graph(
figure={
'data': [
{'x': [1, 2, 3], 'y': [1, 4, 1],
'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [1, 2, 3],
'type': 'bar', 'name': u'Montréal'},
]
}
)
]),
dcc.Tab(label='Tab three', children=[
dcc.Graph(
figure={
'data': [
{'x': [1, 2, 3], 'y': [2, 4, 3],
'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [5, 4, 3],
'type': 'bar', 'name': u'Montréal'},
]
}
)
]),
]),
])
])
and this is the css code
.contenedor_pestaña_1 {
width: 100%;
/*max-width: 1000px;
margin: 0 auto;*/
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 20px;
}
.mini_container {
margin: 10px;
padding: 15px;
position: relative;
box-shadow: none;
border-radius: 5px;
border: 1px solid;
text-align: center;
}
.gaficas_1 {
grid-column: span 1;
border: 1px solid;
border-radius: 15px;
padding: 1rem;
}
@media only screen and (min-width: 500px) {
.contenedor_pestaña_1 {
grid-template-columns: 1fr 1fr;
}
.gaficas_1 {
grid-column: span 2;
border: 1px solid;
border-radius: 15px;
padding: 1rem;
}
}
@media only screen and (min-width: 850px) {
.contenedor_pestaña_1 {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
The full size view is OK, but the responsive mode view is
thanks for your help