Search code examples
chart.jstooltipreact-chartjs-2

Tooltip Display Issue on Small Screens with Chart.js & react-chartjs-2 - Works Fine on Larger Screens

I'm encountering a peculiar problem with tooltips when using Chart.js in conjunction with react-chartjs-2 in project. The issue specifically pertains to small screens, such as laptops and smaller, where not all areas within the chart trigger the display of tooltips when hovered over. Interestingly, this issue is not present on larger screens (24 inches and above).

Here's a snippet of the chart options I'm using:

const options = {
    responsive: true,
    maintainAspectRatio: false,
    showTooltips: true,
    interaction: {
        mode: "index",
        intersect: false,
    },
    plugins: {
        tooltip: {
            mode: "nearest",
            displayColors: false,
            intersect: false,
        },
    },
};

react-chartjs-2: "3.3.0",

chart.js: "3.6.0",

react: "17.0.2",

Solution

  • Upon investigation, I discovered that the issue was related to changes I had made to the zoom property of my app's body. The chart canvas didn't know how to handle these changes concerning the tooltip position, resulting in the tooltip's initial position remaining unaffected while its "UI" position changed.