Skip point outside the clipping area (#5363)

diff --git a/src/elements/element.point.js b/src/elements/element.point.js
index eab5b31d453c018fc57471827925f59aa984f3b4..fa7c42ec641f23d637118ab2d017154320a08c06 100644 (file)
--- a/src/elements/element.point.js
+++ b/src/elements/element.point.js
@@ -71,36 +71,18 @@ module.exports = Element.extend({
                var radius = vm.radius;
                var x = vm.x;
                var y = vm.y;
-               var color = helpers.color;
                var errMargin = 1.01; // 1.01 is margin for Accumulated error. (Especially Edge, IE.)
-               var ratio = 0;
 
                if (vm.skip) {
                        return;
                }
 
-               ctx.strokeStyle = vm.borderColor || defaultColor;
-               ctx.lineWidth = helpers.valueOrDefault(vm.borderWidth, defaults.global.elements.point.borderWidth);
-               ctx.fillStyle = vm.backgroundColor || defaultColor;
-
-               // Cliping for Points.
-               // going out from inner charArea?
-               if ((chartArea !== undefined) && ((model.x < chartArea.left) || (chartArea.right * errMargin < model.x) || (model.y < chartArea.top) || (chartArea.bottom * errMargin < model.y))) {
-                       // Point fade out
-                       if (model.x < chartArea.left) {
-                               ratio = (x - model.x) / (chartArea.left - model.x);
-                       } else if (chartArea.right * errMargin < model.x) {
-                               ratio = (model.x - x) / (model.x - chartArea.right);
-                       } else if (model.y < chartArea.top) {
-                               ratio = (y - model.y) / (chartArea.top - model.y);
-                       } else if (chartArea.bottom * errMargin < model.y) {
-                               ratio = (model.y - y) / (model.y - chartArea.bottom);
-                       }
-                       ratio = Math.round(ratio * 100) / 100;
-                       ctx.strokeStyle = color(ctx.strokeStyle).alpha(ratio).rgbString();
-                       ctx.fillStyle = color(ctx.fillStyle).alpha(ratio).rgbString();
+               // Clipping for Points.
+               if (chartArea === undefined || (model.x >= chartArea.left && chartArea.right * errMargin >= model.x && model.y >= chartArea.top && chartArea.bottom * errMargin >= model.y)) {
+                       ctx.strokeStyle = vm.borderColor || defaultColor;
+                       ctx.lineWidth = helpers.valueOrDefault(vm.borderWidth, defaults.global.elements.point.borderWidth);
+                       ctx.fillStyle = vm.backgroundColor || defaultColor;
+                       helpers.canvas.drawPoint(ctx, pointStyle, radius, x, y);
                }
-
-               helpers.canvas.drawPoint(ctx, pointStyle, radius, x, y);
        }
 });