Add back line fill option. This is set on a per dataset basis, but there is an overri...

diff --git a/samples/line.html b/samples/line.html
index 826a568668cd5a5e036e4495c9c602f0f32863c5..7f96c553a256431897a56dfc18368cbb5e05d2aa 100644 (file)
--- a/samples/line.html
+++ b/samples/line.html
@@ -26,7 +26,8 @@
         labels: ["January", "February", "March", "April", "May", "June", "July"],
         datasets: [{
             label: "My First dataset",
-            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+            fill: false
         }, {
             label: "My Second dataset",
             data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]

diff --git a/src/Chart.Core.js b/src/Chart.Core.js
index a41e81f0e2a28d3abfb708c04eaec749c259c474..a3b41c9014d2b76e8684d40e760c9ff4068432ea 100755 (executable)
--- a/src/Chart.Core.js
+++ b/src/Chart.Core.js
@@ -99,6 +99,8 @@
                     backgroundColor: defaultColor,
                     borderWidth: 3,
                     borderColor: defaultColor,
+                    fill: true, // do we fill in the area between the line and the x axis
+
                     // Hover
                     hitRadius: 6,
                     hoverBorderWidth: 2,
@@ -1271,10 +1273,11 @@
                 }
             }
 
-            if (this._children.length > 0) {
+            // If we had points and want to fill this line, do so.
+            if (this._children.length > 0 && vm.fill) {
                 //Round off the line by going to the base of the chart, back to the start, then fill.
-                ctx.lineTo(this._children[this._children.length - 1].x, vm.scaleZero);
-                ctx.lineTo(this._children[0].x, vm.scaleZero);
+                ctx.lineTo(this._children[this._children.length - 1]._view.x, vm.scaleZero);
+                ctx.lineTo(this._children[0]._view.x, vm.scaleZero);
                 ctx.fillStyle = vm.backgroundColor || Chart.defaults.global.defaultColor;
                 ctx.closePath();
                 ctx.fill();

diff --git a/src/Chart.Line.js b/src/Chart.Line.js
index ec2c766a63dcf8f58efc5bcc6bd79fb410609e2c..fa54cb96da68b28f666aa85c9498801b6ab8545a 100644 (file)
--- a/src/Chart.Line.js
+++ b/src/Chart.Line.js
@@ -170,6 +170,8 @@
                         backgroundColor: dataset.backgroundColor || this.options.elements.line.backgroundColor,
                         borderWidth: dataset.borderWidth || this.options.elements.line.borderWidth,
                         borderColor: dataset.borderColor || this.options.elements.line.borderColor,
+                        fill: dataset.fill !== undefined ? dataset.fill : this.options.elements.line.fill, // use the value from the dataset if it was provided. else fall back to the default
+
                         // Scale
                         scaleTop: yScale.top,
                         scaleBottom: yScale.bottom,