I'm creating a simple visualization that shows the evolution of the Temperature in the past 24h. It is shown in the picture.

[![enter image description here](https://i.stack.imgur.com/KUGnt.png)](https://i.stack.imgur.com/KUGnt.png)

In the x axis I'm showing the hours and I'm trying to format them so that 10 -> 10:00, and so on.

However, when I include the ticks.callback in the options, the chat shows as follows: it always starts at 0:00 while the correct chat, at this particular time starts at 12.

```
ticks: {
    callback: function(value, index, ticks) {
        return `${value}:00`;
    }
}

```

[![enter image description here](https://i.stack.imgur.com/3O0xa.png)](https://i.stack.imgur.com/3O0xa.png)

As you can see I've been able to format the y axis, but there is something different with the x axis.

This is the whole configuration of the chart, in case the error is there:

```
        const labels = this.extractLabels(this.props.data);
        const dataPoints = this.extractData(this.props.data);
        const data = {
            labels: labels,
            datasets: [{
                label: 'Avg. Temperature',
                data: dataPoints,
                fill: false,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1
            }]
        };
        const options = {
            scales: {
                y: {
                    beginAtZero: true,
                    grace: '5%',
                    title: {
                        display: true,
                        text: 'Temperature',
                        font: {
                            size: 16
                        }
                    },
                    ticks: {
                        callback: function(value, index, ticks) {
                            return value + ' ºC';
                        }
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Date',
                        font: {
                            size: 16
                        }
                    },
                    ticks: {
                        callback: function(value, index, ticks) {
                            return `${value}:00`;
                        }
                    }
                }
            }
        };
        const config = {
            type: 'line',
            data: data,
            options: options,
        };

        this.temperatureChart = new Chart(this.chartRef.current, config);

```