Put the border opts in own object

docs/axes/_common.md

@@ -7,6 +7,7 @@ Namespace: `options.scales[scaleId]`
 | `type` | `string` | | Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart.
 | `alignToPixels` | `boolean` | `false` | Align pixel values to device pixels.
 | `backgroundColor` | [`Color`](/general/colors.md) | | Background color of the scale area.
+| `border` | `object` | | Border configuration. [more...](/axes/styling.md#border-configuration)
 | `display` | `boolean`\|`string` | `true` | Controls the axis global visibility (visible when `true`, hidden when `false`). When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible.
 | `grid` | `object` | | Grid line configuration. [more...](/axes/styling.md#grid-line-configuration)
 | `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](/axes/index.md#axis-range-settings)

docs/axes/styling.md

@@ -8,14 +8,9 @@ Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines
 
 | Name | Type | Scriptable | Indexable | Default | Description
 | ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
-| `borderColor` | [`Color`](../general/colors.md) | | | `Chart.defaults.borderColor` | The color of the border line.
-| `borderWidth` | `number` | | | `1` | The width of the border line.
-| `borderDash` | `number[]` | Yes | | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
-| `borderDashOffset` | `number` | Yes | | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
 | `circular` | `boolean` | | | `false` | If true, gridlines are circular (on radar and polar area charts only).
 | `color` | [`Color`](../general/colors.md)  | Yes | Yes | `Chart.defaults.borderColor` | 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.
 | `display` | `boolean` | | | `true` | If false, do not display grid lines for this axis.
-| `drawBorder` | `boolean` | | | `true` | If true, draw a border at the edge between the axis and the chart area.
 | `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.
 | `drawTicks` | `boolean` | | | `true` | If true, draw lines beside the ticks in the axis area beside the chart.
 | `lineWidth` | `number` | Yes | Yes | `1` | Stroke width of grid lines.
@@ -25,7 +20,7 @@ Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines
 | `tickColor` | [`Color`](../general/colors.md) | Yes | Yes | | Color of the tick line. If unset, defaults to the grid line color.
 | `tickLength` | `number` | | | `8` | Length in pixels that the grid lines will draw into the axis area.
 | `tickWidth` | `number` | Yes | Yes | | Width of the tick mark in pixels. If unset, defaults to the grid line width.
-| `z` | `number` | | | `0` | z-index of gridline layer. Values <= 0 are drawn under datasets, > 0 on top.
+| `z` | `number` | | | `-1` | z-index of the gridline layer. Values <= 0 are drawn under datasets, > 0 on top.
 
 The scriptable context is described in [Options](../general/options.md#tick) section.
 
@@ -42,3 +37,16 @@ Namespace: `options.scales[scaleId].ticks.major`, it defines options for the maj
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `enabled` | `boolean` | `false` | If true, major ticks are generated. A major tick will affect autoskipping and `major` will be defined on ticks in the scriptable options context.
+
+## Border Configuration
+
+Namespace: `options.scales[scaleId].border`, it defines options for the border that run perpendicular to the axis.
+
+| Name | Type | Scriptable | Indexable | Default | Description
+| ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
+| `display` | `boolean` | | | `true` | If true, draw a border at the edge between the axis and the chart area.
+| `color` | [`Color`](../general/colors.md) | | | `Chart.defaults.borderColor` | The color of the border line.
+| `width` | `number` | | | `1` | The width of the border line.
+| `dash` | `number[]` | Yes | | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
+| `dashOffset` | `number` | Yes | | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
+| `z` | `number` | | | `0` | z-index of the border layer. Values <= 0 are drawn under datasets, > 0 on top.

docs/migration/v4-migration.md

@@ -17,6 +17,12 @@ A number of changes were made to the configuration options passed to the `Chart`
 * The radialLinear grid indexable and scriptable options don't decrease the index of the specified grid line anymore.
 * The `destroy` plugin hook has been removed and replaced with `afterDestroy`.
 * Ticks callback on time scale now receives timestamp instead of a formatted label.
+* `scales[id].grid.drawBorder` has been renamed to `scales[id].border.display`.
+* `scales[id].grid.borderWidth` has been renamed to `scales[id].border.width`.
+* `scales[id].grid.borderColor` has been renamed to `scales[id].border.color`.
+* `scales[id].grid.borderDash` has been renamed to `scales[id].border.dash`.
+* `scales[id].grid.borderDashOffset` has been renamed to `scales[id].border.dashOffset`.
+* The z index for the border of a scale is now configurable instead of being 1 higher as the grid z index.
 * Linear scales now add and subtracts `5%` of the max value to the range if the min and max are the same instead of `1`.
 * If the tooltip callback returns `undefined`, then the default callback will be used.
 

docs/samples/scale-options/grid.md

@@ -61,16 +61,20 @@ const config = {
     },
     scales: {
       x: {
+        border: {
+          display: BORDER
+        },
         grid: {
           display: DISPLAY,
-          drawBorder: BORDER,
           drawOnChartArea: CHART_AREA,
           drawTicks: TICKS,
         }
       },
       y: {
+        border: {
+          display: false
+        },
         grid: {
-          drawBorder: false,
           color: function(context) {
             if (context.tick.value > 0) {
               return Utils.CHART_COLORS.green;

src/core/core.scale.defaults.js

@@ -26,16 +26,19 @@ export function applyScaleDefaults(defaults) {
     grid: {
       display: true,
       lineWidth: 1,
-      drawBorder: true,
       drawOnChartArea: true,
       drawTicks: true,
       tickLength: 8,
       tickWidth: (_ctx, options) => options.lineWidth,
       tickColor: (_ctx, options) => options.color,
       offset: false,
-      borderDash: [],
-      borderDashOffset: 0.0,
-      borderWidth: 1
+    },
+
+    border: {
+      display: true,
+      dash: [],
+      dashOffset: 0.0,
+      width: 1
     },
 
     // scale title
@@ -80,13 +83,13 @@ export function applyScaleDefaults(defaults) {
 
   defaults.route('scale.ticks', 'color', '', 'color');
   defaults.route('scale.grid', 'color', '', 'borderColor');
-  defaults.route('scale.grid', 'borderColor', '', 'borderColor');
+  defaults.route('scale.border', 'color', '', 'borderColor');
   defaults.route('scale.title', 'color', '', 'color');
 
   defaults.describe('scale', {
     _fallback: false,
     _scriptable: (name) => !name.startsWith('before') && !name.startsWith('after') && name !== 'callback' && name !== 'parser',
-    _indexable: (name) => name !== 'borderDash' && name !== 'tickBorderDash',
+    _indexable: (name) => name !== 'borderDash' && name !== 'tickBorderDash' && name !== 'dash',
   });
 
   defaults.describe('scales', {

src/core/core.scale.js

@@ -1004,16 +1004,16 @@ export default class Scale extends Element {
     const axis = this.axis;
     const chart = this.chart;
     const options = this.options;
-    const {grid, position} = options;
+    const {grid, position, border} = options;
     const offset = grid.offset;
     const isHorizontal = this.isHorizontal();
     const ticks = this.ticks;
     const ticksLength = ticks.length + (offset ? 1 : 0);
     const tl = getTickMarkLength(grid);
     const items = [];
 
-    const borderOpts = grid.setContext(this.getContext());
-    const axisWidth = borderOpts.drawBorder ? borderOpts.borderWidth : 0;
+    const borderOpts = border.setContext(this.getContext());
+    const axisWidth = borderOpts.display ? borderOpts.width : 0;
     const axisHalfWidth = axisWidth / 2;
     const alignBorderValue = function(pixel) {
       return _alignPixel(chart, pixel, axisWidth);
@@ -1076,12 +1076,14 @@ export default class Scale extends Element {
     const limit = valueOrDefault(options.ticks.maxTicksLimit, ticksLength);
     const step = Math.max(1, Math.ceil(ticksLength / limit));
     for (i = 0; i < ticksLength; i += step) {
-      const optsAtIndex = grid.setContext(this.getContext(i));
+      const context = this.getContext(i);
+      const optsAtIndex = grid.setContext(context);
+      const optsAtIndexBorder = border.setContext(context);
 
       const lineWidth = optsAtIndex.lineWidth;
       const lineColor = optsAtIndex.color;
-      const borderDash = optsAtIndex.borderDash || [];
-      const borderDashOffset = optsAtIndex.borderDashOffset;
+      const borderDash = optsAtIndexBorder.dash || [];
+      const borderDashOffset = optsAtIndexBorder.dashOffset;
 
       const tickWidth = optsAtIndex.tickWidth;
       const tickColor = optsAtIndex.tickColor;
@@ -1496,9 +1498,9 @@ export default class Scale extends Element {
 	 * @protected
 	 */
   drawBorder() {
-    const {chart, ctx, options: {grid}} = this;
-    const borderOpts = grid.setContext(this.getContext());
-    const axisWidth = grid.drawBorder ? borderOpts.borderWidth : 0;
+    const {chart, ctx, options: {border, grid}} = this;
+    const borderOpts = border.setContext(this.getContext());
+    const axisWidth = border.display ? borderOpts.width : 0;
     if (!axisWidth) {
       return;
     }
@@ -1516,8 +1518,8 @@ export default class Scale extends Element {
       x1 = x2 = borderValue;
     }
     ctx.save();
-    ctx.lineWidth = borderOpts.borderWidth;
-    ctx.strokeStyle = borderOpts.borderColor;
+    ctx.lineWidth = borderOpts.width;
+    ctx.strokeStyle = borderOpts.color;
 
     ctx.beginPath();
     ctx.moveTo(x1, y1);
@@ -1622,6 +1624,7 @@ export default class Scale extends Element {
     const opts = this.options;
     const tz = opts.ticks && opts.ticks.z || 0;
     const gz = valueOrDefault(opts.grid && opts.grid.z, -1);
+    const bz = valueOrDefault(opts.border && opts.border.z, 0);
 
     if (!this._isVisible() || this.draw !== Scale.prototype.draw) {
       // backward compatibility: draw has been overridden by custom scale
@@ -1641,7 +1644,7 @@ export default class Scale extends Element {
         this.drawTitle();
       }
     }, {
-      z: gz + 1, // TODO, v4 move border options to its own object and add z
+      z: bz,
       draw: () => {
         this.drawBorder();
       }

src/scales/scale.radialLinear.js

@@ -264,7 +264,7 @@ function pathRadiusLine(scale, radius, circular, labelCount) {
   }
 }
 
-function drawRadiusLine(scale, gridLineOpts, radius, labelCount) {
+function drawRadiusLine(scale, gridLineOpts, radius, labelCount, borderOpts) {
   const ctx = scale.ctx;
   const circular = gridLineOpts.circular;
 
@@ -277,8 +277,8 @@ function drawRadiusLine(scale, gridLineOpts, radius, labelCount) {
   ctx.save();
   ctx.strokeStyle = color;
   ctx.lineWidth = lineWidth;
-  ctx.setLineDash(gridLineOpts.borderDash);
-  ctx.lineDashOffset = gridLineOpts.borderDashOffset;
+  ctx.setLineDash(borderOpts.dash);
+  ctx.lineDashOffset = borderOpts.dashOffset;
 
   ctx.beginPath();
   pathRadiusLine(scale, radius, circular, labelCount);
@@ -527,7 +527,7 @@ export default class RadialLinearScale extends LinearScaleBase {
   drawGrid() {
     const ctx = this.ctx;
     const opts = this.options;
-    const {angleLines, grid} = opts;
+    const {angleLines, grid, border} = opts;
     const labelCount = this._pointLabels.length;
 
     let i, offset, position;
@@ -540,8 +540,11 @@ export default class RadialLinearScale extends LinearScaleBase {
       this.ticks.forEach((tick, index) => {
         if (index !== 0) {
           offset = this.getDistanceFromCenterForValue(tick.value);
-          const optsAtIndex = grid.setContext(this.getContext(index));
-          drawRadiusLine(this, optsAtIndex, offset, labelCount);
+          const context = this.getContext(index);
+          const optsAtIndex = grid.setContext(context);
+          const optsAtIndexBorder = border.setContext(context);
+
+          drawRadiusLine(this, optsAtIndex, offset, labelCount, optsAtIndexBorder);
         }
       });
     }

test/fixtures/core.layouts/stacked-boxes-with-weight.js

@@ -19,8 +19,8 @@ module.exports = {
           stackWeight: 2,
           offset: true,
           bounds: 'data',
-          grid: {
-            borderColor: 'red'
+          border: {
+            color: 'red'
           },
           ticks: {
             autoSkip: false,
@@ -35,8 +35,8 @@ module.exports = {
           stackWeight: 2,
           offset: true,
           bounds: 'data',
-          grid: {
-            borderColor: 'green'
+          border: {
+            color: 'green'
           },
           ticks: {
             autoSkip: false,
@@ -51,8 +51,8 @@ module.exports = {
           stackWeight: 6,
           offset: true,
           bounds: 'data',
-          grid: {
-            borderColor: 'blue'
+          border: {
+            color: 'blue'
           },
           ticks: {
             autoSkip: false,
@@ -66,8 +66,8 @@ module.exports = {
           stack: '1',
           stackWeight: 2,
           offset: true,
-          grid: {
-            borderColor: 'red'
+          border: {
+            color: 'red'
           },
           ticks: {
             precision: 0
@@ -79,8 +79,8 @@ module.exports = {
           stack: '1',
           offset: true,
           stackWeight: 2,
-          grid: {
-            borderColor: 'green'
+          border: {
+            color: 'green'
           },
           ticks: {
             precision: 0
@@ -92,8 +92,8 @@ module.exports = {
           stack: '1',
           stackWeight: 3,
           offset: true,
-          grid: {
-            borderColor: 'blue'
+          border: {
+            color: 'blue'
           },
           ticks: {
             precision: 0

test/fixtures/core.layouts/stacked-boxes.js

@@ -18,8 +18,8 @@ module.exports = {
           stack: '1',
           offset: true,
           bounds: 'data',
-          grid: {
-            borderColor: 'red'
+          border: {
+            color: 'red'
           },
           ticks: {
             autoSkip: false,
@@ -33,8 +33,8 @@ module.exports = {
           stack: '1',
           offset: true,
           bounds: 'data',
-          grid: {
-            borderColor: 'green'
+          border: {
+            color: 'green'
           },
           ticks: {
             autoSkip: false,
@@ -48,8 +48,8 @@ module.exports = {
           stack: '1',
           offset: true,
           bounds: 'data',
-          grid: {
-            borderColor: 'blue'
+          border: {
+            color: 'blue'
           },
           ticks: {
             autoSkip: false,
@@ -62,8 +62,8 @@ module.exports = {
           position: 'left',
           stack: '1',
           offset: true,
-          grid: {
-            borderColor: 'red'
+          border: {
+            color: 'red'
           },
           ticks: {
             precision: 0
@@ -74,8 +74,8 @@ module.exports = {
           position: 'left',
           stack: '1',
           offset: true,
-          grid: {
-            borderColor: 'green'
+          border: {
+            color: 'green'
           },
           ticks: {
             precision: 0
@@ -86,8 +86,8 @@ module.exports = {
           position: 'left',
           stack: '1',
           offset: true,
-          grid: {
-            borderColor: 'blue'
+          border: {
+            color: 'blue',
           },
           ticks: {
             precision: 0