Chart.js Show label/tooltip for single point when multiple points coincide

Question

I have a Chart.js scatter plot where data points from two different datasets occasionally coincide/overlap. They have the same x and y coordinate. On default, when the points are hovered, the tooltip shows info for both data points. My desired behavior is to get the information for the first overlapping point only. I can achieve this using tooltips' mode set to 'single'.

var config = {
    options: {
        tooltips: {
            mode: "single"
        }
    }
}

Although this works fine, my question/problem arises because chart.js' documentation states that mode 'single' is deprecated. It suggests using mode 'nearest' with intersect set to 'true' would achieve the same result, however it doesn't.

Below is a reproduction of the issue:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
  <canvas></canvas>
</body>
<script>
var config = {
        type: "scatter",
        data: {
            labels: ["label1", "label2"],
            datasets: [{label: "label1", data:[{x: 1, y:1},{x: 2, y:2},{x: 3, y:3},{x: 4, y:4},{x: 5, y:2}], backgroundColor: "rgb(155,0,0)"},{label: "label2", data:[{x: 1, y:1},{x: 2, y:4},{x: 3, y:3},{x: 4, y:6},{x: 5, y:8}], backgroundColor: "rgb(0,0,155)"}]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            scales: {
                yAxes: [{
                    type: "linear",
                    scaleLabel: {
                        display: true,
                        labelString: "labels",
                        fontStyle: "bold"
                    },
                    ticks: {
                        autoSkip: true,
                        maxTicksLimit: 7
                    }
                }],
                xAxes: [{
                    type: "linear",
                    beginAtZero: true
                }]
            },
            tooltips: {
                mode: "nearest",
                intersect: true
            }
        }
    }
    var chart = new Chart(document.querySelector("canvas"), config);
</script>
</html>

And here is the desired behavior with the deprecated 'single' argument:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
  <canvas></canvas>
</body>
<script>
var config = {
        type: "scatter",
        data: {
            labels: ["label1", "label2"],
            datasets: [{label: "label1", data:[{x: 1, y:1},{x: 2, y:2},{x: 3, y:3},{x: 4, y:4},{x: 5, y:2}], backgroundColor: "rgb(155,0,0)"},{label: "label2", data:[{x: 1, y:1},{x: 2, y:4},{x: 3, y:3},{x: 4, y:6},{x: 5, y:8}], backgroundColor: "rgb(0,0,155)"}]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            scales: {
                yAxes: [{
                    type: "linear",
                    scaleLabel: {
                        display: true,
                        labelString: "labels",
                        fontStyle: "bold"
                    },
                    ticks: {
                        autoSkip: true,
                        maxTicksLimit: 7
                    }
                }],
                xAxes: [{
                    type: "linear",
                    beginAtZero: true
                }]
            },
            tooltips: {
                mode: "single"
            }
        }
    }
    var chart = new Chart(document.querySelector("canvas"), config);
</script>
</html>

Any ideas on how to resolve this issue? Especially for people who might run into this issue if/when 'single' is removed. Thank you, cheers.

LeeLenalee LeeLenalee · Accepted Answer · 2021-01-31T00:32:26

Use the afterBody callback to manually adjust what the tooltip is going to show by removing all but the one point that you want to show. https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks

Chart.js Show label/tooltip for single point when multiple points coincide

1 Answers