Bring back capping of bezier curve points and have an option to disable it (#2948)

diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md
index 57c06284dea73f1d34f6c7b5633841c3a227ecea..5a86274566f7f1aa1d34fadfd96d34a56331ea8b 100644 (file)
--- a/docs/01-Chart-Configuration.md
+++ b/docs/01-Chart-Configuration.md
@@ -369,6 +369,7 @@ borderCapStyle | String | 'butt' | Default line cap style. See [MDN](https://dev
 borderDash | Array | `[]` | Default line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
 borderDashOffset | Number | 0.0 | Default line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
 borderJoinStyle | String | 'miter' | Default line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin)
+capBezierPoints | Boolean | true | If true, bezier control points are kept inside the chart. If false, no restriction is enforced.
 fill | Boolean | true | If true, the line is filled.
 stepped | Boolean | false | If true, the line is shown as a steeped line and 'tension' will be ignored
 

diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
index caee9c68314d7d597ae2645547df211728bd8720..b184aff0305062ddf6b0a6b6d15176649c15c9ee 100644 (file)
--- a/src/controllers/controller.line.js
+++ b/src/controllers/controller.line.js
@@ -244,10 +244,17 @@ module.exports = function(Chart) {
                },
 
                updateBezierControlPoints: function() {
-                       var meta = this.getMeta();
+                       var me = this;
+                       var meta = me.getMeta();
+                       var area = me.chart.chartArea;
                        var points = meta.data || [];
                        var i, ilen, point, model, controlPoints;
 
+                       var needToCap = me.chart.options.elements.line.capBezierPoints;
+                       function capIfNecessary(pt, min, max) {
+                               return needToCap ? Math.max(Math.min(pt, max), min) : pt;
+                       }
+
                        for (i=0, ilen=points.length; i<ilen; ++i) {
                                point = points[i];
                                model = point._model;
@@ -258,10 +265,10 @@ module.exports = function(Chart) {
                                        meta.dataset._model.tension
                                );
 
-                               model.controlPointPreviousX = controlPoints.previous.x;
-                               model.controlPointPreviousY = controlPoints.previous.y;
-                               model.controlPointNextX = controlPoints.next.x;
-                               model.controlPointNextY = controlPoints.next.y;
+                               model.controlPointPreviousX = capIfNecessary(controlPoints.previous.x, area.left, area.right);
+                               model.controlPointPreviousY = capIfNecessary(controlPoints.previous.y, area.top, area.bottom);
+                               model.controlPointNextX = capIfNecessary(controlPoints.next.x, area.left, area.right);
+                               model.controlPointNextY = capIfNecessary(controlPoints.next.y, area.top, area.bottom);
                        }
                },
 

diff --git a/src/elements/element.line.js b/src/elements/element.line.js
index 21a609544297e6a3722edcf9e0db38d912f362c9..dc8228febaec7f7022bfe67c59ba5637b8f7ce20 100644 (file)
--- a/src/elements/element.line.js
+++ b/src/elements/element.line.js
@@ -14,6 +14,7 @@ module.exports = function(Chart) {
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
+               capBezierPoints: true,
                fill: true // do we fill in the area between the line and its base axis
        };