
let topServiceCtx = document.getElementById('topServiceChart').getContext('2d');

let topServiceLabels = topService.map(topService => topService.name);
let topServiceData = topService.map(topService => topService.transactions_count);

let topServiceBackgroundColors = topServiceData.map(() => getRandomColor());
let topServiceBorderColors = topServiceBackgroundColors.map(color => color.replace('0.2', '1'));

let topServiceChart = new Chart(topServiceCtx, {
    type: 'polarArea',
    data: {
        labels: topServiceLabels,
        datasets: [{
            label: 'Jumlah Transaksi',
            data: topServiceData,
            backgroundColor: topServiceBackgroundColors,
            borderColor: topServiceBorderColors,
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            },
        }
    },
});
