Merge pull request #2863 from Mesonyx/mesonyx/feature/x-axis-highligh…

…ting

adds x-axis hover option for charts and tooltips, highlights all dots…

docs/01-Chart-Configuration.md

@@ -195,7 +195,7 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 enabled | Boolean | true | Are tooltips 
 custom | Function | null | See [section](#chart-configuration-custom-tooltips) below
-mode | String | 'single' | Sets which elements appear in the tooltip. Acceptable options are `'single'` or `'label'`. `single` highlights the closest element. `label` highlights elements in all datasets at the same `X` value.
+mode | String | 'single' | Sets which elements appear in the tooltip. Acceptable options are `'single'`, `'label'` or `'x-axis'`. <br>&nbsp;<br>`single` highlights the closest element. <br>&nbsp;<br>`label` highlights elements in all datasets at the same `X` value. <br>&nbsp;<br>`'x-axis'` also highlights elements in all datasets at the same `X` value, but activates when hovering anywhere within the vertical slice of the x-axis representing that `X` value.
 itemSort | Function | undefined | Allows sorting of [tooltip items](#chart-configuration-tooltip-item-interface). Must implement a function that can be passed to [Array.prototype.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
 backgroundColor | Color | 'rgba(0,0,0,0.8)' | Background color of the tooltip
 titleFontFamily | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | Font family for tooltip title inherited from global font family
@@ -269,7 +269,7 @@ The hover configuration is passed into the `options.hover` namespace. The global
 
 Name | Type | Default | Description
 --- | --- | --- | ---
-mode | String | 'single' | Sets which elements hover. Acceptable options are `'single'`, `'label'`, or `'dataset'`. `single` highlights the closest element. `label` highlights elements in all datasets at the same `X` value. `dataset` highlights the closest dataset.
+mode | String | 'single' | Sets which elements hover. Acceptable options are `'single'`, `'label'`, `'x-axis'`, or `'dataset'`. <br>&nbsp;<br>`single` highlights the closest element. <br>&nbsp;<br>`label` highlights elements in all datasets at the same `X` value. <br>&nbsp;<br>`'x-axis'` also highlights elements in all datasets at the same `X` value, but activates when hovering anywhere within the vertical slice of the x-axis representing that `X` value.  <br>&nbsp;<br>`dataset` highlights the closest dataset.
 animationDuration | Number | 400 | Duration in milliseconds it takes to animate hover style changes
 onHover | Function | null | Called when any of the events fire. Called in the context of the chart and passed an array of active elements (bars, points, etc)
 

src/core/core.controller.js

@@ -421,6 +421,40 @@ module.exports = function(Chart) {
 			return elementsArray;
 		},
 
+        getElementsAtXAxis: function(e){
+            var me = this;
+            var eventPosition = helpers.getRelativePosition(e, me.chart);
+            var elementsArray = [];
+
+            var found = (function() {
+                if (me.data.datasets) {
+                    for (var i = 0; i < me.data.datasets.length; i++) {
+                        var meta = me.getDatasetMeta(i);
+                        if (me.isDatasetVisible(i)) {
+                            for (var j = 0; j < meta.data.length; j++) {
+                                if (meta.data[j].inLabelRange(eventPosition.x, eventPosition.y)) {
+                                    return meta.data[j];
+                                }
+                            }
+                        }
+                    }
+                }
+            }).call(me);
+
+            if (!found) {
+                return elementsArray;
+            }
+
+            helpers.each(me.data.datasets, function(dataset, datasetIndex) {
+                if (me.isDatasetVisible(datasetIndex)) {
+                    var meta = me.getDatasetMeta(datasetIndex);
+                    elementsArray.push(meta.data[found._index]);
+                }
+            }, me);
+
+            return elementsArray;
+        },		
+
 		getElementsAtEventForMode: function(e, mode) {
 			var me = this;
 			switch (mode) {
@@ -430,6 +464,8 @@ module.exports = function(Chart) {
 				return me.getElementsAtEvent(e);
 			case 'dataset':
 				return me.getDatasetAtEvent(e);
+            case 'x-axis':
+                return me.getElementsAtXAxis(e);
 			default:
 				return e;
 			}
@@ -547,6 +583,7 @@ module.exports = function(Chart) {
 				break;
 			case 'label':
 			case 'dataset':
+            case 'x-axis':
 				// elements = elements;
 				break;
 			default: