Skip to content

Make graph height more responsive #1906

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
May 29, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion components/dash-core-components/src/fragments/Graph.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import numpy as np
import plotly.graph_objects as go
import pytest
import flaky

Expand Down Expand Up @@ -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(
Expand Down
Loading