I have created spidar (radar) chart by using chart.js here- https://stackblitz.com/edit/angular-ivy-ytsbxn. When we have data = [100,100,100,200] like this, then all three label's node get overlap on each other so in this case tooltip showing for only one label as you can see in demo.
how can i solved this tooltip issue for overlapped nodes?
First you need to define tooltips.mode: 'point'
and then define tooltips.callbacks
funtions for title
and label
in order to obtain meaningful data displayed in the tooltips.
tooltips: {
mode: 'point',
callbacks: {
title: () => 'DataCombination',
label: (tooltipItem, data) => data.labels[tooltipItem.index] + ': ' + data.datasets[0].data[tooltipItem.index]
}
}
Please have a look at your amended StackBlitz