How to do the callback on x-axis to get the label

[Udemology]

How to do the callback on x-axis to get the label

I read the docs but I struggle to create a working model.

The category axis, which is the default x-axis for line and bar charts, uses the index as internal data format. For accessing the label, use this.getLabelForValue(value). API: getLabelForValue

I understand the value and index on the x-axis is reference to the labels[index].

options: {
        scales: {
            x: {
                ticks: {
                    // Include a dollar sign in the ticks
                    callback:(value, index, ticks) => {
                        return value; // gets 0 index 
                    }
                }
            }
}

If I add return this.getLabelForValue(value) // it gives error. As it does not recognize the 'this'. Is there maybe additional explanation somewhere?

Because now I can only do it by making a new array outside the chart object. Which clearly indicates my lack of knowledge of this precious JS library.

[kurkle]

Arrow functions don't have this. I'm guessing that is the problem.

So,

// no this
callback: (value, index) => ...

// this ok
callback(value, index) {...}

[Udemology]

OMG. Thank you for this answer. I never knew about that. Such a rookie mistake. It worked perfectly.

[Michael-indochat]

I want to ask @kurkle , this solution can get X axis label value?
I get about this mistake in this issue, how can I get X axis label value? thanks!
https://stackoverflow.com/questions/74924103/how-can-i-get-x-axis-label-value

[stockiNail]

Have a look to the doc: https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats
The callback option can receive 3 arguments. The third one is the array of ticks items and using the index you can get the item and the label. Since version 4.1.0 you can can have a method in the scale to get all label items (see #10966)