Iframe cuts off legend and axis labels

Okay, so after being stuck on this for 3 days, I finally figured it out. Of course I do thorough googling and searching before asking here and I had found this post before but couldn’t make sense of it as to how to apply it to my application. But he was correct all along.

The solution is, in fact, putting display: 'block', the question is just as to where. I tried a lot of things, even reloading from inside the Dash app, reloading from the React front-end, I put display:'block' in some places until I found the right one, which was

<Tab.Pane eventKey="dashboardTab" style={{display:'block'}}>
    <Dashboard />
</Tab.Pane>

since the app has React tabs. I had tried putting it in the CSS sheet before since I suspected this was the case, but nothing worked until I put this in the inline style. So yeah, this may be not be a generic solution but it may help you narrow down what the person in the aforementioned post was saying. So, big thanks to @jonkiky, I can finally rest easy.