title: Chart.js Show label/tooltip for single point when multiple points coincide
body: <p>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'.</p>
  <pre><code>var config = {
      options: {
          tooltips: {
              mode: &quot;single&quot;
          }
      }
  }
  </code></pre>
  <p>Although this works fine, my question/problem arises because chart.js' documentation states that mode 'single' is <a href="https://www.chartjs.org/docs/latest/general/interactions/modes.html#single-deprecated" rel="nofollow noreferrer">deprecated</a>. It suggests using mode 'nearest' with intersect set to 'true' would achieve the same result, however <a href="https://jsfiddle.net/f5epdn2w/" rel="nofollow noreferrer">it doesn't</a>.</p>
  <p>Below is a reproduction of the issue:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Chart&lt;/title&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;canvas&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;script&gt;
  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);
  &lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And here is the desired behavior with the deprecated 'single' argument:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Chart&lt;/title&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;canvas&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;script&gt;
  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);
  &lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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.</p>