diff --git a/docs/01-Line-Chart.md b/docs/01-Line-Chart.md index 3dc606337..a4b6394ab 100644 --- a/docs/01-Line-Chart.md +++ b/docs/01-Line-Chart.md @@ -66,6 +66,12 @@ These are the customisation options specific to Line charts. These options are m //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, diff --git a/docs/02-Bar-Chart.md b/docs/02-Bar-Chart.md index b4253e746..80b1999e5 100644 --- a/docs/02-Bar-Chart.md +++ b/docs/02-Bar-Chart.md @@ -65,6 +65,12 @@ These are the customisation options specific to Bar charts. These options are me //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, @@ -140,4 +146,4 @@ Calling `removeData()` on your Chart instance will remove the first value for al ```javascript myBarChart.removeData(); // The chart will now animate and remove the first bar -``` \ No newline at end of file +``` 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 4da056f5f..7cea99535 100755 --- a/src/Chart.Core.js +++ b/src/Chart.Core.js @@ -1597,14 +1597,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; @@ -1617,10 +1627,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; @@ -1636,9 +1648,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 @@ -1649,10 +1669,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);