Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Displaying graphs inside `html.Details`

See original GitHub issue

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

Issue Analytics

State:
Created 5 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

2reactions

chriskncommented, Sep 12, 2019

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.

0reactions

m-gankocommented, Dec 9, 2019

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.