diff --git a/src/core/core.interaction.js b/src/core/core.interaction.js index be85a080f76..59474a5b32b 100644 --- a/src/core/core.interaction.js +++ b/src/core/core.interaction.js @@ -275,6 +275,7 @@ module.exports = { */ x: function(chart, e, options) { var position = getRelativePosition(e, chart); + var distanceMetric = getDistanceMetricForAxis('x'); var items = []; var intersectsItem = false; @@ -293,7 +294,29 @@ module.exports = { if (options.intersect && !intersectsItem) { items = []; } - return items; + + // group by dataset + var byIndex = items.reduce(function(res, element) { + if (res[element._datasetIndex] === undefined) { + res[element._datasetIndex] = [element]; + } else { + res[element._datasetIndex].push(element); + } + return res; + }, {}); + + // sort by distance + Object.keys(byIndex).forEach(function(key) { + byIndex[key].sort(function(a, b) { + return distanceMetric(position, a.getCenterPoint()) - distanceMetric(position, b.getCenterPoint()); + }); + }); + + return Object.keys(byIndex).map( + function(key) { + return byIndex[key][0]; + } + ); }, /** diff --git a/test/specs/core.interaction.tests.js b/test/specs/core.interaction.tests.js index 49cd3bd193d..45b83bc3152 100644 --- a/test/specs/core.interaction.tests.js +++ b/test/specs/core.interaction.tests.js @@ -556,22 +556,53 @@ describe('Core.Interaction', function() { describe('x mode', function() { beforeEach(function() { this.chart = window.acquireChart({ - type: 'line', + type: 'scatter', data: { datasets: [{ label: 'Dataset 1', - data: [10, 40, 30], - pointRadius: [5, 10, 5], + data: [ + { + x: 1, + y: 10 + }, + { + x: 2, + y: 40 + }, + { + x: 2, + y: 40 + }, + { + x: 3, + y: 30 + }], + pointRadius: [10, 5, 10, 5], pointHoverBorderColor: 'rgb(255, 0, 0)', pointHoverBackgroundColor: 'rgb(0, 255, 0)' }, { label: 'Dataset 2', - data: [40, 40, 40], - pointRadius: [10, 10, 10], + data: [ + { + x: 1, + y: 40 + }, + { + x: 2, + y: 40 + }, + { + x: 2, + y: 40 + }, + { + x: 3, + y: 40 + }], + pointRadius: [10, 5, 10, 5], pointHoverBorderColor: 'rgb(0, 0, 255)', pointHoverBackgroundColor: 'rgb(0, 255, 255)' - }], - labels: ['Point 1', 'Point 2', 'Point 3'] + }] } }); }); @@ -610,7 +641,7 @@ describe('Core.Interaction', function() { expect(elements).toEqual([]); }); - it('should return items at the same x value when intersect is true', function() { + it('should return one item per dataset at the same x value when intersect is true', function() { var chart = this.chart; var meta0 = chart.getDatasetMeta(0); var meta1 = chart.getDatasetMeta(1);