Displaying graphs inside `html.Details`

[chriddyp]

If a graph is embedded in html.Details, it can't determine it's size: https://community.plot.ly/t/plotly-resize-bug-using-html-details-and-width-100/11201/3?u=chriddyp

[chriddyp]

Related discussion plotly/plotly.js#2769, https://community.plot.ly/t/how-to-force-dcc-graph-to-resize/14852/4

[MissingL-tter]

Recently encountered a similar issue in my app. I have a button that hides one of the graphs on my dashboard and if the window is resized while the containing div is hidden, the graph isn't resized and looks very poor when setting the div back to visible.

Reading through the discussions I wonder if it would be possible to call resize whenever the visibility of a graph changes. It may be possible using something like HTML's IntersectionObserver.

[lockbake]

I'm also seeing this in my app, I don't want to manually specify the size as I want the dashboard to be responsive across devices, hence it would be great if a plan could be put in place to resolve this.

[chriskn]

I had the same issue. This javascript snipped fixed it for me. It fires a resize event everytime the user clicks on the document:

document.addEventListener("click", function(){
    window.dispatchEvent(new Event('resize'));
  }); 

Put it into a js file in the assets folder.
You can attach the event to an element suitable for your usecase.

[m-ganko]

Thanks @chriskn, your solution works with graphs size. But I have an issue with legend. When it is placed at the bottom of graph, when I open Details element, legend is overlapping x axis:

When I double click on one of the legend names it goes to the right place.

My legend params are: legend_orientation="h", legend=dict(x=0.5, y=-.1, xanchor='center'). When I load them outside of Details element everything is fine.