chart.js v4.1.1 legend position not working

I’ve tried a few things to get the legend to appear to the right of the pie chart but nothing is working so far.

I’ve tried these in the options but the legend always appears on top, which I assume is the default.

legend: {
    position: 'right',
},

// or this
plugins: {
  legend: {
     display: true,
     position: 'right',
     align: 'center'
  }
}

I’ve been through a bunch of posts and went through the documentation on the chart.js website. What am I missing?

Here’s the code

const projectChart = document.getElementById('projectChart');

$.ajax({
    type: "POST",
    url: "/Home/GglProjectPriority",
    data: '{}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: onSuccess,
    error: onError
});

function onSuccess(data) {
    console.log(data);
    var _data = data;
    var _chartLabels = data[0];
    var _chartData = data[1];

    var options = {
        type: 'pie',
        title: 'Project Priority',
        data: {
            labels: _chartLabels,
            datasets: [{
                data: _chartData
            }]
        },
        legend: {position: 'right'},
        responsive: true,
        legend: {
            position: 'right',
        },
        // plugins: {
        //     legend: {
        //         display: true,
        //         position: 'right',
        //         align: 'center'
        //     }
        // }
    };
    new Chart(projectChart, options);
}

Thanks in advance for your help.