Im used chart js and its type is Pie chart, everything is working well when I open the page like this : https://pasteboard.co/I5HolYQLFxvE.png

, but after changing one page to another like enter link description here,

the chart is disappear, like this enter link description here

I have no clue for this one, Can anyone figure it out? Your suggestion or solutions would really helpful

this is my script for 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>