Chris,
Let me confirm today, but I thought classes that are defined in CSS are also being overwritten. Since the workaround requires passing the style directly into dcc.graph, a local, static CSS file can’t be used for styling. Does that seem correct?
This shouldn’t be the case. I just tried with this example:
import dash
import dash_core_components as dcc
app = dash.Dash()
app.layout = dcc.Graph(
id='graph',
className='my-class',
figure={'data': [{'x': [1, 2, 3]}]}
)
if __name__ == '__main__':
app.run_server(debug=True)
Good.
I’ll retry today. My CSS file is likely just foobar. Thanks so much for checking, I got tied up in meetings all yesterday afternoon.
Also, this resource you created is incredibly useful: https://github.com/plotly/dash-recipes. I’ve used it many times.
I think it would be great if there was a link to the dash-recipes repo in the Dash User guide. If it’s already there, then sorry for overlooking it.
Mike
1 Like
It seems that the current version will only accept an integer or float for height… how can we achieve the same goal in the current version?
Hi Chris, I tried to use mpl_to_plotly but then the figure does not seem to be responsive. If I use change the figure attribute of dcc.Graph with your example, it works as expected. Then I guess this is not coming from my code. Is this a current limitation?
Dear all,
in reference to Can't seem to change default Height on Graph
My understanding is that dash graphs currently respect the parent’s width but not height. See below minimal example. The referenced issue (https://github.com/plotly/plotly.js/issues/106) is still open, so I am assuming this has not been fixed yet.
I would like to build a CSS grid and place graphs in grid elements. What is the recommended way to this at the moment? Especially the following line of CSS seems impossible right now:
grid-template-rows: 15vh 50vh 20vh 8vh;
Somehow the row height in the CSS definition would need to be “synced” with the graph style property height. When I look around, most examples use a fixed height which seems quite suboptimal to me.
Any thoughts/best practices?
Best,
Benjamin
PS The same issue seems to exist for data_tables
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
graph = dcc.Graph(
id='example-graph',
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montral'},
],
'layout': {
'title': 'Dash Data Visualization'
},
},
style={
# turn off settings in graph container
# 'width': '90vh',
# 'height': '50vh'
}
)
app.layout = html.Div(children=[
graph
], style={
# not respected by graph
'height': '10vh',
# respected by graph
'width': '50vw',
})
From my answer above:
You just need to set the height on the actual Graph div, not the parent. Can you not do that in this case?
1 Like
Looking at this issue again, it seems like the “issue” is just inheritance. By default, the graph component isn’t “inheriting” the parent div’s height.
So, this won’t work:
html.Div([
html.Div(style={'height': '50vh'}, children=dcc.Graph(figure={
'data': [{
'x': [1, 2, 3],
'y': [3, 1, 2]
}]
}, style={})),
])
but this will work:
html.Div([
html.Div(style={'height': '50vh'}, children=dcc.Graph(figure={
'data': [{
'x': [1, 2, 3],
'y': [3, 1, 2]
}]
}, style={'height': 'inherit'})),
])
4 Likes
Yes you are right, that solves the “issue”. So thanks a lot for this!
I am actually trying to work with CSS grid layout. I tried using inherit but it does not explicitly set the height of the div and so there is nothing to be inherited.
I will open a separate topic for this.
1 Like
Chris, this is highly relevant and important information. (that is, your post Can't seem to change default Height on Graph)
Would it be an idea to move this into the official documentation? It took me a while to find this post.
Thanks for this @chriddyp
1 Like
After a few days I finally stumbled upon this post, which fixed my issue. Thanks.
I was advised to use dash-bootstrap-components. However, while this package has nice row and column layout, it also suffers from a problem with height! So many examples show us nice colored boxes that obey relative height designations such as 50%. But once you put a ddc.Graph inside, it fails - the graph insists on height=“450px”.
I have not been able to get any satisfaction with the suggested style={‘height’: ‘inherit’}.
We need real world examples, not colored boxes.
Still not resolved. I tried to use dbc (dash-bootstrap-components). I was able to get much closer to what I wanted, but ultimately the dbc devs agreed with me that the problem comes back to plotly/dash. You can follow the dbc discussion: https://github.com/facultyai/dash-bootstrap-components/issues/382
I want a 2x2 grid of plots. I decided that the top row could be 75% height and the bottom is 25%. dbc easily creates a 2x2 grid Container. The problem is that the even though padding, border and margin are zero height, the graph within the 25% bottom row is incredibly squished. When I measure with a ruler it appears that the two graphs are approximately 25% height of their row! So it seems that plotly/dash has a bug. Won’t someone please help?
I posted code in dbc discussion and someone kindly created a gist. Below you can see the result and can clearly see the problem with the bottom row (note: I changed the graph title position in the two graphs).
2 Likes
Thanks for the solution
Just link script.js with following:
window.onload = function() {
setTimeout(function() {
var all = document.getElementsByClassName(‘user-select-none svg-container’);
all[0].style.height = ‘100vh’;
}, 2000);
}