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_table
s
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',
})