Is it better to return multiple graph objects or one div element?

[shwiftyRick]

I have an app with multiple graphs that are shown in the layout. Is it preferred to

1. define a bunch of dcc.Graph objects in the layout, and have the callback return each Figure, or
2. define one html.Div element in the layout, and in the callback wrap all of the graphs into one parent div and return that instead?

Or does it not matter? I ask because I am currently returning one parent div element from the callback (composed of child divs, each with a graph object within), and sometimes all of the plots render on the page, but sometimes some figures do not show at all (not rendered). When not all of the figures show, I don’t get a blank Figure, I just don’t see a Figure at all.

Has anyone else experienced this?

[Emil]

It shouldn’t matter. It sounds like there is an issue elsewhere.

[AIMPED]

Hi @shwiftyRick, do you run your app with debug=True? Does the callback take a long time to finish?

[shwiftyRick]

I do set degub=True, and there are no issues thrown. It does not take too long to finish.

Inspecting this with devtools, I was able to figure out that the plots are in fact on the page, but the layout is what is messed up (during such times when this occurs. Again, this does NOT happen all of the time. Sometimes the layout is exactly as it should be, but other times it isn’t.)

I was able to trigger the issue:

And then I forcefully hid that treemap, which revealed the other graph objects underneath it:

So when the layout does get messed up, it basically smashes all of the child divs on top of one another for some reason. Not sure how to re-code the app so that the layout is always obeyed.

FWIW, here is the expected layout, when the issue is not triggered and the layout appears as it should: