Search code examples
javascripthtmlchart.jstooltippie-chart

Chart.js mouseover tooltips appears when cursor in wrong position

I am making a webpage with charts using chart.js. I want to have 3 pie charts, side-by-side, and I wrapped them in a div with display: flex;. The first's chart mouseover tooltips works fine. However,for the 2nd and 3rd chart, the tooltip only appear when I place my cursor at a distance from a section of data, but not when my cursor is directly on the section of data.

I have tried setting pointHitRadius and tooltips modes but nothing seems to work.

Here is a jsfiddle to my work: https://jsfiddle.net/6twvhpab/

Solution

  • The problem isn't with display:flex it is with:

    html{
    zoom: 90%;
}

    This must mess with how chartjs calculates the datapoint position, if you remove the above code from your stylesheet then it will fix your problem.

    I have created a fiddle to tidy up your sylesheet and demonstrate this working: https://jsfiddle.net/kopf7d0L/