Can now change more properties for line drawing. Updated the sample file to demo

diff --git a/samples/line.html b/samples/line.html
index f4962480f4c43afd178caa7ff9173ec72475667c..edcca91ecfade5b6e2cd61c3333914f8da949812 100644 (file)
--- a/samples/line.html
+++ b/samples/line.html
@@ -42,6 +42,7 @@
                 label: "My First dataset",
                 data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
                 fill: false,
+                borderDash: [5, 5],
             }, {
                 label: "My Second dataset",
                 data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],

diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
index 34680dc068a55b82cf57755a7efa7f9fa843c486..d007498a8960d8995d6bbb391ae8ebf52468ee62 100644 (file)
--- a/src/controllers/controller.line.js
+++ b/src/controllers/controller.line.js
@@ -131,6 +131,10 @@
                                        backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
                                        borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
                                        borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
+                                       borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle),
+                                       borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash),
+                                       borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset),
+                                       borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle),
                                        fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill),
                                        skipNull: this.getDataset().skipNull !== undefined ? this.getDataset().skipNull : this.chart.options.elements.line.skipNull,
                                        drawNull: this.getDataset().drawNull !== undefined ? this.getDataset().drawNull : this.chart.options.elements.line.drawNull,

diff --git a/src/elements/element.line.js b/src/elements/element.line.js
index bd5ba83269c617d3db2f24e130bc69adbc7b7a9f..c03f066848aa069230415a1b9e9964b30505dc17 100644 (file)
--- a/src/elements/element.line.js
+++ b/src/elements/element.line.js
@@ -22,6 +22,10 @@
                backgroundColor: Chart.defaults.global.defaultColor,
                borderWidth: 3,
                borderColor: Chart.defaults.global.defaultColor,
+               borderCapStyle: 'butt',
+               borderDash: [],
+               borderDashOffset: 0.0,
+               borderJoinStyle: 'miter',
                fill: true, // do we fill in the area between the line and its base axis
                skipNull: true,
                drawNull: false,
@@ -36,6 +40,8 @@
                        var first = this._children[0];
                        var last = this._children[this._children.length - 1];
 
+                       ctx.save();
+
                        // Draw the background first (so the border is always on top)
                        helpers.each(this._children, function(point, index) {
                                var previous = helpers.previousItem(this._children, index);
@@ -107,6 +113,10 @@
 
 
                        // Now draw the line between all the points with any borders
+                       ctx.lineCap = vm.borderCapStyle || Chart.defaults.global.elements.line.borderCapStyle;
+                       ctx.setLineDash(vm.borderDash || Chart.defaults.global.elements.line.borderDash);
+                       ctx.lineDashOffset = vm.borderDashOffset || Chart.defaults.global.elements.line.borderDashOffset;
+                       ctx.lineJoin = vm.borderJoinStyle || Chart.defaults.global.elements.line.borderJoinStyle;
                        ctx.lineWidth = vm.borderWidth || Chart.defaults.global.defaultColor;
                        ctx.strokeStyle = vm.borderColor || Chart.defaults.global.defaultColor;
                        ctx.beginPath();
@@ -171,7 +181,7 @@
 
 
                        ctx.stroke();
-
+                       ctx.restore();
                },
        });