Can still hover tooltip invisible data-point

Expected Behavior

Invisible data-points outside of the graph should not have any interaction.

Current Behavior

On hovering the data-point behind the legend a tooltip appears.

Possible Solution

When a data-point is out of bounds of the graph, and only if it is also invisible (not drawn), the tooltip should not appear upon hovering that area.

Steps to Reproduce

Use the following javascript in your codepen (no need for html or css):

var ctx = document.createElement('canvas');
ctx.style.maxWidth = '600px';
ctx.style.maxHeight = '400px';
document.body.appendChild(ctx);
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            type: 'line',
            label: 'line',
            data: new Array(10).fill(0).map((_, i) => {return {x: i, y: 5};}),
            showLine: true
        }]
    },
    options: {
        legend: {position: 'left'},
        scales: {
            xAxes: [{
              type: 'linear', ticks: {min: 5, max: 15}
            }],
            yAxes: [{
                ticks: {min: 0, max: 10}
            }]
        }
    }
});

Move your mouse cursor over the legend horizontally, a tooltip will appear on top of the legend, where the invisible datapoint is supposed to be.

Environment

  • Chart.js version: Chart.js v2.9.3 (but I think the bug exists in any recent version too)
  • Browser name and version: Firefox 84

1 possible answer(s) on “Can still hover tooltip invisible data-point