Chart.js 鼠标悬停工具提示出现在 cursor 错误 position 时

Question

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/

Answer 1

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/