Utilizo el gráfico js y su tipo es gráfico circular, todo funciona bien cuando abro la página de esta manera: https://pasteboard.co/I5HolYQLFxvE.png

, pero después de cambiar una página a otra como ingrese la descripción del enlace aquí ,

el gráfico desaparece, así ingrese la descripción del enlace aquí

No tengo idea de esto, ¿alguien puede resolverlo? Su sugerencia o soluciones serían realmente útiles.

este es mi script para chart js

 <script type="text/javascript"> document.addEventListener('livewire:load', function () { var ctx = document.getElementById("dashboardChart"); ctx.width = 300; ctx.height = 300; if ( {{ $data[1]->percentage; }} == 0 && {{ $data[2]->percentage; }} == 0 && {{ $data[3]->percentage; }} == 0 && {{ $data[4]->percentage; }} == 0 ) { var datas = [ 100 ] var bgColor = "#f2f2f2"; var labelss = ["No Coaching"]; }else{ var datas = [ {{ $data[1]->percentage; }} , {{ $data[2]->percentage; }} , {{ $data[3]->percentage; }}, {{ $data[4]->percentage; }} ]; var bgColor = [ "#fc8181", "#f6ad55", "#7555f6", "#3498db" ]; var labelss = ["Completed coaching", "Running coaching", "Waiting for agenda", "Waiting for approval"]; } var myChart = new Chart(ctx, { type: 'pie', data: { labels: labelss, datasets: [{ data: datas, backgroundColor: bgColor }] }, options: { tooltips: { enabled: true, mode: 'single', callbacks: { label: function(tooltipItem, data) { var allData = data.datasets[tooltipItem.datasetIndex].data; var tooltipLabel = data.labels[tooltipItem.index]; var tooltipData = allData[tooltipItem.index]; return tooltipLabel + ": " + tooltipData + "%"; } } }, plugins: { datalabels: { color: '#fff', display: false, }, }, // title: { // display: true, // text: 'All Coaching Data' // }, responsive: true, legend: { position: 'bottom', labels: { boxWidth: 20, padding: 20 } } } }); }); </script>