Implement clipping (#3658)

Implements clipping of items outside the chart area. Resolves #3506 #3491 #2873

diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
index e5070542e8867354b0c77f635f1683ec047636e3..bf1fb69379338827e9423c16476d69977e1de27c 100644 (file)
--- a/src/controllers/controller.bar.js
+++ b/src/controllers/controller.bar.js
@@ -229,12 +229,14 @@ module.exports = function(Chart) {
                        var dataset = me.getDataset();
                        var i, len;
 
+                       Chart.canvasHelpers.clipArea(me.chart.chart.ctx, me.chart.chartArea);
                        for (i = 0, len = metaData.length; i < len; ++i) {
                                var d = dataset.data[i];
                                if (d !== null && d !== undefined && !isNaN(d)) {
                                        metaData[i].transition(easingDecimal).draw();
                                }
                        }
+                       Chart.canvasHelpers.unclipArea(me.chart.chart.ctx);
                },
 
                setHoverStyle: function(rectangle) {

diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
index 23d4eedc4029d9ecb739f720a567461ffbdfe9ce..806ab4f3f58be45824bd1f4e94c16c987e9ba01c 100644 (file)
--- a/src/controllers/controller.line.js
+++ b/src/controllers/controller.line.js
@@ -292,14 +292,16 @@ module.exports = function(Chart) {
                                points[i].transition(easingDecimal);
                        }
 
+                       Chart.canvasHelpers.clipArea(me.chart.chart.ctx, me.chart.chartArea);
                        // Transition and Draw the line
                        if (lineEnabled(me.getDataset(), me.chart.options)) {
                                meta.dataset.transition(easingDecimal).draw();
                        }
+                       Chart.canvasHelpers.unclipArea(me.chart.chart.ctx);
 
                        // Draw the points
                        for (i=0, ilen=points.length; i<ilen; ++i) {
-                               points[i].draw();
+                               points[i].draw(me.chart.chartArea);
                        }
                },
 

diff --git a/src/core/core.canvasHelpers.js b/src/core/core.canvasHelpers.js
index 42fac5c00b519c06828a29ff4baeff2fe8d93688..553730c7373638a2ff0e02d6e5306ac934ba1d44 100644 (file)
--- a/src/core/core.canvasHelpers.js
+++ b/src/core/core.canvasHelpers.js
@@ -109,4 +109,16 @@ module.exports = function(Chart) {
 
                ctx.stroke();
        };
+
+       helpers.clipArea = function(ctx, clipArea) {
+               ctx.save();
+               ctx.beginPath();
+               ctx.rect(clipArea.left, clipArea.top, clipArea.right - clipArea.left, clipArea.bottom - clipArea.top);
+               ctx.clip();
+       };
+
+       helpers.unclipArea = function(ctx) {
+               ctx.restore();
+       };
+
 };

diff --git a/src/elements/element.point.js b/src/elements/element.point.js
index fe3a6696bd1e09e8a8b206ae6c394c3fc0d5a566..c68edc7861b694d5975cfa25e97055dbe4d14a96 100644 (file)
--- a/src/elements/element.point.js
+++ b/src/elements/element.point.js
@@ -56,13 +56,17 @@ module.exports = function(Chart) {
                                padding: vm.radius + vm.borderWidth
                        };
                },
-               draw: function() {
+               draw: function(chartArea) {
                        var vm = this._view;
+                       var model = this._model;
                        var ctx = this._chart.ctx;
                        var pointStyle = vm.pointStyle;
                        var radius = vm.radius;
                        var x = vm.x;
                        var y = vm.y;
+                       var color = Chart.helpers.color;
+                       var errMargin = 1.01; // 1.01 is margin for Accumulated error. (Especially Edge, IE.)
+                       var ratio = 0;
 
                        if (vm.skip) {
                                return;
@@ -72,6 +76,24 @@ module.exports = function(Chart) {
                        ctx.lineWidth = helpers.getValueOrDefault(vm.borderWidth, globalOpts.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();
+                       }
+
                        Chart.canvasHelpers.drawPoint(ctx, pointStyle, radius, x, y);
                }
        });