Add error margin for detecting if a point or line is in the chartArea (…

…#5790)
chartjs · Oct 27, 2018 · cb14217 · cb14217
1 parent b3b5c7d
commit cb14217
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/core/core.scale.js b/src/core/core.scale.js
@@ -710,6 +710,8 @@ module.exports = Element.extend({
 		var yTickStart = options.position === 'bottom' ? me.top + axisWidth : me.bottom - tl - axisWidth;
 		var yTickEnd = options.position === 'bottom' ? me.top + axisWidth + tl : me.bottom + axisWidth;
 
+		var epsilon = 0.0000001; // 0.0000001 is margin in pixels for Accumulated error.
+
 		helpers.each(ticks, function(tick, index) {
 			// autoskipper skipped this tick (#4635)
 			if (helpers.isNullOrUndef(tick.label)) {
@@ -753,7 +755,7 @@ module.exports = Element.extend({
 				}
 
 				var xLineValue = getLineValue(me, index, gridLines.offsetGridLines && ticks.length > 1);
-				if (xLineValue < me.left) {
+				if (xLineValue < me.left - epsilon) {
 					lineColor = 'rgba(0,0,0,0)';
 				}
 				xLineValue += helpers.aliasPixel(lineWidth);
@@ -780,7 +782,7 @@ module.exports = Element.extend({
 				labelX = isLeft ? me.right - labelXOffset : me.left + labelXOffset;
 
 				var yLineValue = getLineValue(me, index, gridLines.offsetGridLines && ticks.length > 1);
-				if (yLineValue < me.top) {
+				if (yLineValue < me.top - epsilon) {
 					lineColor = 'rgba(0,0,0,0)';
 				}
 				yLineValue += helpers.aliasPixel(lineWidth);

diff --git a/src/elements/element.point.js b/src/elements/element.point.js
@@ -72,14 +72,14 @@ module.exports = Element.extend({
 		var radius = vm.radius;
 		var x = vm.x;
 		var y = vm.y;
-		var errMargin = 1.01; // 1.01 is margin for Accumulated error. (Especially Edge, IE.)
+		var epsilon = 0.0000001; // 0.0000001 is margin in pixels for Accumulated error.
 
 		if (vm.skip) {
 			return;
 		}
 
 		// Clipping for Points.
-		if (chartArea === undefined || (model.x >= chartArea.left && chartArea.right * errMargin >= model.x && model.y >= chartArea.top && chartArea.bottom * errMargin >= model.y)) {
+		if (chartArea === undefined || (model.x > chartArea.left - epsilon && chartArea.right + epsilon > model.x && model.y > chartArea.top - epsilon && chartArea.bottom + epsilon > model.y)) {
 			ctx.strokeStyle = vm.borderColor || defaultColor;
 			ctx.lineWidth = helpers.valueOrDefault(vm.borderWidth, defaults.global.elements.point.borderWidth);
 			ctx.fillStyle = vm.backgroundColor || defaultColor;