Remove line interaction overrides + hover.onHover (#8770)

* Remove interaction mode overrides + hover.onHover

* Restore bar override

diff --git a/docs/getting-started/v3-migration.md b/docs/getting-started/v3-migration.md
index 954620a20494d3871e31a97d633f3078a2ec5be1..33b17bbe4d4a0ed6542bc520b12a68a2c4ad7b46 100644 (file)
--- a/docs/getting-started/v3-migration.md
+++ b/docs/getting-started/v3-migration.md
@@ -121,6 +121,7 @@ A number of changes were made to the configuration options passed to the `Chart`
 * Horizontal Bar default tooltip mode was changed from `'index'` to `'nearest'` to match vertical bar charts
 * `legend`, `title` and `tooltip` namespaces were moved from `Chart.defaults` to `Chart.defaults.plugins`.
 * `elements.line.fill` default changed from `true` to `false`.
+* Line charts no longer override the default `interaction` mode. Default is changed from `'index'` to `'nearest'`.
 
 #### Scales
 
@@ -217,13 +218,14 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
 #### Interactions
 
 * To allow DRY configuration, a root options scope for common interaction options was added. `options.hover` and `options.plugins.tooltip` now both extend from `options.interaction`. Defaults are defined at `defaults.interaction` level, so by default hover and tooltip interactions share the same mode etc.
-* `interactions` are now limited to the chart area
+* `interactions` are now limited to the chart area + allowed overflow
 * `{mode: 'label'}` was replaced with `{mode: 'index'}`
 * `{mode: 'single'}` was replaced with `{mode: 'nearest', intersect: true}`
 * `modes['X-axis']` was replaced with `{mode: 'index', intersect: false}`
 * `options.onClick` is now limited to the chart area
 * `options.onClick` and `options.onHover` now receive the `chart` instance as a 3rd argument
 * `options.onHover` now receives a wrapped `event` as the first parameter. The previous first parameter value is accessible via `event.native`.
+* `options.hover.onHover` was removed, use `options.onHover`.
 
 #### Ticks
 

diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
index cbac98e5130cbc57f20ff60c09a039c595d37fd9..873cb954716cb1535e9b0b9b9b54b81ce0af0bc0 100644 (file)
--- a/src/controllers/controller.bar.js
+++ b/src/controllers/controller.bar.js
@@ -550,8 +550,6 @@ BarController.overrides = {
     mode: 'index'
   },
 
-  hover: {},
-
   scales: {
     _index_: {
       type: 'category',

diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
index 85a20da81a729999e8b246390bdcd362c326b367..da79679e6f83c221526f7db63775d747506d1999 100644 (file)
--- a/src/controllers/controller.line.js
+++ b/src/controllers/controller.line.js
@@ -120,12 +120,6 @@ LineController.defaults = {
  * @type {any}
  */
 LineController.overrides = {
-  interaction: {
-    mode: 'index'
-  },
-
-  hover: {},
-
   scales: {
     _index_: {
       type: 'category',

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index a0458616f744e9683f2eab3ebd5e16b1c83e2823..6e6bfec13e191568834992b0a2c3ec319e282bf8 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -1107,7 +1107,7 @@ class Chart {
     me._lastEvent = null;
 
     // Invoke onHover hook
-    callCallback(options.onHover || hoverOptions.onHover, [e, active, me], me);
+    callCallback(options.onHover, [e, active, me], me);
 
     if (e.type === 'mouseup' || e.type === 'click' || e.type === 'contextmenu') {
       if (_isPointInArea(e, me.chartArea, me._minPadding)) {

diff --git a/src/core/core.defaults.js b/src/core/core.defaults.js
index 4d94bbfd2c1ccd940dada00394c9368a81342f7b..eb009289466a8163982b886167a14fc53ba7185c 100644 (file)
--- a/src/core/core.defaults.js
+++ b/src/core/core.defaults.js
@@ -55,9 +55,7 @@ export class Defaults {
       lineHeight: 1.2,
       weight: null
     };
-    this.hover = {
-      onHover: null
-    };
+    this.hover = {};
     this.hoverBackgroundColor = (ctx, options) => getHoverColor(options.backgroundColor);
     this.hoverBorderColor = (ctx, options) => getHoverColor(options.borderColor);
     this.hoverColor = (ctx, options) => getHoverColor(options.color);

diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js
index 21603c471412efbfe8bc9c0d57f539b3a0d25956..ed393deb3cd9d3d9a0270faea48f51e99914ae5e 100644 (file)
--- a/test/specs/core.controller.tests.js
+++ b/test/specs/core.controller.tests.js
@@ -94,10 +94,11 @@ describe('Chart', function() {
     it('should initialize config with default interaction options', function() {
       var callback = function() {};
       var defaults = Chart.defaults;
-      var defaultMode = overrides.line.interaction.mode;
 
-      defaults.hover.onHover = callback;
-      overrides.line.interaction.mode = 'test';
+      defaults.onHover = callback;
+      overrides.line.interaction = {
+        mode: 'test'
+      };
 
       var chart = acquireChart({
         type: 'line'
@@ -105,19 +106,21 @@ describe('Chart', function() {
 
       var options = chart.options;
       expect(options.font.size).toBe(defaults.font.size);
-      expect(options.hover.onHover).toBe(callback);
+      expect(options.onHover).toBe(callback);
       expect(options.hover.mode).toBe('test');
 
-      defaults.hover.onHover = null;
-      overrides.line.interaction.mode = defaultMode;
+      defaults.onHover = null;
+      delete overrides.line.interaction;
     });
 
     it('should initialize config with default hover options', function() {
       var callback = function() {};
       var defaults = Chart.defaults;
 
-      defaults.hover.onHover = callback;
-      overrides.line.hover.mode = 'test';
+      defaults.onHover = callback;
+      overrides.line.hover = {
+        mode: 'test'
+      };
 
       var chart = acquireChart({
         type: 'line'
@@ -125,11 +128,11 @@ describe('Chart', function() {
 
       var options = chart.options;
       expect(options.font.size).toBe(defaults.font.size);
-      expect(options.hover.onHover).toBe(callback);
+      expect(options.onHover).toBe(callback);
       expect(options.hover.mode).toBe('test');
 
-      defaults.hover.onHover = null;
-      delete overrides.line.hover.mode;
+      defaults.onHover = null;
+      delete overrides.line.hover;
     });
 
     it('should override default options', function() {
@@ -137,8 +140,10 @@ describe('Chart', function() {
       var defaults = Chart.defaults;
       var defaultSpanGaps = defaults.datasets.line.spanGaps;
 
-      defaults.hover.onHover = callback;
-      overrides.line.hover.mode = 'x-axis';
+      defaults.onHover = callback;
+      overrides.line.hover = {
+        mode: 'x-axis'
+      };
       defaults.datasets.line.spanGaps = true;
 
       var chart = acquireChart({
@@ -161,8 +166,8 @@ describe('Chart', function() {
       expect(options.hover.mode).toBe('dataset');
       expect(options.plugins.title.position).toBe('bottom');
 
-      defaults.hover.onHover = null;
-      delete overrides.line.hover.mode;
+      defaults.onHover = null;
+      delete overrides.line.hover;
       defaults.datasets.line.spanGaps = defaultSpanGaps;
     });
 

diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index fea930603fce42c599a46ef273333ed6f7f3bd05..39cedbc4a4def2bb041c1bcf6912928471d5395d 100644 (file)
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -1343,13 +1343,6 @@ export interface CoreInteractionOptions {
   axis: 'x' | 'y' | 'xy';
 }
 
-export interface HoverInteractionOptions extends CoreInteractionOptions {
-  /**
-   * Called when any of the events fire. Passed the event, an array of active elements (bars, points, etc), and the chart.
-   */
-  onHover(event: ChartEvent, elements: ActiveElement[], chart: Chart): void;
-}
-
 export interface CoreChartOptions<TType extends ChartType> extends ParsingOptions, AnimationOptions<TType> {
 
   datasets: {
@@ -1418,7 +1411,7 @@ export interface CoreChartOptions<TType extends ChartType> extends ParsingOption
 
   interaction: CoreInteractionOptions;
 
-  hover: HoverInteractionOptions;
+  hover: CoreInteractionOptions;
 
   /**
    * The events option defines the browser events that the chart should listen to for tooltips and hovering.