Membuat Grafik Dengan Chart.js

Membuat Grafik Dengan Chart.js adalah cara efektif untuk menampilkan data secara menarik di web menggunakan JavaScript modern dan performa tinggi.

Halo teman-teman, semoga kalian sehat dan semangat belajar front-end hari ini. Pada artikel ini kodelyly.com akan membahas langkah praktis, singkat, dan tepat sasaran agar kalian bisa langsung menghasilkan chart interaktif tanpa pusing konfigurasi yang rumit.

Membuat Grafik Dengan Chart.js

Persiapan Lingkungan

Chart.js adalah library visualisasi open-source yang ringan dan mudah digunakan. Kalian bisa memasangnya melalui CDN agar cepat dicoba di proyek mana pun.

<!-- Tambahkan sebelum penutup </body> -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Struktur HTML Dan Elemen Canvas

Siapkan elemen <canvas> sebagai wadah grafik. Kalian boleh menambah lebih dari satu chart dalam satu halaman.

<canvas id="salesChart" width="400" height="200"></canvas>
<canvas id="trendChart" width="400" height="200" style="margin-top:16px"></canvas>

Script Dasar: Bar Chart Dan Line Chart

Contoh berikut membuat dua grafik sekaligus: penjualan bulanan (bar) dan tren pengunjung (line).

<script>
  const labels = ["Jan","Feb","Mar","Apr","Mei","Jun","Jul"]; // label sumbu-X

  const salesData = {
    labels,
    datasets: [{
      label: "Penjualan (unit)",
      data: [120, 150, 180, 130, 220, 260, 210],
      backgroundColor: "rgba(54, 162, 235, 0.5)",
      borderColor: "rgb(54, 162, 235)",
      borderWidth: 1
    }]
  };

  const visitorsData = {
    labels,
    datasets: [{
      label: "Pengunjung (ribu)",
      data: [8, 9.5, 11, 10, 12.5, 14, 13.2],
      fill: false,
      borderColor: "rgb(255, 99, 132)",
      tension: 0.25
    }]
  };

  const salesCtx = document.getElementById("salesChart");
  const trendCtx = document.getElementById("trendChart");

  new Chart(salesCtx, {
    type: "bar",
    data: salesData,
    options: {
      responsive: true,
      plugins: {
        title: { display: true, text: "Penjualan Bulanan Kodelyly" },
        legend: { position: "top" }
      },
      scales: {
        y: { beginAtZero: true }
      }
    }
  });

  new Chart(trendCtx, {
    type: "line",
    data: visitorsData,
    options: {
      responsive: true,
      plugins: {
        title: { display: true, text: "Tren Pengunjung kodelyly.com" },
        legend: { position: "bottom" }
      }
    }
  });
</script>

Kustomisasi Penting Untuk SEO & UX

Kalian bisa menambah judul, tooltip, dan format angka agar grafik informatif serta ramah SEO. Gunakan plugins.title.text untuk judul yang kaya kata kunci, tooltip.callbacks untuk menampilkan satuan, dan ticks.callback pada scales untuk format nilai. Pastikan juga responsive: true agar grafik tampil rapi di layar mobile.

Tabel Perbandingan Tipe Grafik

Tips Produksi Singkat

1. Pisahkan data dari konfigurasi agar mudah dipelihara.
2. Cache atau ambil data via API hanya saat diperlukan untuk menjaga performa.
3. Gunakan warna yang kontras dan konsisten dengan brand Kode Lyly.

Kesimpulan

Membuat Grafik Dengan Chart.js dapat dilakukan dengan cepat: siapkan CDN, buat <canvas>, lalu instansiasi new Chart() dengan type, data, dan options. Dengan kustomisasi judul, tooltip, dan skala, grafik kalian akan informatif, responsif, serta ramah SEO untuk menampilkan insight data dengan jelas.

Sekian artikel dari kodelyly.com, semoga membantu kalian membangun visualisasi data yang cantik dan efektif. Jika butuh contoh lanjutan atau integrasi dengan API, tinggal bilang ya!