Plot sizing problems

plotly.js
12

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
13

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.

14

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
15

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

16

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

17

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.

18

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

19

@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.

20

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

21

I was able to get plotly to correctly size the graph by setting the height of the parent divs (div.js-plotly-plot and div.plot-container) that plotly wraps div.svg-container with.

22

Hi Danvallentyne,
Can you please post your code.

23

I set the height of the containers via CSS.

.js-plotly-plot,
.plot-container {
          height: 44vh
}
2 Likes
24

Why is it so complicate to resize a canvas? I mean, it should have a simple way/parameter to do that. I am totally beginner on using it and I have no idea how to make my element fit the space that I reserved for it…is quite frustrating.

2 Likes
25
1 Like
26

Awesome! This worked

27

danvallentyne’s solution doesnt works with % for me. I need to size the container relative to the parent. Any ideas about this?

28

I am also struggling with this issue. I would like to be able to use CSS Flexbox or CSS Grid and have the plotly.js plot fill the entire div element automagically, but this does not seem to be the case. I’ve been able to provide a hack by providing the exact pixel height but it’s an awkward ordeal with the dynamic interaction I had planned.

29

It’s 2021, and I still experience the problem described by Chris back in 2016. If I try autosize, or responsive, the SVG graph tends to break out beyond the container boundaries.

This thread has 66k+ views. That really tells us something: this really needs some work Plotly team!

30

I didn’t read the whole thread, but a common pitfall when using flex layout and plot libraries (I’ve encountered the same issue with highcharts) is that the plot libraries usually set a fixed size after rendering. By default the flex layout wont shrink it’s children beyond their min width/height: javascript - Flex items not shrinking when window gets smaller - Stack Overflow

31

I’ve been using plotly for years, and for year have struggled with this issue. At this point, it’s a non-negotiable for me and I will have to abandon plotly because of this issue.

The current strategy does not work. We need to be able to set the height and width using view height or % of parent, not just pixels.

1 Like