Enable override settings for the axis border (#6883)

* Enable override settings for the axis border - #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.

* Correct spelling

diff --git a/docs/axes/styling.md b/docs/axes/styling.md
index e26789eaf82552c6d8956eae89210952b1410aa0..fa0a619fd7e6a98f8d2dc894af66f30850fd438b 100644 (file)
--- a/docs/axes/styling.md
+++ b/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 color 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).

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index db7c10aed81b15ca6102fa48638e28ce5a79d047..60d3625d825aa3960c9bbfa5df469b25368f1e9f 100644 (file)
--- a/src/core/core.scale.js
+++ b/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);

diff --git a/test/fixtures/core.scale/cartesian-axis-border-settings.json b/test/fixtures/core.scale/cartesian-axis-border-settings.json
new file mode 100644 (file)
index 0000000..47196ae
--- /dev/null
+++ b/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
+        }
+    }
+}

diff --git a/test/fixtures/core.scale/cartesian-axis-border-settings.png b/test/fixtures/core.scale/cartesian-axis-border-settings.png
new file mode 100644 (file)
index 0000000..390096f
Binary files /dev/null and b/test/fixtures/core.scale/cartesian-axis-border-settings.png differ