Chart.js: Menampilkan label pada chart dengan chartjs-plugin-datalabels - Irman Firmansyah

Contoh script penggunaan chartjs-plugin-datalabels di Chart.js untuk menampilkan label pada chart

<!-- Elemen untuk chart nya -->
<canvas id="myChart"></canvas>

<!-- include JS nya -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: @json($labels),
            datasets: [{
                label: 'Total Penjualan',
                data: @json($data),
                backgroundColor: 'rgba(75, 192, 192, 0.8)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value, index, values) {
                            if (Number.isInteger(value)) {
                                return value.toString();
                            }
                        }
                    },
                    suggestedMax: Math.max.apply(null, @json($data)) + 100000
                }
            },
            plugins: {
                datalabels: {
                    anchor: 'end',
                    align: 'start',
                    formatter: function(value, context) {
                        // untuk pemisah ribuan
                        return value.toLocaleString();
                    },
                    color: 'black',
                    clamp: true,
                    display: function(context) {
                        var chart = context.chart;
                        var yScale = chart.scales.y;

                        var barTopPosition = yScale.getPixelForValue(context.dataset.data[context.dataIndex]);
                        var barBottomPosition = yScale.getPixelForValue(0);

                        var barHeight = barBottomPosition - barTopPosition;

                        return barHeight > 20;
                    }
                }
            }
        },
        plugins: [ChartDataLabels]
    });
</script>

• @json merupakan blade directive Laravel untuk parse array menjadi format JSON
• $labels adalah array tunggal berisi data tanggal
• $data berisi angka (total penjualan) dari tiap tanggal yang ada di labels
• ticks pada sumbu y untuk menampilkan hanya nilai-nilai bilangan bulat, jadi tidak ada koma
• suggestedMax untuk menambahkan panjang sumbu y menjadi ada jarak, karena nilainya berupa uang jadi ditambah 100000, jadi jika ada nilai maksimal tidak mentok sampai ke ujung chart nya
• clamp dan display pada plugin untuk menampilkan label hanya jika masih ada space minimal 20 px, jika space nya dibawah itu, labelnya auto hide

Contoh controller di Laravel untuk mengambil data tanggal pada variabel $labels dan totalnya pada variabel $data

$tgl_penjualan = Penjualan::selectRaw('DATE(tanggal) as tanggal, SUM(total) as total')
    ->whereMonth('tanggal', $bulan)
    ->whereYear('tanggal', $tahun)
    ->groupBy('tanggal')
    ->orderBy('tanggal', 'asc')
    ->get();

$labels = $tgl_penjualan->pluck('tanggal')->toArray();
$data = $tgl_penjualan->pluck('total')->map(function ($total) {
    return (int) $total; // Pastikan total dalam bentuk integer
})->toArray();

$formattedLabels = array_map(function ($label) {
    return Carbon::parse($label)->format('d-m-Y'); // Ubah format menjadi dd-mm-yyyy
}, $labels);

$labels = $formattedLabels;

Referensi:

• www.chartjs.org/docs/latest
• chartjs-plugin-datalabels.netlify.app