diff --git a/components/dash-core-components/src/fragments/Graph.react.js b/components/dash-core-components/src/fragments/Graph.react.js index 5d18304f8c..7039bf1035 100644 --- a/components/dash-core-components/src/fragments/Graph.react.js +++ b/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 (