Cannot get eCharts responsive feature to work

I have three carts in a table that I want to have auto resize if the window size changes, either by switching to a different size monitor or changing the browser size on the monitor.

According to the docs and this post : why my responsive chart option settings doesnt work

using addEventListener is the way to do it:

window.addEventListener('resize', function() {
                            myChart.resize();
                            });

However, when I change the window size, the chart size doesn't change until I refresh my screen (Safari on MacOS)

Code snippet:

<td class='drilldown'> 
                <div class ='center' id='main3' style='width: 30vw; height:30vh'></div>
                <!-- Prepare a DOM with a defined width and height for ECharts -->

                    <script type='text/javascript'>
                        // Initialize the echarts instance based on the prepared dom
                        var myChart = echarts.init(document.getElementById('main3'));
                        // Auto resize chart
                        window.addEventListener('resize', function() {
                            myChart.resize();
                            });
                        // Specify the configuration items and data for the chart

                        var option = {
                        title: {
                            text: 'Horizontal Bar',
                            left: 'center',

                        },
                        tooltip: {},
                        
                        legend: {
                            orient: 'vertical',
                            right: 'center',
                            top: 'bottom',
                            data: ['Sales']
                        },
                        xAxis: {
                            type: 'value'
                        },
                        yAxis: {
                            type: 'category',
                            data: ['Q1 23', 'Q2 23', 'Q3 23', 'Q4 23', 'Q1 24', 'Q2 24']
                        },
                        series: [
                            {
                            name: 'Sales',
                            type: 'bar',
                            data: [5, 20, 36, 10, 10, 20]
                            }
                        ]
                        };
                
                        // Display the chart using the configuration items and data just specified.
                        myChart.setOption(option);
                    </script>
                </td>  

Issue: I had all 3 charts called myCharts.

Solution: Once I named them myChart1, myChart2, and myChart3, resizing started working.