Search code examples
chart.jsangular7radar-chart

Tool tip not showing for those label who's data overlapped on each other in chart.js


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.

Spidar chart

how can i solved this tooltip issue for overlapped nodes?


Solution

  • 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