Width "spills" outside of container when chart is not right-aligned

đź“Š Plotly Python
1

I have noticed that when I try to align two charts side by side, and don’t specify a hardcoded with for the chart, any chart that is not aligned to the right edge of the screen will spill outside of its container as shown in the below picture.

image
image938Ă—386 10.3 KB

However, the width does appear to be properly defined as if you do something like go into inspect element and then exit out, basically forcing a “refresh” of the page constraints, the plot will behave as normal

image
image934Ă—390 6.28 KB

Any reason why this might be or how to fix it? Obviously it’s pretty inconvenient to only be able to have plots aligned to the right of the screen without obfuscating everything behind it. These plots are all created using plotly python and then saved to a div element which is rendered on an html page (more specifically a page within a Django app).

fig.update_layout(
            height=300,
            margin=dict(t=16, r=16, b=16, l=16),
            title=None,
            paper_bgcolor='rgba(0,0,0,0)',
            plot_bgcolor='rgba(0,0,0,0)'
        )
        graph = plotly.io.to_html(fig=fig, full_html=False)

<h3>Performance by Day of Week</h3>
    <div id="chart-wrapper">
    {{ daily_performance_graph|safe }}
</div>
2

I also wouldn’t mind a way within python to be able to specify a HTML container that it should be bounded by but I don’t believe there’s a way to do that either.

3

Bumping this post since it seems like it went under the radar.

4

HI @brld,

are both of the graphs in one html div? Did you try wrap each graph with a div and then stack those divs horizontally?

5

Both of the graphs share a common parent div but individually they also contain their own div containers which follow a flexbox 2 column stacking layout. Again, this works with everything except the graphs, and even works with the graphs if I open and close the inspector as shown in the second screenshot.

After looking into it a bit more I think what I’m looking for is a way to either understand the workings or find a way to manually trigger some sort of “relayout” event that occurs when the inspector panel is opened. When this happens I can see the widths of several divs including ones on the “main-svg” ids that change the width from 1700+ to ~800 pixels wide. Of course setting a manual width within the plotly layout options in python would somewhat solve this but that eliminates any chance of having a responsive width filled graph for different screen sizes.

    <div>
      ...
      <div id="chart-wrapper">
        {{ graph|safe }}
      </div>
    </div>
6

An example of the actual HTML of the graph being changed when the inspector is opened and closed. The difference in width is what appears to occur with no additional input from the user.

This is seemingly a pretty serious bug for this use case and I’m surprised I haven’t been able to find much other info in the way of reports on this topic.

image
image1757Ă—581 57.5 KB

image
image1287Ă—579 42.4 KB

7

EDIT:

Just did some more searching on the forum and came across this thread from 2016:

It appears to have an almost identical set of symptoms to mine and seems like it does stem from how flexbox handles sizing its children elements. However the troubling part to me is that this post is from 2016 and despite 30+ subsequent replies and multiple anecdotes confirming similar problems nothing appears to have been done about this. It seems like unfortunately while this forum shows decent response time and support for simpler issues, more longstanding and complex problems even from as early as 2016 seem to see no attention from the developers which, given how relatively simple of a test case this is, unfortunately may end up making this an unsuitable platform for my use case.

8

Hello @brld, unfortunately I’m not a web-dev so I can’t really help you. I use plotly in either dash apps or in jupyter notebooks.