Take padding into account when determining the model coordinates from event coordinates

diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js
index 99ff72e2ce651628620bf881bb8fa9f82e8c628e..c5f884e9e02b114b8c11f965289d0ac6aa93dfab 100644 (file)
--- a/src/core/core.helpers.js
+++ b/src/core/core.helpers.js
@@ -645,11 +645,17 @@ module.exports = function(Chart) {
                // Scale mouse coordinates into canvas coordinates
                // by following the pattern laid out by 'jerryj' in the comments of
                // http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
+               var paddingLeft = parseFloat(helpers.getStyle(canvas, 'padding-left'));
+               var paddingTop = parseFloat(helpers.getStyle(canvas, 'padding-top'));
+               var paddingRight = parseFloat(helpers.getStyle(canvas, 'padding-right'));
+               var paddingBottom = parseFloat(helpers.getStyle(canvas, 'padding-bottom'));
+               var width = boundingRect.right - boundingRect.left - paddingLeft - paddingRight;
+               var height = boundingRect.bottom - boundingRect.top - paddingTop - paddingBottom;
 
                // We divide by the current device pixel ratio, because the canvas is scaled up by that amount in each direction. However
                // the backend model is in unscaled coordinates. Since we are going to deal with our model coordinates, we go back here
-               mouseX = Math.round((mouseX - boundingRect.left) / (boundingRect.right - boundingRect.left) * canvas.width / chart.currentDevicePixelRatio);
-               mouseY = Math.round((mouseY - boundingRect.top) / (boundingRect.bottom - boundingRect.top) * canvas.height / chart.currentDevicePixelRatio);
+               mouseX = Math.round((mouseX - boundingRect.left - paddingLeft) / (width) * canvas.width / chart.currentDevicePixelRatio);
+               mouseY = Math.round((mouseY - boundingRect.top - paddingTop) / (height) * canvas.height / chart.currentDevicePixelRatio);
 
                return {
                        x: mouseX,