FQSoft - Alpinejs - Menggunakan Chartjs

Dokumnetasi ini saya buat karena saya mengalami error saat menggunakan chartjs di alipinejs dan bisa jadi kendala ini bisa muncul dengan atau tanpa alipinejs.

Pesan error yang muncul adalah "Maximum call stack size exceeded" dimana error ini muncul setiap ada perubahan data tanpa melibatkan reload page. Sehingga saat perubahan data berbasis ajax chartjs menganggap ada pembuatan double objek chartjs.

Sehingga solusinya adalah setiap ada perubahan data pada chart kita akan lakukan langkah ini :

Hapus objek yang lama
Membuat objek baru dengan setting yang sama
Kemudian masukkan yang data baru

Berikut contoh kodenya

<div x-data="prediksiComponent()" x-init="initChart()">
  <div class="bg-gray-50 p-6 rounded-lg shadow-inner">
    <p class="text-black pb-4 font-bold text-center">Chart JS</p>
    <canvas id="myChart" height="200"></canvas>
  </div>
</div>

<script>
  function prediksiComponent(){
    return {
      chart: null,
      dataChart: {
        labels: ['Suhu', 'Kelembaban', 'Cahaya'],
        datasets: [{
          label: 'Pengaruh',
          data: [0, 0, 0],
          backgroundColor: ['#6366F1', '#10B981', '#F59E0B'],
          borderRadius: 6,
        }]
      },
      updateChart(res) {
          this.dataChart.datasets[0].data = [
            res['suhu'],   // suhu
            res['kelembaban_tanah'],  // kelembaban
            res['intensitas_cahaya']  // cahaya
          ];
          this.chart.destroy();
          this.initChart();
      },
      initChart() {
          const ctx = document.getElementById('myChart').getContext('2d');
                
          if (this.chart) {
            this.chart.destroy();
          }

          this.chart = new window.Chart(ctx, {
            type: 'bar',
            data: this.dataChart,
            options: {
              responsive: true,
              plugins: {
                legend: { display: false }
              },
              scales: {
                y: { beginAtZero: true }
              }
            }
          });
        },
    }
  }
</script>

<div x-data="prediksiComponent()" x-init="initChart()">
  <div class="bg-gray-50 p-6 rounded-lg shadow-inner">
    <p class="text-black pb-4 font-bold text-center">Chart JS</p>
    <canvas id="myChart" height="200"></canvas>
  </div>
</div>

<script>
  function prediksiComponent(){
    return {
      chart: null,
      dataChart: {
        labels: ['Suhu', 'Kelembaban', 'Cahaya'],
        datasets: [{
          label: 'Pengaruh',
          data: [0, 0, 0],
          backgroundColor: ['#6366F1', '#10B981', '#F59E0B'],
          borderRadius: 6,
        }]
      },
      updateChart(res) {
          this.dataChart.datasets[0].data = [
            res['suhu'],   // suhu
            res['kelembaban_tanah'],  // kelembaban
            res['intensitas_cahaya']  // cahaya
          ];
          this.chart.destroy();
          this.initChart();
      },
      initChart() {
          const ctx = document.getElementById('myChart').getContext('2d');
                
          if (this.chart) {
            this.chart.destroy();
          }

          this.chart = new window.Chart(ctx, {
            type: 'bar',
            data: this.dataChart,
            options: {
              responsive: true,
              plugins: {
                legend: { display: false }
              },
              scales: {
                y: { beginAtZero: true }
              }
            }
          });
        },
    }
  }
</script>

Keterangan

initChart() : Berfungsi untuk menampilkan chart saat page pertama kali diakses tapi tentu saja dengan data kosong. di awal ada if untuk memastikan jika sudah ada objek chart maka di destroy dulu
updateChart() : mengambil data baru dari server. lalu destroy objek lama. dan panggil fuction initChart untuk recreate objek chart
Jika menggunakan alpinejs pastikan variabel chart dan dataChart berada di scope alpinejs sehingga bisa diakses di semua function dengan this

Blog FQSoft

Alpinejs - Menggunakan Chartjs

Fahim