How can I provide data to a javascript chart library using ajax'd data in coldfusion/lucee?

This is the my working example that I have.

var handleChartStatic = function(){
const ctx = document.getElementById('myChart').getContext('2d');

// need to make this ajax'd fed;
const graphData = {
    labels: ['AutoCAD', 'Inventor Professional', 'AutoCAD Mechanical', 'AutoCAD Electrical', 'Vault Professional', 'Fusion 360'],
    datasets: [{
        label: 'Tokens Consumed by Product',
        data: [8073, 3970, 2574, 903, 553, 414],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
};

const myChart = new Chart(ctx, {
    type: 'bar',
    data: graphData,
    options: {
        scales: {
            y: {
                beginAtZero: false
            }
        }
    }
});

}

The chart will display that bar graphs beautifully.

This is my revised code to obtain the data via ajax.

var handleChartAjax = function(){
const ctx = document.getElementById('myAjaxChart').getContext('2d');

 $.ajax({
    url: "/?go=autodesk.dashboardData&json",
    type: "post",
    dataType: "JSON",
    data: {},
    timeout: 30000,
}).then(
    function(response) {
            const graphData = response;
            const myAjaxChart = new Chart(ctx, {
            type: 'bar',
            data: graphData,
            options: {
                scales: {
                    y: {
                        beginAtZero: false
                    }
                }
            }
        });
    });
    }

The individual bars do not render at all. I believe the issue is with my format of the ajax'd data.

Here is my function:

local.data.dashboardData = variables.autodeskDAO.getAutodeskDashboardData();

variables.data = {
    labels: [quotedvaluelist(local.data.dashboardData.product_name)],
    datasets: [{
            label: 'Tokens Consumed by Product',
            data: [valuelist(local.data.dashboardData.tokens_consumedByProduct) ],
            backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
             ],
             borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
    }]
};

My console log data looks like this. I believe the way I have the CFC written that it's creating an array such that the JavaScript chart doesn't know how to account for it.

I'm at a loss on what to do next.

The datasets are set up as an array with the datasets: [{...}]. For the graphData, it would need to be set to response.datasets[0].