Plot sizing problems

plotly.js
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.

2 Likes
32

Change the plot() to newPlot() and add the config in its parameters

var layout = {
  margin: { t: 0, l: 30, r: 0, b: 25 },
  showlegend: false, 
  autosize: true
};
var config = {
  responsive: true
};

Plotly.newPlot('first', [
  {
    y: [2,8,9]
  }
], layout, config);

Plotly.newPlot('second', [
  {
    y: [4,2,7]
  }
], layout, config);
```**strong text**