diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md index 6ff31609266..e34c99777a1 100644 --- a/docs/01-Chart-Configuration.md +++ b/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'`.
 
`single` highlights the closest element.
 
`label` highlights elements in all datasets at the same `X` value.
 
`'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'`.
 
`single` highlights the closest element.
 
`label` highlights elements in all datasets at the same `X` value.
 
`'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.
 
`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) diff --git a/src/core/core.controller.js b/src/core/core.controller.js index bce768810ab..28de61bd787 100644 --- a/src/core/core.controller.js +++ b/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: