Merge pull request #1906 from nickmelnikov82/make-graph-height-more-responsive

Make graph height more responsive

Author: T4rk1n

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(