Plot sizing problems

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.

I had hoped that taking a hint from https://plot.ly/javascript/responsive-fluid-layout/ (but using 100% rather than 100vh) would help. It didn’t.

How do I make Plotly respect (and fill) the dimensions of it’s container? Fixed dimensions isn’t an option.

Interesting. Would you mind sharing a reproducible example to help us debug?

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.

Interesting. Would you mind sharing a reproducible example to help us debug?

This Codepen shows the behaviour.

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.

Hi @chris , sorry for not responding sooner.

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.

In the meantime, you might want to have a look at https://plot.ly/javascript/responsive-fluid-layout/ if you haven’t already.

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:

  1. Layout is initially wrong (top chart doesn’t fill its div, and that div is already taller than desired.
  2. Expanding the window height causes the two charts to correctly fill their divs.
  3. 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.
  4. Either a window width increase or decrease causes the same effects as #3.

Was this issue ever resolved? I’m seeing the same thing - plot height on load is 450px, no matter what the container size.

No.
I’d like to thing support is better on a paid plan, but my experiences with this forum and the documentation did not convince me to invest.

Ok, thanks. I’ll try calculating the container height based on window size. Did you log an issue on github?

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:

2 Likes

I am having the same problem, its pretty frustrating, because making a web-based 3d-graph is the reason i invested in plotly/dash.

What i can add, that the 450 px shows up in the dom in svg elements:

<div class="svg-container" style="position: relative; width: 2932.92px; height: 450px;"><svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2932.92" height="450" style="background: rgb(255, 255, 255);">

and

<svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2932.92" height="450" style="background: rgb(255, 255, 255);"><defs id="defs-37bd53"><g class="gradients">

If i change the 450 to something bigger manually, the graph follows suit.

btw: a bug is a bug and @chris went through the trouble of reproducing it.

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);
    }
  };
  })();

my HTML:

<div id='outerdiv' style='display: flex;flex-direction: column; height: 100vh'>
    <div id='header' style='height: 20px; background:red'>foo</div>
    <div id='content' style='flex:1; background: white'></div>
    <div id='footer' style='height: 20px; background:blue'>baz</div>
</div>
2 Likes

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?

image

Hello, Gennadiy, wondering if you’ve found an answer - my dcc.Graph is also stuck at 450px, which is frustrating. Thanks!

Prom3theus,

Hi, try this: you can hardcode the height as CSS style to 920 for example:

dcc.Graph(id=‘chart-graph’, style={‘margin-top’: ‘0’, ‘height’: 920} )

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.

Also see my post here: Can't seem to change default Height on Graph

@Prom3theus - Nikita see Chris’s response here: Can’t seem to change default Height on Graph

The viewport height in CSS seems to be the trick to solve this.

eponym’s code worked perfectly for me using a css grid layout.