diff --git a/docs/02-Scales.md b/docs/02-Scales.md index 0885c2789cd..22401983cc1 100644 --- 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 index 2285d4f97a8..2610f104007 100644 --- 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();