From a3daf1ca24476b87e6015af5aae65fd53569fb69 Mon Sep 17 00:00:00 2001
From: Francisco Neves <fntneves@gmail.com>
Date: Mon, 8 Sep 2014 16:10:45 +0100
Subject: [PATCH] Add option to toggle grid vertical/horizontal lines

---
 src/Chart.Bar.js  | 10 +++++++++-
 src/Chart.Core.js | 47 +++++++++++++++++++++++++++++++++++------------
 src/Chart.Line.js | 10 +++++++++-
 3 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/src/Chart.Bar.js b/src/Chart.Bar.js
index fafe74a49..87fb26ddc 100644
--- a/src/Chart.Bar.js
+++ b/src/Chart.Bar.js
@@ -19,6 +19,12 @@
 		//Number - Width of the grid lines
 		scaleGridLineWidth : 1,
 
+		//Boolean - Whether to show horizontal lines (except X axis)
+		scaleShowHorizontalLines: true,
+
+		//Boolean - Whether to show vertical lines (except Y axis)
+		scaleShowVerticalLines: true,
+
 		//Boolean - If there is a stroke on each bar
 		barShowStroke : true,
 
@@ -206,6 +212,8 @@
 				font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
 				lineWidth : this.options.scaleLineWidth,
 				lineColor : this.options.scaleLineColor,
+				showHorizontalLines : this.options.scaleShowHorizontalLines,
+				showVerticalLines : this.options.scaleShowVerticalLines,
 				gridLineWidth : (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
 				gridLineColor : (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
 				padding : (this.options.showScale) ? 0 : (this.options.barShowStroke) ? this.options.barStrokeWidth : 0,
@@ -291,4 +299,4 @@
 	});
 
 
-}).call(this);
\ No newline at end of file
+}).call(this);
diff --git a/src/Chart.Core.js b/src/Chart.Core.js
index 03b99b45a..e514ccf70 100755
--- a/src/Chart.Core.js
+++ b/src/Chart.Core.js
@@ -1560,14 +1560,24 @@
 				ctx.font = this.font;
 				each(this.yLabels,function(labelString,index){
 					var yLabelCenter = this.endPoint - (yLabelGap * index),
-						linePositionY = Math.round(yLabelCenter);
+						linePositionY = Math.round(yLabelCenter),
+						drawHorizontalLine = this.showHorizontalLines;
 
 					ctx.textAlign = "right";
 					ctx.textBaseline = "middle";
 					if (this.showLabels){
 						ctx.fillText(labelString,xStart - 10,yLabelCenter);
 					}
-					ctx.beginPath();
+
+					// This is X axis, so draw it
+					if (index === 0 && !drawHorizontalLine){
+						drawHorizontalLine = true;
+					}
+
+					if (drawHorizontalLine){
+						ctx.beginPath();
+					}
+
 					if (index > 0){
 						// This is a grid line in the centre, so drop that
 						ctx.lineWidth = this.gridLineWidth;
@@ -1580,10 +1590,12 @@
 
 					linePositionY += helpers.aliasPixel(ctx.lineWidth);
 
-					ctx.moveTo(xStart, linePositionY);
-					ctx.lineTo(this.width, linePositionY);
-					ctx.stroke();
-					ctx.closePath();
+					if(drawHorizontalLine){
+						ctx.moveTo(xStart, linePositionY);
+						ctx.lineTo(this.width, linePositionY);
+						ctx.stroke();
+						ctx.closePath();
+					}
 
 					ctx.lineWidth = this.lineWidth;
 					ctx.strokeStyle = this.lineColor;
@@ -1599,9 +1611,17 @@
 					var xPos = this.calculateX(index) + aliasPixel(this.lineWidth),
 						// Check to see if line/bar here and decide where to place the line
 						linePos = this.calculateX(index - (this.offsetGridLines ? 0.5 : 0)) + aliasPixel(this.lineWidth),
-						isRotated = (this.xLabelRotation > 0);
+						isRotated = (this.xLabelRotation > 0),
+						drawVerticalLine = this.showVerticalLines;
 
-					ctx.beginPath();
+					// This is Y axis, so draw it
+					if (index === 0 && !drawVerticalLine){
+						drawVerticalLine = true;
+					}
+
+					if (drawVerticalLine){
+						ctx.beginPath();
+					}
 
 					if (index > 0){
 						// This is a grid line in the centre, so drop that
@@ -1612,10 +1632,13 @@
 						ctx.lineWidth = this.lineWidth;
 						ctx.strokeStyle = this.lineColor;
 					}
-					ctx.moveTo(linePos,this.endPoint);
-					ctx.lineTo(linePos,this.startPoint - 3);
-					ctx.stroke();
-					ctx.closePath();
+
+					if (drawVerticalLine){
+						ctx.moveTo(linePos,this.endPoint);
+						ctx.lineTo(linePos,this.startPoint - 3);
+						ctx.stroke();
+						ctx.closePath();
+					}
 
 
 					ctx.lineWidth = this.lineWidth;
diff --git a/src/Chart.Line.js b/src/Chart.Line.js
index 0b3079ffe..34ad85b4d 100644
--- a/src/Chart.Line.js
+++ b/src/Chart.Line.js
@@ -16,6 +16,12 @@
 		//Number - Width of the grid lines
 		scaleGridLineWidth : 1,
 
+		//Boolean - Whether to show horizontal lines (except X axis)
+		scaleShowHorizontalLines: true,
+
+		//Boolean - Whether to show vertical lines (except Y axis)
+		scaleShowVerticalLines: true,
+
 		//Boolean - Whether the line is curved between points
 		bezierCurve : true,
 
@@ -190,6 +196,8 @@
 				font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
 				lineWidth : this.options.scaleLineWidth,
 				lineColor : this.options.scaleLineColor,
+				showHorizontalLines : this.options.scaleShowHorizontalLines,
+				showVerticalLines : this.options.scaleShowVerticalLines,
 				gridLineWidth : (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
 				gridLineColor : (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
 				padding: (this.options.showScale) ? 0 : this.options.pointDotRadius + this.options.pointDotStrokeWidth,
@@ -363,4 +371,4 @@
 	});
 
 
-}).call(this);
\ No newline at end of file
+}).call(this);