Added borderDash support for grid lines (#3136) (#3142)

* Added borderDash support for grid lines (#3136) * Save and restore context to prevent border dash being applied to other elements * Adds support for borderDashOffset, checks for setLineDash (IE9/IE10) * Fixes tests
chartjs · Aug 12, 2016 · 349a8a3 · 349a8a3
1 parent 3119797
commit 349a8a3
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 3 deletions.
diff --git a/docs/02-Scales.md b/docs/02-Scales.md
@@ -46,6 +46,8 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 display | Boolean | true |
 color | Color or Array[Color] | "rgba(0, 0, 0, 0.1)" | Color of the grid lines.
+borderDash | Array[Number] | [] | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
+borderDashOffset | Number | 0.0 | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
 lineWidth | Number or Array[Number] | 1 | Stroke width of grid lines
 drawBorder | Boolean | true | If true draw border on the edge of the chart
 drawOnChartArea | Boolean | true | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
@@ -19,7 +19,9 @@ module.exports = function(Chart) {
 			tickMarkLength: 10,
 			zeroLineWidth: 1,
 			zeroLineColor: "rgba(0,0,0,0.25)",
-			offsetGridLines: false
+			offsetGridLines: false,
+			borderDash: [],
+			borderDashOffset: 0.0
 		},
 
 		// scale label
@@ -502,6 +504,8 @@ module.exports = function(Chart) {
 			var tickFontFamily = helpers.getValueOrDefault(optionTicks.fontFamily, globalDefaults.defaultFontFamily);
 			var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
 			var tl = gridLines.tickMarkLength;
+			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 scaleLabelFontSize = helpers.getValueOrDefault(scaleLabel.fontSize, globalDefaults.defaultFontSize);
@@ -641,6 +645,8 @@ module.exports = function(Chart) {
 					labelY: labelY,
 					glWidth: lineWidth,
 					glColor: lineColor,
+					glBorderDash: borderDash,
+					glBorderDashOffset: borderDashOffset,
 					rotation: -1 * labelRotationRadians,
 					label: label,
 					textBaseline: textBaseline,
@@ -651,8 +657,13 @@ module.exports = function(Chart) {
 			// Draw all of the tick labels, tick marks, and grid lines at the correct places
 			helpers.each(itemsToDraw, function(itemToDraw) {
 				if (gridLines.display) {
+					context.save();
 					context.lineWidth = itemToDraw.glWidth;
 					context.strokeStyle = itemToDraw.glColor;
+					if (context.setLineDash) {
+						context.setLineDash(itemToDraw.glBorderDash);
+						context.lineDashOffset = itemToDraw.glBorderDashOffset;
+					}
 
 					context.beginPath();
 
@@ -667,6 +678,7 @@ module.exports = function(Chart) {
 					}
 
 					context.stroke();
+					context.restore();
 				}
 
 				if (optionTicks.display) {

diff --git a/test/core.helpers.tests.js b/test/core.helpers.tests.js
@@ -224,6 +224,8 @@ describe('Core helper tests', function() {
 						display: true,
 						zeroLineColor: "rgba(0,0,0,0.25)",
 						zeroLineWidth: 1,
+						borderDash: [],
+						borderDashOffset: 0.0
 					},
 					position: "right",
 					scaleLabel: {
@@ -258,6 +260,8 @@ describe('Core helper tests', function() {
 						display: true,
 						zeroLineColor: "rgba(0,0,0,0.25)",
 						zeroLineWidth: 1,
+						borderDash: [],
+						borderDashOffset: 0.0
 					},
 					position: "left",
 					scaleLabel: {

diff --git a/test/scale.category.tests.js b/test/scale.category.tests.js
@@ -22,7 +22,9 @@ describe('Category scale tests', function() {
 				offsetGridLines: false,
 				display: true,
 				zeroLineColor: "rgba(0,0,0,0.25)",
-				zeroLineWidth: 1
+				zeroLineWidth: 1,
+				borderDash: [],
+				borderDashOffset: 0.0
 			},
 			position: "bottom",
 			scaleLabel: {

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

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

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

diff --git a/test/scale.time.tests.js b/test/scale.time.tests.js
@@ -55,7 +55,9 @@ describe('Time scale tests', function() {
 				offsetGridLines: false,
 				display: true,
 				zeroLineColor: "rgba(0,0,0,0.25)",
-				zeroLineWidth: 1
+				zeroLineWidth: 1,
+				borderDash: [],
+				borderDashOffset: 0.0
 			},
 			position: "bottom",
 			scaleLabel: {