Is it possible to put components on x labels using ticks in react-chart-2?

Question

I am trying to make a chart like this with Multitype Chart from react-chartjs-2(^5.2.0). This is a graph that displays the value and count over time. I want to add only the temperature and percent values to the x-axis label, regardless of the graph. And when I click on the time text I want it to show the temperature and percentage.

const options = {
legend: {
    display: true,
    position: "top",
scales: {
    y: {
          beginAtZero: true,
        },
    x: {
        ticks: {
        callback: function (_value: unknown, index: number) {
            if (chartData && chartData[index]) {
                    const dataPoint = chartData[index];
                    return `${dataPoint.temperature}℃\n${dataPoint.percent}%\n${dataPoint.time}`
                }
                return '';
                },
            },
        },
    }
}

Is it possible?

So I'm trying to add a component using xticks, but it's not working.