Chartjs: get the label title on the radar's chart tooltip - chart.js

Question

This radar chart is working fine except for the title shown on the tooltip.
When hovering any point, you get the value of the point (10, 12, 13, 14) as the tooltip's top title instead of the label text (coaster 1, coaster 2, coaster 3, coaster 4) that I am expecting to find there.
Demo: https://jsfiddle.net/d8fLuzhr/
Code:
const coasters = [
[10, 12, 13, 14]
].flat()
new Chart('chart1', {
type: 'radar',
data: {
labels: ['coaster 1', 'coaster 2', 'coaster 3', 'coaster 4'],
datasets: [{
label: 'Altura',
data: coasters.map(eachCoaster => eachCoaster)
}]
}
})

Answer 1

Inside chart options, you need to define a tooltip callback for title as follows:
tooltips: {
callbacks: {
title: (tooltipItem, data) => data.labels[tooltipItem[0].index]
}
}
Please have a look at your amended code below.
new Chart('chart1', {
type: 'radar',
data: {
labels: ['coaster 1', 'coaster 2', 'coaster 3', 'coaster 4'],
datasets: [{
label: 'Altura',
data: [10, 12, 13, 14]
}]
},
options: {
tooltips: {
callbacks: {
title: (tooltipItem, data) => data.labels[tooltipItem[0].index]
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart1" height="120"></canvas>