ChartJS

//javascript
$(document).ready(function () {

    GetChartData();

    function GetChartData() {
        $.ajax({
            url: "<?php echo base_url('/tampilGrafik'); ?>",
            method: 'GET',
            dataType: 'json',
            success: function (data) {
              var label = [];
              var value = [];
              for (var i in data) {
                  label.push(data[i].tipe);
                  value.push(data[i].count);
              }
              const ctx = document.getElementById('myChart').getContext('2d');
              const myChart = new Chart(ctx, {

                type: 'bar',
                data: {
                    labels: label,
                    datasets: [{
                        label: 'Jumlah Lot',
                        data: value,
                        backgroundColor: [
                            "#0077B6",
                            "#EF233C",
                            "#8338EC",
                            "#E4C1F9",
                            "#FFD6FF",
                            "#57CC99",
                            "#8AC926",
                            "#99D98C",
                            "#D88C9A",
                            "#AED9E0",
                            "#B9FBC0",
                            "#9D4EDD",
                            "#70E000",
                            "#A9DEF9",
                            "#DEB887",
                            "#A9A9A9",
                            "#DC143C",
                            "#F4A460",
                            "#2E8B57",
                            "#1D7A46",
                            "#CDA776",
                            "#989898",
                            "#CB252B",
                            "#E39371",
                        ],
                        borderColor: [
                            "#264653",
                        ],
                        borderWidth: [1, 1, 1, 1, 1,1,1,1, 1, 1, 1,1,1]
                    }]
                },
                options: {
                    responsive: true,
                    title: {
                    display: true,
                    position: "top",
                    text: "Data pengecekan lot AX",
                    fontSize: 18,
                    fontColor: "#111"
                    },
                    legend: {
                    display: true,
                    position: "bottom",
                    labels: {
                        fontColor: "#333",
                        fontSize: 16
                    }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            suggestedMax: 12
                        }
                    },
                    layout: {
                        padding: 10
                    }
                }
            });

                //respondCanvas();
            }
        });
    };

});

//controller
public function grafik()
{
    $builder = $this->db->query('SELECT ch_name as tipe, ch_delivery as delivery, COUNT(ch_id) as count FROM tb_cek_harian WHERE ch_delivery = "2022-11-02" GROUP BY ch_name ORDER BY (ch_delivery) ASC');
    $chart = $builder->getResultArray();

    $data = [
        'title'             => 'Dashboard',
        'chart_data'        => $chart,
    ];
    echo json_encode($data);
}

//view
<div class="card-body">
    <canvas id="myChart"></canvas>
</div>