I have been trying to apply different datasets to a chart.js Chart but am having issues when I try to produce a plot with two categorical variables and make the scales categorical. Either all data is removed, or the x and y scales become mixed up/combined. I have mainly tried this with scatter plots as they should be able to visualize two categorical variables. Has anyone else experienced this issue or has a solution?

Preset/previously declared variables are:

dataset (object array), xdata (string), ydata (string)

My code is:

const myChart = new Chart(ctx, {

        type: "scatter",
        data: {
            datasets: [{
                display: false,
                data: dataset,
                pointBackgroundColor: ["#3e95cd"], // for scatter plot
            }],
            borderColor: "black",
        },
        options: {
            layout: {
                padding: 20,
            },
            parsing: {
                xAxisKey: xdata,
                yAxisKey: ydata,
            },
            responsive: false,
            scales: {
                y: {
                    display: true,
                    align: "center",
                    color: "black",
                    type: "category",
                    title: {
                        display: true,
                        text: ydata,
                        color: "black",
                        align: "center",
                        font: {
                            weight: "bold",
                        },
                    },
                },
                x: {
                    display: true,
                    align: "center",
                    color: "black",
                    type: "category",
                    title: {
                        display: true,
                        text: xdata,
                        color: "black",
                        align: "center",
                        font: {
                            weight: "bold",
                        },
                    },
                },
            },
            plugins: {
                title: {
                    display: true,
                    text: `Graph - ${ydata} vs ${xdata}`,
                    color: "black",
                    align: "center",
                    position: "top",
                    // This more specific font property overrides the global property
                    font: {
                        size: 16,
                        weight: "bold",
                    },
                },
                legend: {
                    display: false,
                },
            },

        },
    });
};

Thanks in advance!