I am trying to arrange two charts on a page, dynamically sized to suit the available screen space. The first chart should be ~25% of the screen height. Between the charts, there is a fixed-height strip containing some buttons. The remainder of the screen should be used by the second chart. I have arranged via CSS flex layout for the container divs to behave as intended. As soon as I introduce a Plotly chart, the sizing is disrupted, seemingly no matter what hints I give to Plotly.
From my observations, these are equivalent:
layout.autosize = undefined
layout.autosize: “initial”
As are these:
layout.autosize = true
layout.autosize = false
It’s not clear what factors influences the autosizing algorithm. When autosize comes into play, it seems to always pick a height of 450px (which equates to a size greater than the parent div) and a width of 700px (which is less than the parent div). With autosize off, the width expands to fill the parent, but the height also clings to 450px.
With layout.autosize: true, the plot should fill us the whole graph div. Maybe something is up with how our autosize routine and a CSS flew layout interact? Thanks for writing in.
Apologies for the delay in responding etienne, I’ve been away from the office all of last week. I will endeavour to produce a small, self-contained example that demostrates the issue.
With autosize not set, the width of the containing div is correctly consumed, but how the height is derived isn’t clear. Setting autosize: true stops the width being correct and causes the height to expand, breaking the layout.
Removing the two Plotly.plot(…) statements allows the desired layout to show itself.
(Replying directly to etienne rather than the topic as a whole as I’m not sure which actions causes notifications to be sent and I’m still very much stuck with this problem).
I’ve added a CodePen that illustrates the problem.
I’ve been trying to write a good explanation of what’s going here, but to no avail yet. It’s the first time I’ve experimented plotly.js in a flex layout. I think something is up with our autosize routine, but I’m not 100% what exactly.
I had seen that link (see my first comment), but I have switched to flex layout since the original posting so I just revisited it. In some ways it’s now closer to what I was hoping for (see this CodePen).
For me (Chrome on Windows 7), I see:
Layout is initially wrong (top chart doesn’t fill its div, and that div is already taller than desired.
Expanding the window height causes the two charts to correctly fill their divs.
Any height reduction causes the top chart and div to grow by a small number of pixels. The bottom div does not shrink, so bursts out of the containing div.
Either a window width increase or decrease causes the same effects as #3.
Hey @chris , plotly.js authors provide help here on a mostly volunteer basis. The point of the developer support plans is to guarantee <24h responses and code solutions including quick plotly.js updates if needed. We can’t help out every single plotly.js developer, so use the support plans to prioritize:
I used the following to work around the bug (i.e. chart not resizing properly when window height reduced) - in my case the chart is in div#content, and I want it to be 40px shorter than full window due to header and footer. After calling Plots.resize() I check dimensions, and if not correct I set myself and call Plots.resize() again:
(function() {
var d3 = Plotly.d3;
var gd3 = d3.select("div[id='content']");
var gd = gd3.node();
Plotly.plot(gd, [{
type: 'bar',
x: [1, 2, 3, 4],
y: [5, 10, 2, 8],
marker: {
color: '#C8A2C8',
line: {
width: 2.5
}
}
}], {
title: 'Auto-Resize',
font: {
size: 16
}
});
window.onresize = function() {
Plotly.Plots.resize(gd);
var window_height = window.innerHeight;
var content_div_height = document.getElementById('content').offsetHeight;
// workaround for bug in Plotly: when flexbox container gets smaller, graph does not shrink
if (content_div_height > (window_height - 40)) {
var svg_container = document.getElementById('content').getElementsByClassName('plot-container')[0].getElementsByClassName('svg-container')[0];
svg_container.style.height = (window_height - 40) + 'px';
Plotly.Plots.resize(gd);
}
};
})();
I am having same problem with spitting out a dcc.Graph through python Dash code
and don’t know how to change the default 450px height on the chart. None of the settings I tried worked.
For your workaround you give JS code.
How do I translate it to python or how should it related to the python code?
I still haven’t found solution for dynamic height re-layout. Seems like there is a bug in some layer where width is being dynamically re-layouted but height is not. Let me know if that worked for you or if you find a better dynamic relayout solution.
