JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-rc/chart.js"></script>
<canvas id="chart"></canvas>
JavaScript
const pointInArea = (point, area) => (
point.x >= area.left && point.x <= area.right &&
point.y >= area.top && point.y <= area.bottom
);
Chart.Interaction.modes.labels = (chart, e, options, useFinalPosition) => {
const position = Chart.helpers.getRelativePosition(e, chart);
const scale = chart.scales.r;
const elements = [];
let dataIndex = null;
for (let i = 0 ; i < chart.data.labels.length; ++i) {
const labelPos = scale.getPointLabelPosition(i);
if (pointInArea(position, labelPos)) {
dataIndex = i;
break;
}
}
if (dataIndex !== null) {
for (let i = 0; i < chart.data.datasets.length; ++i) {
const meta = chart.getDatasetMeta(i);
elements.push({
element: meta.data[dataIndex],
datasetIndex: i,
index: dataIndex,
});
}
}
return elements;
};
const chart = new Chart('chart', {
type: 'radar',
data: {
datasets: [{
data: [10, 20, 30, 40, 5],
label: 'DS',
}],
labels: [
'Label 1',
'Label 2',
'Label 3',
'Label 4',
'Label 5',
]
},
options: {
plugins: {
tooltip: {
mode: 'labels'
}
}
}
})