let transactionByBarberCtx = document.getElementById('transactionByBarberChart').getContext('2d');

let transactionByBarberLabels = transactionByBarber.map(transactionByBarber => transactionByBarber.biography.full_name);
let transactionByBarberData = transactionByBarber.map(transactionByBarber => transactionByBarber.transactions_count);

let transactionByBarberBackgroundColors = transactionByBarberData.map(() => getRandomColor());
let transactionByBarberBorderColors = transactionByBarberBackgroundColors.map(color => color.replace('0.2', '1'));

let transactionByBarberChart = new Chart(transactionByBarberCtx, {
    type: 'bar',
    data: {
        labels: transactionByBarberLabels,
        datasets: [{
            label: 'Jumlah Transaksi',
            data: transactionByBarberData,
            backgroundColor: transactionByBarberBackgroundColors,
            borderColor: transactionByBarberBorderColors,
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            },
        }
    }
});