Enable override settings for the axis border - chartjs#4041

Adds two new options to the cartesian axis: `borderColor` and `borderWidth`
which are used to control the border drawn at the edge of the axis area.
If these options are not set, the first grid line settings are used.

docs/axes/styling.md

@@ -9,6 +9,8 @@ The grid line configuration is nested under the scale configuration in the `grid
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `display` | `boolean` | `true` | If false, do not display grid lines for this axis.
+| `borderColor` | `Color` | | If set, used as the colour of the border line. If unset, the first `color` option is resolved and used.
+| `borderWidth` | `number` | | If set, used as the width of the border line. If unset, the first `lineWidth` option is resolved and used.
 | `circular` | `boolean` | `false` | If true, gridlines are circular (on radar chart only).
 | `color` | <code>Color&#124;Color[]&#124;function</code> | `'rgba(0, 0, 0, 0.1)'` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.
 | `borderDash` | `number[]` | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).

src/core/core.scale.js

@@ -976,7 +976,7 @@ class Scale extends Element {
 			scale: me,
 			tick: ticks[0],
 		};
-		var axisWidth = gridLines.drawBorder ? resolve([gridLines.lineWidth, 0], context, 0) : 0;
+		var axisWidth = gridLines.drawBorder ? resolve([gridLines.borderWidth, gridLines.lineWidth, 0], context, 0) : 0;
 		var axisHalfWidth = axisWidth / 2;
 		var alignBorderValue = function(pixel) {
 			return alignPixel(chart, pixel, axisWidth);
@@ -1186,7 +1186,7 @@ class Scale extends Element {
 			scale: me,
 			tick: me.ticks[0],
 		};
-		var axisWidth = gridLines.drawBorder ? resolve([gridLines.lineWidth, 0], context, 0) : 0;
+		var axisWidth = gridLines.drawBorder ? resolve([gridLines.borderWidth, gridLines.lineWidth, 0], context, 0) : 0;
 		var items = me._gridLineItems || (me._gridLineItems = me._computeGridLineItems(chartArea));
 		var width, color, i, ilen, item;
 
@@ -1243,7 +1243,7 @@ class Scale extends Element {
 			}
 
 			ctx.lineWidth = axisWidth;
-			ctx.strokeStyle = resolve([gridLines.color], context, 0);
+			ctx.strokeStyle = resolve([gridLines.borderColor, gridLines.color], context, 0);
 			ctx.beginPath();
 			ctx.moveTo(x1, y1);
 			ctx.lineTo(x2, y2);

test/fixtures/core.scale/cartesian-axis-border-settings.json

@@ -0,0 +1,58 @@
+{
+    "config": {
+        "type": "scatter",
+        "data": {
+            "datasets": [{
+                "data": [{
+                    "x": -20,
+                    "y": -30
+                }, {
+                    "x": 0,
+                    "y": 0
+                }, {
+                    "x": 20,
+                    "y": 15
+                }]
+            }]
+        },
+        "options": {
+            "legend": false,
+            "title": false,
+            "scales": {
+                "x": {
+                    "axis": "x",
+                    "min": -100,
+                    "max": 100,
+                    "gridLines": {
+                        "borderColor": "blue",
+                        "borderWidth": 5,
+                        "color": "red",
+                        "drawBorder": true,
+                        "drawOnChartArea": false
+                    },
+                    "ticks": {
+                        "display": false
+                    }
+                },
+                "y": {
+                    "axis": "y",
+                    "min": -100,
+                    "max": 100,
+                    "gridLines": {
+                        "color": "red",
+                        "drawOnChartArea": false
+                    },
+                    "ticks": {
+                        "display": false
+                    }
+                }
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}