I have implemented echart line and bar charts for my laravel project. I am using livewire with alpine js to show the chart. Chart shows up with the data I am passing but there is few problems. The tooltip axis doesnt shows up and resize also doesnt work. What am I missing or am i doing it in a wrong way? I am slightly new to livewire alpine setup. Is the binding between alpine and livewire casuing some issues?? I dont seem to find the answer. I am using echart version 5.3.3

I tried rendering just a simple chart. yes the chart shows up but same problem. Tooltip axis and resize arent working. I have passed trigger axis and have attached resize event listener.

This is my barchart implementation which is inside parent div x-init

showBarChart() {
                console.log('Initializing bar chart...');
                this.$nextTick(() => {
                    const chartContainer = document.getElementById('bar-chart');
                    console.log(chartContainer);
        
                    if (!chartContainer || chartContainer.offsetWidth === 0 || chartContainer.offsetHeight === 0) {
                        console.error('Invalid chart container dimensions.');
                        return;
                    }
        
                    if (!this.barChart) {
                        this.barChart = echarts.init(chartContainer);
                    }
        
        
        
        
                    const categories = this.selectedRows.map(row => row.ad_name);
                    const seriesData = this.selectedColumns.map(column => ({
                        name: column.name || 'Unnamed Column',
                        type: 'bar',
                        barGap: 0,
                        emphasis: { focus: 'series' },
                        data: this.selectedRows.map(row => row[column.id] || 0),
                    }));
        
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: { type: 'shadow' },
        
                        },
                        grid: {
                            left: '0%',
                            right: '0%',
                            bottom: '0%',
                            top: '10%',
                            containLabel: true,
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                restore: { show: true },
                            },
                        },
                        legend: {
                            data: seriesData.map(series => series.name),
                        },
                        xAxis: [{
                            type: 'category',
                            axisTick: { alignWithLabel: true },
                            axisLabel: {
                                formatter: (value) => value.length > 5 ? `${value.slice(0, 5)}...` : value,
        
                            },
                            data: categories
                        }],
                        yAxis: [{ type: 'value' }],
                        series: seriesData,
                    };
        
                    this.barChart.setOption(option, true);
                    // Resize chart when window is resized
                    window.addEventListener('resize', () => {
                        this.barChart.resize();
                    });
        
                });
            }

And this is where I am calling it

<!-- Bar chart -->
                            <div x-cloak
                                x-show="selectedRows.length > 0 && selectedColumns.length > 0 && selectedOption==='bar'"
                                style="width:100%; height:50vh; padding:1rem;" wire:ignore
                                x-effect="
                                if (selectedColumns.length > 0 && selectedRows.length>0 && selectedOption==='bar') {
                                    showBarChart();
                                }">
                                <div id="bar-chart" style="width: 100%; height: 100%;"></div>
                            </div>