diff --git a/docs/02-Scales.md b/docs/02-Scales.md index dbf2a502c7c..813b44c154f 100644 --- 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 index 183630f8fc4..b3010874ce7 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,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 index ccc59c14ace..d8a121ea82b 100644 --- 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 index 721c22a05f2..b7fab63ebcb 100644 --- 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 index ba37d5ef508..13d9f28da06 100644 --- 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 index c167c4edfc0..fab8c7d1457 100644 --- 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 index bb84181e1a2..29aa5925505 100644 --- 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 index 88a21dda6c2..9e8a281ad13 100755 --- 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: {