Adds support for borderDashOffset, checks for setLineDash (IE9/IE10)

chartjs · Aug 12, 2016 · 2f6b9d9 · 2f6b9d9
1 parent 4eaa7f2
commit 2f6b9d9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/docs/02-Scales.md b/docs/02-Scales.md
@@ -47,6 +47,7 @@ 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 | 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,7 +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 = gridLines.borderDash;
+			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);
@@ -643,6 +646,7 @@ module.exports = function(Chart) {
 					glWidth: lineWidth,
 					glColor: lineColor,
 					glBorderDash: borderDash,
+					glBorderDashOffset: borderDashOffset,
 					rotation: -1 * labelRotationRadians,
 					label: label,
 					textBaseline: textBaseline,
@@ -656,8 +660,9 @@ module.exports = function(Chart) {
 					context.save();
 					context.lineWidth = itemToDraw.glWidth;
 					context.strokeStyle = itemToDraw.glColor;
-					if (itemToDraw.glBorderDash) {
+					if (context.setLineDash && itemToDraw.glBorderDash) {
 						context.setLineDash(itemToDraw.glBorderDash);
+						context.lineDashOffset = itemToDraw.glBorderDashOffset;
 					}
 
 					context.beginPath();