Zero line dash options

* Add of zero line border dash options * Update Readme with zero line border dash config options
chartjs · Mar 21, 2017 · 6937437 · 6937437
1 parent 6e57405
commit 6937437
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 3 deletions.
diff --git a/docs/axes/styling.md b/docs/axes/styling.md
@@ -19,6 +19,8 @@ The grid line configuration is nested under the scale configuration in the `grid
 | `tickMarkLength` | `Number` | `10` | Length in pixels that the grid lines will draw into the axis area.
 | `zeroLineWidth` | `Number` | `1` | Stroke width of the grid line for the first index (index 0).
 | `zeroLineColor` | Color | `'rgba(0, 0, 0, 0.25)'` | Stroke color of the grid line for the first index (index 0).
+| `zeroLineBorderDash` | `Number[]` | `[]` | Length and spacing of dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
+| `zeroLineBorderDashOffset` | `Number` | `0` | Offset for line dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
 | `offsetGridLines` | `Boolean` | `false` | If true, labels are shifted to be between grid lines. This is used in the bar chart and should not generally be used.
 
 ## Tick Configuration

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
@@ -19,6 +19,8 @@ module.exports = function(Chart) {
 			tickMarkLength: 10,
 			zeroLineWidth: 1,
 			zeroLineColor: 'rgba(0,0,0,0.25)',
+			zeroLineBorderDash: [],
+			zeroLineBorderDashOffset: 0.0,
 			offsetGridLines: false,
 			borderDash: [],
 			borderDashOffset: 0.0
@@ -503,8 +505,6 @@ module.exports = function(Chart) {
 			var tickFont = parseFontOptions(optionTicks);
 
 			var tl = gridLines.drawTicks ? gridLines.tickMarkLength : 0;
-			var borderDash = helpers.getValueOrDefault(gridLines.borderDash, globalDefaults.borderDash);
-			var borderDashOffset = helpers.getValueOrDefault(gridLines.borderDashOffset, globalDefaults.borderDashOffset);
 
 			var scaleLabelFontColor = helpers.getValueOrDefault(scaleLabel.fontColor, globalDefaults.defaultFontColor);
 			var scaleLabelFont = parseFontOptions(scaleLabel);
@@ -561,14 +561,18 @@ module.exports = function(Chart) {
 					return;
 				}
 
-				var lineWidth, lineColor;
+				var lineWidth, lineColor, borderDash, borderDashOffset;
 				if (index === (typeof me.zeroLineIndex !== 'undefined' ? me.zeroLineIndex : 0)) {
 					// Draw the first index specially
 					lineWidth = gridLines.zeroLineWidth;
 					lineColor = gridLines.zeroLineColor;
+					borderDash = gridLines.zeroLineBorderDash;
+					borderDashOffset = gridLines.zeroLineBorderDashOffset;
 				} else {
 					lineWidth = helpers.getValueAtIndexOrDefault(gridLines.lineWidth, index);
 					lineColor = helpers.getValueAtIndexOrDefault(gridLines.color, index);
+					borderDash = helpers.getValueOrDefault(gridLines.borderDash, globalDefaults.borderDash);
+					borderDashOffset = helpers.getValueOrDefault(gridLines.borderDashOffset, globalDefaults.borderDashOffset);
 				}
 
 				// Common properties

diff --git a/test/specs/core.helpers.tests.js b/test/specs/core.helpers.tests.js
@@ -193,6 +193,8 @@ describe('Core helper tests', function() {
 						display: true,
 						zeroLineColor: 'rgba(0,0,0,0.25)',
 						zeroLineWidth: 1,
+						zeroLineBorderDash: [],
+						zeroLineBorderDashOffset: 0.0,
 						borderDash: [],
 						borderDashOffset: 0.0
 					},
@@ -229,6 +231,8 @@ describe('Core helper tests', function() {
 						display: true,
 						zeroLineColor: 'rgba(0,0,0,0.25)',
 						zeroLineWidth: 1,
+						zeroLineBorderDash: [],
+						zeroLineBorderDashOffset: 0.0,
 						borderDash: [],
 						borderDashOffset: 0.0
 					},

diff --git a/test/specs/scale.category.tests.js b/test/specs/scale.category.tests.js
@@ -23,6 +23,8 @@ describe('Category scale tests', function() {
 				display: true,
 				zeroLineColor: 'rgba(0,0,0,0.25)',
 				zeroLineWidth: 1,
+				zeroLineBorderDash: [],
+				zeroLineBorderDashOffset: 0.0,
 				borderDash: [],
 				borderDashOffset: 0.0
 			},

diff --git a/test/specs/scale.linear.tests.js b/test/specs/scale.linear.tests.js
@@ -21,6 +21,8 @@ describe('Linear Scale', function() {
 				display: true,
 				zeroLineColor: 'rgba(0,0,0,0.25)',
 				zeroLineWidth: 1,
+				zeroLineBorderDash: [],
+				zeroLineBorderDashOffset: 0.0,
 				borderDash: [],
 				borderDashOffset: 0.0
 			},

diff --git a/test/specs/scale.logarithmic.tests.js b/test/specs/scale.logarithmic.tests.js
@@ -20,6 +20,8 @@ describe('Logarithmic Scale tests', function() {
 				display: true,
 				zeroLineColor: 'rgba(0,0,0,0.25)',
 				zeroLineWidth: 1,
+				zeroLineBorderDash: [],
+				zeroLineBorderDashOffset: 0.0,
 				borderDash: [],
 				borderDashOffset: 0.0
 			},

diff --git a/test/specs/scale.radialLinear.tests.js b/test/specs/scale.radialLinear.tests.js
@@ -28,6 +28,8 @@ describe('Test the radial linear scale', function() {
 				display: true,
 				zeroLineColor: 'rgba(0,0,0,0.25)',
 				zeroLineWidth: 1,
+				zeroLineBorderDash: [],
+				zeroLineBorderDashOffset: 0.0,
 				borderDash: [],
 				borderDashOffset: 0.0
 			},

diff --git a/test/specs/scale.time.tests.js b/test/specs/scale.time.tests.js
@@ -45,6 +45,8 @@ describe('Time scale tests', function() {
 				display: true,
 				zeroLineColor: 'rgba(0,0,0,0.25)',
 				zeroLineWidth: 1,
+				zeroLineBorderDash: [],
+				zeroLineBorderDashOffset: 0.0,
 				borderDash: [],
 				borderDashOffset: 0.0
 			},