diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md index 3b1a9d6a1..d4af29593 100644 --- a/docs/01-Chart-Configuration.md +++ b/docs/01-Chart-Configuration.md @@ -127,7 +127,8 @@ Name | Type | Default | Description display | Boolean | true | Is the legend displayed position | String | 'top' | Position of the legend. Possible values are 'top', 'left', 'bottom' and 'right'. fullWidth | Boolean | true | Marks that this box should take the full width of the canvas (pushing down other boxes) -onClick | Function | `function(event, legendItem) {}` | A callback that is called when a click is registered on top of a label item +onClick | Function | `function(event, legendItem) {}` | A callback that is called when a 'click' event is registered on top of a label item +onHover | Function | `function(event, legendItem) {}` | A callback that is called when a 'mousemove' event is registered on top of a label item labels |Object|-| See the [Legend Label Configuration](#chart-configuration-legend-label-configuration) section below. #### Legend Label Configuration diff --git a/src/core/core.controller.js b/src/core/core.controller.js index 2ee3712ba..dc9940076 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -631,13 +631,14 @@ module.exports = function(Chart) { hoverOptions.onHover.call(me, me.active); } + if (me.legend && me.legend.handleEvent) { + me.legend.handleEvent(e); + } + if (e.type === 'mouseup' || e.type === 'click') { if (options.onClick) { options.onClick.call(me, e, me.active); } - if (me.legend && me.legend.handleEvent) { - me.legend.handleEvent(e); - } } // Remove styling for last active (even if it may still be active) diff --git a/src/core/core.legend.js b/src/core/core.legend.js index 8d3ce3c09..7691cab22 100644 --- a/src/core/core.legend.js +++ b/src/core/core.legend.js @@ -25,6 +25,8 @@ module.exports = function(Chart) { ci.update(); }, + onHover: null, + labels: { boxWidth: 40, padding: 10, @@ -424,10 +426,24 @@ module.exports = function(Chart) { // Handle an event handleEvent: function(e) { var me = this; + var opts = me.options; + var type = e.type === 'mouseup' ? 'click' : e.type; + + if (type === 'mousemove') { + if (!opts.onHover) { + return; + } + } else if (type === 'click') { + if (!opts.onClick) { + return; + } + } else { + return; + } + var position = helpers.getRelativePosition(e, me.chart.chart), x = position.x, - y = position.y, - opts = me.options; + y = position.y; if (x >= me.left && x <= me.right && y >= me.top && y <= me.bottom) { // See if we are touching one of the dataset boxes @@ -437,10 +453,13 @@ module.exports = function(Chart) { if (x >= hitBox.left && x <= hitBox.left + hitBox.width && y >= hitBox.top && y <= hitBox.top + hitBox.height) { // Touching an element - if (opts.onClick) { + if (type === 'click') { opts.onClick.call(me, e, me.legendItems[i]); + break; + } else if (type === 'mousemove') { + opts.onHover.call(me, e, me.legendItems[i]); + break; } - break; } } } diff --git a/test/core.legend.tests.js b/test/core.legend.tests.js index 2db970f3f..5b81898e0 100644 --- a/test/core.legend.tests.js +++ b/test/core.legend.tests.js @@ -23,6 +23,7 @@ describe('Legend block tests', function() { // a callback that will handle onClick: jasmine.any(Function), + onHover: null, labels: { boxWidth: 40,