ChartJS: Membuat Grafik Responsive Auto Hide Label Jika Mobile

Irman Firmansyah

Membuat grafik responsive dan bisa auto hide label jika tampilan mobile dengan ChartJS dan PHP

Saat tampilan desktop, label x dan y nya lengkap ditampilkan semua, tapi saat diakses versi mobile, label x dan label y nya auto hide jadi tampilan grafiknya lebih full

Selain itu, bisa membuat dan menampilkan banyak chart dalam satu halaman

PHP

Contoh bagian PHP untuk get data dalam bentuk array

$grafik_label1 = array_column($penjualan, 'tanggal');
$grafik_data1 = array_column($penjualan, 'total');

// CodeIgniter atau Laravel
$data['grafik_label1'] = $grafik_label1;
$data['grafik_data1'] = $grafik_data1;
  • $grafik_label1 merupakan array tunggal berisi daftar tanggal, contoh ['2024-05-01','2024-05-02','2024-05-03']
  • $grafik_data1 bertipe sama berisi daftar total penjualan, contoh ['1250000','500000','1000000']

View

<div class="card">
    <div class="card-body">
        <h3 class="text-center">Grafik Penjualan</h3>
        <canvas id="chart_penjualan"></canvas>
    </div>
</div>

<!-- include ChartJS CDN -->
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    function isMobile() {
        return window.innerWidth <= 768;
    }

    // fungsi untuk membuat chart
    function createChart(chartId, chartTitle, labels, data, backgroundColor, borderColor) {
        var ctx = document.getElementById(chartId).getContext('2d');

        var commonOptions = {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    // Label y tanpa nilai desimal
                    ticks: {
                        callback: function(value, index, values) {
                            if (Number.isInteger(value)) {
                                return value.toString();
                            }
                        }
                    },
                     // Label y nilai max ditambah jadi tidak mentok
                    suggestedMax: Math.max.apply(null, data) + 5
                },
                x: {
                    beginAtZero: true
                }
            }
        };

        // set option berdasarkan layar
        // saat mobile bisa diset x atau y yang dihide, atau keduanya
        function updateOptionsForScreenSize() {
            if (isMobile()) {
                commonOptions.scales.y.display = false;
                commonOptions.scales.x.display = false;
            } else {
                commonOptions.scales.y.display = true;
                commonOptions.scales.x.display = true;
            }
        }

        updateOptionsForScreenSize();

        var chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: chartTitle,
                    data: data,
                    backgroundColor: backgroundColor,
                    borderColor: borderColor,
                    borderWidth: 1
                }]
            },
            options: commonOptions
        });

        // event resize windows
        window.addEventListener('resize', function() {
            chart.destroy();

            updateOptionsForScreenSize();

            chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: chartTitle,
                        data: data,
                        backgroundColor: backgroundColor,
                        borderColor: borderColor,
                        borderWidth: 1
                    }]
                },
                options: commonOptions
            });
        });

        return chart;
    }

    // pembuatan chart
    var chart1 = createChart(
        'chart_penjualan',
        'Total Penjualan',
        <?= json_encode($grafik_label1) ?>,
        <?= json_encode($grafik_data1) ?>,
        'rgba(75, 192, 192, 0.8)',
        'rgba(75, 192, 192, 1)'
    );

    // jika ada lebih dari satu chart bisa dibikin lagi, contoh
    var chart2 = createChart(
        'chart_keuntungan',
        'Total Keuntungan',
        <?= json_encode($grafik_label2) ?>,
        <?= json_encode($grafik_data2) ?>,
        'rgba(144, 238, 144, 0.8)',
        'rgba(144, 238, 144, 1)'
    );
</script>