Don't draw tick across axis/border (#5178)

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index ffe13cbff8248150b9299bcb3ab7f75d7dbfe34e..f79dbee8009ddca0abc4642e337513e6fe4d3e03 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -705,10 +705,11 @@ module.exports = function(Chart) {
 
                        var itemsToDraw = [];
 
-                       var xTickStart = options.position === 'right' ? me.left : me.right - tl;
-                       var xTickEnd = options.position === 'right' ? me.left + tl : me.right;
-                       var yTickStart = options.position === 'bottom' ? me.top : me.bottom - tl;
-                       var yTickEnd = options.position === 'bottom' ? me.top + tl : me.bottom;
+                       var axisWidth = me.options.gridLines.lineWidth;
+                       var xTickStart = options.position === 'right' ? me.right : me.right - axisWidth - tl;
+                       var xTickEnd = options.position === 'right' ? me.right + tl : me.right;
+                       var yTickStart = options.position === 'bottom' ? me.top + axisWidth : me.bottom - tl - axisWidth;
+                       var yTickEnd = options.position === 'bottom' ? me.top + axisWidth + tl : me.bottom + axisWidth;
 
                        helpers.each(ticks, function(tick, index) {
                                // autoskipper skipped this tick (#4635)
@@ -764,7 +765,7 @@ module.exports = function(Chart) {
                                        ty1 = yTickStart;
                                        ty2 = yTickEnd;
                                        y1 = chartArea.top;
-                                       y2 = chartArea.bottom;
+                                       y2 = chartArea.bottom + axisWidth;
                                } else {
                                        var isLeft = options.position === 'left';
                                        var labelXOffset;
@@ -790,7 +791,7 @@ module.exports = function(Chart) {
                                        tx1 = xTickStart;
                                        tx2 = xTickEnd;
                                        x1 = chartArea.left;
-                                       x2 = chartArea.right;
+                                       x2 = chartArea.right + axisWidth;
                                        ty1 = ty2 = y1 = y2 = yLineValue;
                                }
 
@@ -906,9 +907,9 @@ module.exports = function(Chart) {
                                context.lineWidth = helpers.valueAtIndexOrDefault(gridLines.lineWidth, 0);
                                context.strokeStyle = helpers.valueAtIndexOrDefault(gridLines.color, 0);
                                var x1 = me.left;
-                               var x2 = me.right;
+                               var x2 = me.right + axisWidth;
                                var y1 = me.top;
-                               var y2 = me.bottom;
+                               var y2 = me.bottom + axisWidth;
 
                                var aliasPixel = helpers.aliasPixel(context.lineWidth);
                                if (isHorizontal) {