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

* show only points in chart area * use the _isPointInArea helper function
chartjs · May 7, 2022 · d573dfb · d573dfb
1 parent 2c268f0
commit d573dfb
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git 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
@@ -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);
+    });
+  });
 });