[Chartjs]-Why Chart.js's tooltip appears in wrong position when mouse hover?

6πŸ‘

The default hit detection radius is a bit large. Try setting

pointHitDetectionRadius : 1,

This provides more definition on a graph with many datapoints.

Update: Fiddle

2πŸ‘

I had a similar issue with the tooltip being nowhere near my mouse. This will make the tooltip lock to the nearest point to the mouse:

options: {
  tooltips: {
    mode: 'nearest',
    intersect: false
  }
}

This is an example of what it looks like (the red dot is where my mouse is):
enter image description here

0πŸ‘

make tooltip like this it works

 tooltips: {
            mode: 'label',
            position: "nearest",
            label: 'mylabel',
            callbacks: {
                label: function(tooltipItem, data) {
                    return   data.datasets[tooltipItem.datasetIndex].label+ " "  + number_format2(tooltipItem.yLabel.toString(), 2, ',', '.') ; }, },
        }
 

Leave a comment