Cara Bikin Grafik di Website – Arbi Pramana

Berikut ini adalah hasil dari grafik bar-chart yang akan dibuat :

Untuk membuat grafik seperti gambar di atas, kamu bisa ikuti code di bawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>Bar Chart dengan Chart.js</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" style="width:500px;height:500px;"></canvas>

    <script>
        // Data untuk chart
        var data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun"],
            datasets: [{
                label: "Penjualan",
                backgroundColor: "rgba(75, 192, 192)",
                borderWidth: 1,
                data: [120, 150, 180, 90, 200, 175],
            }]
        };

        // Konfigurasi untuk chart js
        var options = {
            responsive: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        };

        // Blok kode untuk menjalankan chart js dan mengarahkan ke id myChart
        var ctx = document.getElementById("myChart").getContext("2d");
        var myChart = new Chart(ctx, {
            type: "bar",
            data: data,
            options: options
        });
    </script>
</body>
</html>

Pada tag <head> terdapat script ini <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Script ini digunakan untuk mengimport library chart js

Tag <canvas> ini digunakan untuk menampilkan grafik yang dibuat oleh chart js, dan jangan lupa untuk menambahkan id

<canvas id="myChart" style="width:500px;height:500px;"></canvas>

Terakhir, kamu tinggal masukan masukan code javascriptnya

<script>
        // Data yang akan di tampilkan pada chart
        var data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun"],
            datasets: [{
                label: "Penjualan",
                backgroundColor: "rgba(75, 192, 192)",
                borderWidth: 1,
                data: [120, 150, 180, 90, 200, 175],
            }]
        };

        // Konfigurasi untuk chart js
        var options = {
            responsive: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        };

        // Blok kode untuk menjalankan chart js dan mengarahkan ke id myChart
        var ctx = document.getElementById("myChart").getContext("2d");
        var myChart = new Chart(ctx, {
            type: "bar",
            data: data,
            options: options
        });
    </script>