如何覆盖功能convertTicksToLabels chartjs

Question

I want to be able to map tick values to strings in Chart.js.

In the documentation ( https://www.chartjs.org/docs/latest/developers/axes.html?h=converttick ) I found the function

// Transform the ticks array of the scale instance into strings. The default implementation simply calls this.options.ticks.callback(numericalTick, index, ticks);
convertTicksToLabels: function() {} 

Is there an example of how(like in what format)/where to write this function?

I assume it should be written in the options...Here is my code:

    chart = new Chart(ctx, {
    type: 'bubble',
    data: dataObj,
    options: {
        scales: {
            yAxes: [{ 
                ticks:{display: false},
                gridLines:{display:false}

            }],
            xAxes: [{ 
                ticks:{display: true},
                gridLines:{display:false},
                convertTicksToLabels: function() {//what goes in here?}
            }]
          }
    }
});

So far, I have only found answers about displaying formatted lines on an axis , which does not use this function, and overriding the calculateXLabelRotation function , which does not involve mapping strings to tick values (only returning one label rotation).

Answer 1

I found an different way to map values to strings without using the function.

I used the callback key instead of the convertTicksToLabels function.

Here is my code now...

      chart = new Chart(ctx, {
        type: 'bubble',
        data: dataObj,
        options: {
            scales: {
                yAxes: [{ 
                    ticks:{
                        display: true,
                        callback: function(value, index, values) {
                            return mapValtoString(value);
                        }
                    },
                    scaleLabel: {labelString: "Factualness"},
                    gridLines:{display:false}
                }],
                xAxes: [{ 
                    ticks:{display: false},
                    scaleLabel: {labelString: "Bias"},
                    gridLines:{display:false}
                }]
              }
        }
    });

The mapValToString() function looks like this...

function mapValtoString(val){
    switch(val){
        case 1:
            return "LOW";
            break;
        case 2:
            return "MEDIUM";
            break;
        case 3:
            return "HIGH";
            break;  
        default:
            return "";
    }

I return the string I want associated with a value and a blank string on the values not needed.

This solved my problem, the graph now displays strings instead of number values.