Limit onHover to chartArea (#8794)

diff --git a/docs/configuration/interactions.md b/docs/configuration/interactions.md
index 2b7a44f9ac0a0281b941c53cfcdbf6ee73ac4206..8ec5babb6868ee30a0d776eb3ce75e13d8a6ab58 100644 (file)
--- a/docs/configuration/interactions.md
+++ b/docs/configuration/interactions.md
@@ -18,8 +18,8 @@ Namespace: `options`
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `events` | `string[]` | `['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']` | The `events` option defines the browser events that the chart should listen to for. Each of these events trigger hover and are passed to plugins. [more...](#event-option)
-| `onHover` | `function` | `null` | Called when any of the events fire. Passed the event, an array of active elements (bars, points, etc), and the chart.
-| `onClick` | `function` | `null` | Called if the event is of type `'mouseup'` or `'click'`. Passed the event, an array of active elements, and the chart.
+| `onHover` | `function` | `null` | Called when any of the events fire over chartArea. Passed the event, an array of active elements (bars, points, etc), and the chart.
+| `onClick` | `function` | `null` | Called if the event is of type `'mouseup'`, `'click'` or '`'contextmenu'` over chartArea. Passed the event, an array of active elements, and the chart.
 
 ### Event Option
 

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 34b342014d8331cac64f4155142e456ddc280086..856ec56a3dc0ebd31bfc625ae4facc1398343358 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -1108,11 +1108,11 @@ class Chart {
     // This prevents recursion if the handler calls chart.update()
     me._lastEvent = null;
 
-    // Invoke onHover hook
-    callCallback(options.onHover, [e, active, me], me);
+    if (_isPointInArea(e, me.chartArea, me._minPadding)) {
+      // Invoke onHover hook
+      callCallback(options.onHover, [e, active, me], me);
 
-    if (e.type === 'mouseup' || e.type === 'click' || e.type === 'contextmenu') {
-      if (_isPointInArea(e, me.chartArea, me._minPadding)) {
+      if (e.type === 'mouseup' || e.type === 'click' || e.type === 'contextmenu') {
         callCallback(options.onClick, [e, active, me], me);
       }
     }