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

* Remove interaction mode overrides + hover.onHover

* Restore bar override

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
 

src/controllers/controller.bar.js

@@ -550,8 +550,6 @@ BarController.overrides = {
     mode: 'index'
   },
 
-  hover: {},
-
   scales: {
     _index_: {
       type: 'category',

src/controllers/controller.line.js

@@ -120,12 +120,6 @@ LineController.defaults = {
  * @type {any}
  */
 LineController.overrides = {
-  interaction: {
-    mode: 'index'
-  },
-
-  hover: {},
-
   scales: {
     _index_: {
       type: 'category',

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)) {

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);

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;
     });
 

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.