Linear scale drawing improvements. Ensured that the scatter plot configuration has...

diff --git a/src/Chart.Scale.js b/src/Chart.Scale.js
index c991dfea491c6ce488f053aeec43307f97cf0af1..681f44bc83d2b5729bb1d9473cfea3990c21e301 100644 (file)
--- a/src/Chart.Scale.js
+++ b/src/Chart.Scale.js
@@ -506,20 +506,6 @@
                                                hasZero = helpers.findNextWhere(this.ticks, function(tick) { return tick === 0; }) !== undefined;
                                                var yTickStart = this.options.position == "bottom" ? this.top : this.bottom - 10;
                                                var yTickEnd = this.options.position == "bottom" ? this.top + 10 : this.bottom;
-                                               
-                                               this.ctx.lineWidth = this.options.gridLines.zeroLineWidth;
-                                               this.ctx.strokeStyle = this.options.gridLines.zeroLineColor;
-                                               
-                                               this.ctx.beginPath();
-                                               
-                                               if (this.options.position == "top") {
-                                                       this.ctx.moveTo(this.left, this.bottom - 5);
-                                                       this.ctx.lineTo(this.right, this.bottom - 5);
-                                               } else {
-                                                       // On bottom, so draw horizontal line on the top
-                                                       this.ctx.moveTo(this.left, this.top + 5);
-                                                       this.ctx.lineTo(this.right, this.top + 5);
-                                               }
 
                                                helpers.each(this.ticks, function(tick, index) {
                                                        // Grid lines are vertical
@@ -539,6 +525,7 @@
                                                        xValue += helpers.aliasPixel(this.ctx.lineWidth);
                                                        
                                                        // Draw the label area
+                                                       this.ctx.beginPath();
                                                        this.ctx.moveTo(xValue, yTickStart);
                                                        this.ctx.lineTo(xValue, yTickEnd);
                                                        
@@ -547,9 +534,10 @@
                                                                this.ctx.moveTo(xValue, chartArea.top);
                                                                this.ctx.lineTo(xValue, chartArea.bottom);
                                                        }
+
+                                                       // Need to stroke in the loop because we are potentially changing line widths & colours
+                                                       this.ctx.stroke();
                                                }, this);
-                                               
-                                               this.ctx.stroke();
                                        }
 
                                        if (this.options.labels.show) {
@@ -580,22 +568,8 @@
                                                // Draw the vertical line
                                                setContextLineSettings = true;
                                                hasZero = helpers.findNextWhere(this.ticks, function(tick) { return tick === 0; }) !== undefined;
-                                               var xTickStart = this.options.position == "left" ? this.left : this.right - 10;
-                                               var xTickEnd = this.options.position == "left" ? this.left + 10 : this.right;
-                                               
-                                               this.ctx.lineWidth = this.options.gridLines.zeroLineWidth;
-                                               this.ctx.strokeStyle = this.options.gridLines.zeroLineColor;
-                                               
-                                               this.ctx.beginPath();
-                                               
-                                               if (this.options.position == "left") {
-                                                       this.ctx.moveTo(this.right - 5, this.top);
-                                                       this.ctx.lineTo(this.right - 5, this.bottom);
-                                               } else {
-                                                       // On right, so draw vertical line on left size of axis block
-                                                       this.ctx.moveTo(this.left + 5, this.top);
-                                                       this.ctx.lineTo(this.left + 5, this.bottom);
-                                               }
+                                               var xTickStart = this.options.position == "right" ? this.left : this.right - 10;
+                                               var xTickEnd = this.options.position == "right" ? this.left + 10 : this.right;
                                                
                                                helpers.each(this.ticks, function(tick, index) {
                                                        // Grid lines are horizontal
@@ -609,10 +583,13 @@
                                                        } else if (setContextLineSettings) {
                                                                this.ctx.lineWidth = this.options.gridLines.lineWidth;
                                                                this.ctx.strokeStyle = this.options.gridLines.color;
-                                                               setContextLineSettings = false;
+                                                               setContextLineSettings = false; // use boolean to indicate that we only want to do this once
                                                        }
                                                        
+                                                       yValue += helpers.aliasPixel(this.ctx.lineWidth);
+
                                                        // Draw the label area
+                                                       this.ctx.beginPath();
                                                        this.ctx.moveTo(xTickStart, yValue);
                                                        this.ctx.lineTo(xTickEnd, yValue);
                                                        
@@ -621,9 +598,9 @@
                                                                this.ctx.moveTo(chartArea.left, yValue);
                                                                this.ctx.lineTo(chartArea.right, yValue);
                                                        }
+
+                                                       this.ctx.stroke();
                                                }, this);
-                                               
-                                               this.ctx.stroke();
                                        }
                                        
                                        if (this.options.labels.show) {

diff --git a/src/Chart.Scatter.js b/src/Chart.Scatter.js
index d1c6b8b2a5b0d3e46309b01b499d40b5b00b9a58..3a364e30ad766515e72c9ba9474b933d87d9914e 100644 (file)
--- a/src/Chart.Scatter.js
+++ b/src/Chart.Scatter.js
@@ -355,6 +355,8 @@
                                        color: "rgba(0, 0, 0, 0.05)",
                                        lineWidth: 1,
                                        drawOnChartArea: true,
+                    zeroLineWidth: 1,
+                    zeroLineColor: "rgba(0,0,0,0.25)",
                                },
 
                                // scale numbers
@@ -387,6 +389,8 @@
                                        color: "rgba(0, 0, 0, 0.05)",
                                        lineWidth: 1,
                                        drawOnChartArea: true,
+                    zeroLineWidth: 1,
+                    zeroLineColor: "rgba(0,0,0,0.25)",
                                },
 
                                // scale numbers