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

diff --git a/docs/02-Scales.md b/docs/02-Scales.md
index dbf2a502c7cb7e8535e2becb10f5a95475f89438..813b44c154f7418c3bb3bdce60c026805e62fdb6 100644 (file)
--- 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 183630f8fc417c05806be76e037e235917f65ae4..b3010874ce743ae10573343b811373b5dca26c57 100644 (file)
--- 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 ccc59c14ace2ce6f673c9c20fd8ee9da1a12e806..d8a121ea82b8b13707de853bb2e1d1bed4102686 100644 (file)
--- 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 721c22a05f29fb0ca76cbcdd23634515b86ede36..b7fab63ebcba4215cb3d32ed84f12c143087eeb7 100644 (file)
--- 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 ba37d5ef508ab2f60207db4b648cd6f133564614..13d9f28da0681609abd8c2047f7709d3f8bb58d4 100644 (file)
--- 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 c167c4edfc0d6c09c99b9b18886f67aa993ef54f..fab8c7d145786514bf659cae937a22cae7832075 100644 (file)
--- 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 bb84181e1a243dbc61b184422b1a99c95598a4fb..29aa59255050ac6b1e675f308395c85c77e03900 100644 (file)
--- 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 88a21dda6c25a3772680944d6fdcaf9859031689..9e8a281ad1330263b80a01a5e3954984b52a2734 100755 (executable)
--- 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: {