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

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

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**
33 
 the following setup did both width and height auto adjustment in flex container


    <div class="columns" >
        <div id="chartDiv" style="width:auto; height: 100%">
        </div>
    </div>

  var layout = {

                title: 'chart'

                autosize: true,
                //width: 1070,
                //height: 685,
                margin: {
                    l: 200,
                    r: 100,
                    t: 100,
                    b: 120,
                    pad: 10
                },

Plotly.newPlot('chartDiv', data, layout);
34

I have code that works in Python and is the basis of issue #5591. Consider the following Python Plotly code:

The necessary steps are to:

#specify autosize True and height None
fig.update_layout(autosize=True, height=None, )
...
# set responsive to True
fig.to_html(full_html=False, config=dict(responsive=True))
...

# and then set the desired vertical height in the HTML <div> tag after removing the <div> tag that plotly includes by default
<div style="height: 80vh;">'+fig_html2[5:-6]+"</div>"

import plotly.express as px
from jinja2 import Template
import os

data_canada = px.data.gapminder().query("country == 'Canada'")
fig = px.bar(data_canada, x='year', y='pop')

fig.update_layout(autosize=True, height=None, )

os.chdir(r"D:\responsive_plotly_scratchwork")
output_html_path=r"bug.html"
input_template_path = r"bug.jinja"

#issue to_html twice to obtain different IDs; otherwise only one will display
fig_html1 = fig.to_html(full_html=False, config=dict(responsive=True))
fig_html2 = fig.to_html(full_html=False, config=dict(responsive=True))
#confirm that string[5:-6] strips off <div> and </div>
print("<div>test</div>"[5:-6])

# fig_vh_in_immediate_div SCALES CORRECTLY
# fig_vh_in_containing_div does not scale correctly; proving the necessity of stripping the leading <div>
plotly_jinja_data = {"fig_vh_in_containing_div":'<div style="height: 80vh;">'+fig_html1+"</div>",
                     "fig_vh_in_immediate_div":'<div style="height: 80vh;">'+fig_html2[5:-6]+"</div>"}
#consider also defining the include_plotlyjs parameter to point to an external Plotly.js as described above

with open(output_html_path, "w", encoding="utf-8") as output_file:
    with open(input_template_path) as template_file:
        j2_template = Template(template_file.read())
        output_file.write(j2_template.render(plotly_jinja_data))

which references the following jinja template

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />   <!--It is necessary to use the UTF-8 encoding with plotly graphics to get e.g. negative signs to render correctly -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
<h1>Here's a Plotly graph!</h1>

These figs should both be 80% of the screen's vertical height, but only the second one is.
{{ fig_vh_in_containing_div }}
{{ fig_vh_in_immediate_div }}
<p>And here's some text after the graph.</p>
</body>
</html>

Plotly.js is not height responsive · Issue #5270 · plotly/plotly.js is relevant, but cryptic. I’d welcome a working example based on that post. Have I missed some other way to achieve the same results as stripping the

tag from the .to_html output?