Display:none mess up plot ly's graph

#1

Here is code example

https://jsfiddle.net/2pc1h4v0/

When I have display:none, plot ly will act really weird, if I get rid of that, it will work.
Is there a way I can hide those graph first than display them? Not like display them all first then when click happen hide the rest?

#2

By setting the height and width of the your divs in px, I think I got the results you’re looking for: https://jsfiddle.net/2pc1h4v0/3/

Can you confirm?

#3

Yeah, but why is that? Also, I really want in % not px, is there a way? Because different pc has different resolutions so most of the time px will be a bad idea, right?

#4

Is there any way to achieve this when setting the width to 100%? As @greggshao said this would be great for dynamic plot sizes. This would also allow you to use the bootstrap grid system on hidden divs.