Make graph height more responsive

components/dash-core-components/src/fragments/Graph.react.js

@@ -458,6 +458,27 @@ class PlotlyGraph extends Component {
  });
  }
 
+ getStyle() {
+ const {responsive} = this.props;
+ let {style} = this.props;
+
+ // When there is no forced responsive style, return the original style property
+ if (!responsive) {
+ return style;
+ }
+
+ // Otherwise, if the height is not set, we make the graph size equal to the parent one
+ if (!style) {
+ style = {};
+ }
+
+ if (!style.height) {
+ return Object.assign({height: '100%'}, style);
+ }
+
+ return style;
+ }
+
  componentDidMount() {
  const p = this.plot(this.props);
  this._queue = this.amendTraces(p, {}, this.props);
@@ -516,7 +537,8 @@ class PlotlyGraph extends Component {
  }
 
  render() {
- const {className, id, style} = this.props;
+ const {className, id} = this.props;
+ const style = this.getStyle();
 
  return (
  <LoadingElement

components/dash-core-components/tests/integration/graph/test_graph_responsive.py

@@ -1,3 +1,5 @@
+import numpy as np
+import plotly.graph_objects as go
 import pytest
 import flaky
 
@@ -138,8 +140,38 @@ def resize(n_clicks, style):
  assert dash_dcc.get_logs() == []
 
 
+def test_grrs002_responsive_parent_height(dash_dcc):
+ app = Dash(__name__, eager_loading=True)
+
+ x, y = np.random.uniform(size=50), np.random.uniform(size=50)
+
+ fig = go.Figure(
+ data=[go.Scattergl(x=x, y=y, mode="markers")],
+ layout=dict(margin=dict(l=0, r=0, t=0, b=0), height=600, width=600),
+ )
+
+ app.layout = html.Div(
+ dcc.Graph(
+ id="graph",
+ figure=fig,
+ responsive=True,
+ ),
+ style={"borderStyle": "solid", "height": 300, "width": 100},
+ )
+
+ dash_dcc.start_server(app)
+
+ wait.until(
+ lambda: dash_dcc.wait_for_element("#graph svg.main-svg").size.get("height", -1)
+ == 300,
+ 3,
+ )
+
+ assert dash_dcc.get_logs() == []
+
+
 @flaky.flaky(max_runs=3)
-def test_grrs002_graph(dash_dcc):
+def test_grrs003_graph(dash_dcc):
  app = Dash(__name__)
 
  app.layout = html.Div(