Chart sizes/responds correctly only when minimizing-maximizing screen

plotly.js
1

Hi,

Hoping to get some kind help. I have seen that this issue has come up a few times around different forums, however I haven’t seen any recent solutions.

I have rendered a chart to HTML and everything looks fine. I have set the layout autosize correctly autosize: true using js. However, when the page loads the charts either take up only half the <div> or completely overflow/exceed the div. When I minimize the screen to a mobile view and then maximize it again, the chart then is displayed correctly, taking up the full width of the div. I cannot figure out why, obviously I want the chart to display full width. See below before and after:

Screenshot of div when page is freshly loaded.
Picture1

After minimizing and then maximizing screen - you can see it takes up the full width as desired
Picture2

Current Config:

var layout= {
            xaxis: {
                title: {
                    text: 'X Axis Title',
                },
                automargin: true
            },
            yaxis: {
                title: {
                    text: 'Y Axis Title',
                },
                automargin: true
            },
            autosize: true,
            paper_bgcolor: "#00000000",
            plot_bgcolor: "#00000000"
        }
        
        Plotly.newPlot('chart_div', data, layout, {responsive: true});

EDIT: Just discovered that this only happens when the <div> is in a collapsible, show/hide, or tab panel. Again, a few threads touched on this but I haven’t come across any new solutions yet so if anyone has leads or solutions, it would be greatly appreciated.