diff --git a/docs/axes/styling.md b/docs/axes/styling.md index e26789eaf82..fa0a619fd7e 100644 --- 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` | Color|Color[]|function | `'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 db7c10aed81..60d3625d825 100644 --- 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 index 00000000000..47196ae1555 --- /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 index 00000000000..390096f5cfa Binary files /dev/null and b/test/fixtures/core.scale/cartesian-axis-border-settings.png differ