Category scales share the same axis configuration as numeric charts, but support some additional properties in the axis and axis.ticks objects. The axis object has one additional property that can be used to override the data object labels for an axis:

The following code fragment shows category labels defined in three different properties. Since the single x axis contains a labels property, it will override all previous definitions:

new Chart("my-chart",
    type: ...,
    data: {
        labels: ['One', 'Two', 'Three'], // used if others are not present
        xLabels: ['ONE', 'TWO', 'THREE'],   // overrides ‘labels’     
        datasets: […]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'category',
                labels: ['Label 1', 'Label 2', 'Label 3'] // overrides 
                xLabels
            }]
        }
    }
});

You can create charts that have category scales for both x and y axes in Chart.js with the xLabels and yLabels properties in the data object. The first axis of each type will use them. The data and xLabels array have the same size. Each element in the xLabels array is related to a corresponding item from the data array, which contains values from the yLabels array. This creates a one-to-many relationship between the categories. There is a single y value shared by many x values.

In the following example, properties were set for all axes using Global.defaults.scale:

const yLabels = ["Water", "Land", "Air"]; // groups: multiple points
const xLabels = ["Ship", "Train", "Bike", "Cruiser",
                 "Jet", "Bus", "Rocket", "Car"]; // items: single point
const data = ["Water", "Land", "Land", "Water", "Air", "Land", "Air",           
              "Land"];
 
const dataObj = {
    xLabels: xLabels, // used by x-axis category scale
    yLabels: yLabels, // used by y-axis category scale
    datasets: [
        {
            data: data,
            pointRadius: 50, pointHoverRadius: 50,
            pointStyle: 'rectRot',
            showLine: false,
            backgroundColor: "hsla(20,100%,80%,0.8)",
            borderColor: "hsla(0,100%,50%,1)"
        }
    ]
}
 
 Chart.defaults.scale.gridLines.drawBorder = false;
 Chart.defaults.scale.gridLines.lineWidth = 10;
 Chart.defaults.scale.gridLines.drawBorder = false;
 Chart.defaults.scale.offset = true;
 Chart.defaults.scale.ticks.padding = 20;
 
 new Chart("correlation",
         {
             type: "line",
             data: dataObj,
             options: {
                 legend: {display: false},
                 scales: {
                     xAxes: [{type: 'category'}],
                     yAxes: [{type: 'category'}]
                 },
                 animation: {duration: 0},
                 tooltips: {displayColors: false}
             }
         });

The result is shown as follows. See the full code in Category/category-1-one-to-many.html:

You can also create many-to-many categorical relationships, but it won’t work with category scales. You have to set up a scatter chart with two numeric linear scales and then map the numbers back to categories using a callback. The following code shows how to do that:

const xLabels = ["Lake","River","Road","Railroad","Ocean","Air"];
 const yLabels = ["Car","Bus","Airplane","Sailboat","Cruiser","Train",
                  "Bike"]
 const data = [
     {x: 1, y: 4}, {x: 1, y: 5}, {x: 2, y: 4}, {x: 3, y: 1}, {x: 3, y: 2},
     {x: 3, y: 7}, {x: 4, y: 6}, {x: 5, y: 5}, {x: 6, y: 3}
 ];
 
 const dataObj = {
     datasets: [
         {
             data: data,
             pointRadius: 20, pointHoverRadius: 20,
             pointStyle: 'rectRot',
             backgroundColor: "hsla(20,100%,80%,0.8)",
             borderColor: "hsla(0,100%,50%,1)"
         }
     ]
 }
 
 Chart.defaults.scale.gridLines.drawBorder = false;
 Chart.defaults.scale.gridLines.lineWidth = 2;
 Chart.defaults.scale.gridLines.color = 'red';
 Chart.defaults.scale.offset = true;
 Chart.defaults.scale.ticks.padding = 10;
 Chart.defaults.scale.ticks.min = 0;
 
 new Chart("correlation",
         {
             type: "scatter",
             data: dataObj,
             options: {
                 legend: {display: false},
                 animation: { duration: 0 },
                 scales: {
                     xAxes: [{
                         ticks: {
                             max: 7,
                             callback: function(value) {
                                 return xLabels[value-1];
                             }
                         }
                     }],
                     yAxes: [{
                         ticks: {
                             max: 8,
                             callback: function(value) {
                                 return yLabels[value-1];
                             }
                         }
                     }]
                 }
             }
         });

 The result is shown as follows. See the full code in Category/category-2-many-to-many.html: