From 4ab6d7cc2a947c39f33a09b1d79244f670adad2a Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Fri, 3 Jan 2020 13:55:50 -0500 Subject: [PATCH] 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 --- docs/axes/styling.md | 2 + src/core/core.scale.js | 6 +- .../cartesian-axis-border-settings.json | 58 ++++++++++++++++++ .../cartesian-axis-border-settings.png | Bin 0 -> 1633 bytes 4 files changed, 63 insertions(+), 3 deletions(-) create mode 100644 test/fixtures/core.scale/cartesian-axis-border-settings.json create mode 100644 test/fixtures/core.scale/cartesian-axis-border-settings.png diff --git a/docs/axes/styling.md b/docs/axes/styling.md index e26789eaf..fa0a619fd 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 db7c10aed..60d3625d8 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 000000000..47196ae15 --- /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 0000000000000000000000000000000000000000..390096f5cfa9248e7726fa89ae5d7a9aa9de937a GIT binary patch literal 1633 zc-rd>@N?(olHy`uVBq!ia0y~yU;;83893O0)X@p&(is@oG(24#Ln`LHy&In$6Do1^ z;nj$ojF1*353Orvo%Q?vv)_r6IcVaUc%|^1U9~O$n%!}4zGv0>E;CVRR32Y>`!|f?!690D3nXyB z$<4^`?!A0g20b5Idkc3^${Z=3^xd=0?^E9M?FT+`GCW{dH~G)Rw}<~PSJ|J^&G_KH z5W|5d>n7EB75z>r_uO~$V{AbV6T^%ffBXIacFujq9~+)GKls4HP#|D_)9%OnNACYW+~;Iq&`@DuSTKQsp}`55 zFu4c`O#7~NyMEc{viI!_!h#GNwyaj!ueP&(%j(#8mNSkF2R6m2R-X8F|GC}0zw`Q; z)D#&KBJ(%@efxhY!-v-l5m!Bqt-Sqv?ScPJ3=HvV3<;UvE9DsYckknv(ag}WH1_Fd zeTH8`3L69&0uI_Uv)HMV;xHlwB2GZuz;K|I81+9EnS1W@F53Lvnc%kfp2Aj`%Cy&?2F>LpIH@Rl-?Xb@~D0%As!3SWJz(`G10q?HvY z0`~v(HAUSZnmPJuM){eevY#WL zih*eMZKp22n*o&Cd`cHY^W{ukeAiIC{7m}P=sQ4K=7yI0?qt1pGtO&m-vOj8HiY(- l9gn$VI6pM65KP-MYCZler|5Nv8CZ2Nc)I$ztaD0e0s#9W#=`&r literal 0 Hc-jL100001 -- 2.47.2