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>
