From: t-mangoe <m.takashi.xpair@gmail.com>
Date: Sat, 7 May 2022 14:43:47 +0000 (+0900)
Subject: display tooltips only at points in chart area (#10289)
X-Git-Tag: v3.8.0~9
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d573dfb63e6afad9cfc33754dc4ee7ac9fe4062b;p=thirdparty%2FChart.js.git

display tooltips only at points in chart area (#10289)

* show only points in chart area

* use the _isPointInArea helper function
---

diff --git a/src/core/core.interaction.js b/src/core/core.interaction.js
index 2e18acc9d..4a8df47fa 100644
--- a/src/core/core.interaction.js
+++ b/src/core/core.interaction.js
@@ -1,6 +1,7 @@
 import {_lookupByKey, _rlookupByKey} from '../helpers/helpers.collection';
 import {getRelativePosition} from '../helpers/helpers.dom';
 import {_angleBetween, getAngleFromPoint} from '../helpers/helpers.math';
+import {_isPointInArea} from '../helpers';
 
 /**
  * @typedef { import("./core.controller").default } Chart
@@ -97,6 +98,9 @@ function getIntersectItems(chart, position, axis, useFinalPosition) {
   }
 
   const evaluationFunc = function(element, datasetIndex, index) {
+    if (!_isPointInArea(element, chart.chartArea, 0)) {
+      return;
+    }
     if (element.inRange(position.x, position.y, useFinalPosition)) {
       items.push({element, datasetIndex, index});
     }
diff --git a/test/specs/core.interaction.tests.js b/test/specs/core.interaction.tests.js
index 79d9b1048..34ee6438c 100644
--- a/test/specs/core.interaction.tests.js
+++ b/test/specs/core.interaction.tests.js
@@ -834,4 +834,41 @@ describe('Core.Interaction', function() {
       expect(elements).toEqual([meta0.data[1], meta1.data[0], meta1.data[1], meta1.data[2]]);
     });
   });
+
+  describe('tooltip element of scatter chart', function() {
+    it ('out-of-range datapoints are not shown in tooltip', function() {
+      let data = [];
+      for (let i = 0; i < 1000; i++) {
+        data.push({x: i, y: i});
+      }
+
+      const chart = window.acquireChart({
+        type: 'scatter',
+        data: {
+          datasets: [{data}]
+        },
+        options: {
+          scales: {
+            x: {
+              min: 2
+            }
+          }
+        }
+      });
+
+      const meta0 = chart.getDatasetMeta(0);
+      const firstElement = meta0.data[0];
+
+      const evt = {
+        type: 'click',
+        chart: chart,
+        native: true, // needed otherwise things its a DOM event
+        x: firstElement.x,
+        y: firstElement.y
+      };
+
+      const elements = Chart.Interaction.modes.point(chart, evt, {intersect: true}).map(item => item.element);
+      expect(elements).not.toContain(firstElement);
+    });
+  });
 });