diff --git a/docs/axes/_common.md b/docs/axes/_common.md index 6a66bc38b09..e6e3d4c876a 100644 --- a/docs/axes/_common.md +++ b/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) diff --git a/docs/axes/styling.md b/docs/axes/styling.md index 19cd93b384a..4eb9bf0b428 100644 --- a/docs/axes/styling.md +++ b/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. diff --git a/docs/migration/v4-migration.md b/docs/migration/v4-migration.md index 743c6bc14da..bfbaaa9f0fc 100644 --- a/docs/migration/v4-migration.md +++ b/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. diff --git a/docs/samples/scale-options/grid.md b/docs/samples/scale-options/grid.md index e22b01e5e14..ff56f2cc8c8 100644 --- a/docs/samples/scale-options/grid.md +++ b/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; diff --git a/src/core/core.scale.defaults.js b/src/core/core.scale.defaults.js index d73ae84ef18..9a8556e3920 100644 --- a/src/core/core.scale.defaults.js +++ b/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', { diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 5d20d8216a6..4ad607903fd 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1004,7 +1004,7 @@ 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; @@ -1012,8 +1012,8 @@ export default class Scale extends Element { 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(); } diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index 7d323cdc173..1c9fb938c72 100644 --- a/src/scales/scale.radialLinear.js +++ b/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); } }); } diff --git a/test/fixtures/core.layouts/stacked-boxes-with-weight.js b/test/fixtures/core.layouts/stacked-boxes-with-weight.js index cbbb8754572..0c5d993d67a 100644 --- a/test/fixtures/core.layouts/stacked-boxes-with-weight.js +++ b/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 diff --git a/test/fixtures/core.layouts/stacked-boxes.js b/test/fixtures/core.layouts/stacked-boxes.js index e4fb345c5fb..7655c90188b 100644 --- a/test/fixtures/core.layouts/stacked-boxes.js +++ b/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 diff --git a/test/fixtures/core.scale/border-behind-elements.js b/test/fixtures/core.scale/border-behind-elements.js index c5d17182383..980e730a197 100644 --- a/test/fixtures/core.scale/border-behind-elements.js +++ b/test/fixtures/core.scale/border-behind-elements.js @@ -22,18 +22,18 @@ module.exports = { ticks: { display: false }, - grid: { - borderColor: 'red', - borderWidth: 5 + border: { + color: 'red', + width: 5 } }, x: { ticks: { display: false }, - grid: { - borderColor: 'red', - borderWidth: 5 + border: { + color: 'red', + width: 5 } } } diff --git a/test/fixtures/core.scale/cartesian-axis-border-settings.json b/test/fixtures/core.scale/cartesian-axis-border-settings.json index e71e8fd7a03..3543eaf7280 100644 --- a/test/fixtures/core.scale/cartesian-axis-border-settings.json +++ b/test/fixtures/core.scale/cartesian-axis-border-settings.json @@ -22,12 +22,14 @@ "min": -100, "max": 100, "grid": { - "borderColor": "blue", - "borderWidth": 5, "color": "red", - "drawBorder": true, "drawOnChartArea": false }, + "border": { + "display": true, + "color": "blue", + "width": 5 + }, "ticks": { "display": false } @@ -36,9 +38,11 @@ "axis": "y", "min": -100, "max": 100, + "border": { + "color": "red" + }, "grid": { "color": "red", - "borderColor": "red", "drawOnChartArea": false }, "ticks": { diff --git a/test/fixtures/core.scale/grid/border-over-grid.js b/test/fixtures/core.scale/grid/border-over-grid.js index 785a40456bc..cbe0acde40d 100644 --- a/test/fixtures/core.scale/grid/border-over-grid.js +++ b/test/fixtures/core.scale/grid/border-over-grid.js @@ -7,9 +7,11 @@ module.exports = { position: {y: 0}, min: -10, max: 10, + border: { + color: 'black', + width: 5 + }, grid: { - borderColor: 'black', - borderWidth: 5, color: 'lightGray', lineWidth: 3, }, @@ -21,9 +23,11 @@ module.exports = { position: {x: 0}, min: -10, max: 10, + border: { + color: 'black', + width: 5 + }, grid: { - borderColor: 'black', - borderWidth: 5, color: 'lightGray', lineWidth: 3, }, diff --git a/test/fixtures/core.scale/grid/colors.js b/test/fixtures/core.scale/grid/colors.js index e5765a170c2..017ec042e3d 100644 --- a/test/fixtures/core.scale/grid/colors.js +++ b/test/fixtures/core.scale/grid/colors.js @@ -14,9 +14,11 @@ module.exports = { ticks: { display: false }, + border: { + color: 'blue', + width: 2, + }, grid: { - borderColor: 'blue', - borderWidth: 2, color: 'green', drawTicks: false, } @@ -25,9 +27,11 @@ module.exports = { ticks: { display: false }, + border: { + color: 'black', + width: 2, + }, grid: { - borderColor: 'black', - borderWidth: 2, color: 'red', drawTicks: false, } diff --git a/test/fixtures/core.scale/grid/scriptable-borderDash.js b/test/fixtures/core.scale/grid/scriptable-borderDash.js index 8fabb498c4c..2471e64304b 100644 --- a/test/fixtures/core.scale/grid/scriptable-borderDash.js +++ b/test/fixtures/core.scale/grid/scriptable-borderDash.js @@ -7,8 +7,10 @@ module.exports = { position: {y: 0}, min: -10, max: 10, + border: { + dash: (ctx) => ctx.index % 2 === 0 ? [6, 3] : [], + }, grid: { - borderDash: (ctx) => ctx.index % 2 === 0 ? [6, 3] : [], color: 'lightGray', lineWidth: 3, }, @@ -20,8 +22,10 @@ module.exports = { position: {x: 0}, min: -10, max: 10, + border: { + dash: (ctx) => ctx.index % 2 === 0 ? [6, 3] : [], + }, grid: { - borderDash: (ctx) => ctx.index % 2 === 0 ? [6, 3] : [], color: 'lightGray', lineWidth: 3, }, diff --git a/test/fixtures/core.scale/label-offset-vertical-axes.json b/test/fixtures/core.scale/label-offset-vertical-axes.json index 381955acea7..ea182d4d5d5 100644 --- a/test/fixtures/core.scale/label-offset-vertical-axes.json +++ b/test/fixtures/core.scale/label-offset-vertical-axes.json @@ -15,17 +15,21 @@ "display": false }, "grid":{ - "display": false, - "drawBorder": false + "display": false + }, + "border": { + "display": false } }, "y": { "ticks": { "labelOffset": 25 }, + "border": { + "display": false + }, "grid":{ - "display": false, - "drawBorder": false + "display": false } } } diff --git a/test/fixtures/core.scale/tick-drawing.json b/test/fixtures/core.scale/tick-drawing.json index 369bf88cd67..9327a2b296a 100644 --- a/test/fixtures/core.scale/tick-drawing.json +++ b/test/fixtures/core.scale/tick-drawing.json @@ -15,9 +15,11 @@ "ticks": { "display": false }, + "border": { + "display": false + }, "grid":{ "drawOnChartArea": false, - "drawBorder": false, "color": "rgba(0, 0, 0, 1)" } }, @@ -27,9 +29,11 @@ "ticks": { "display": false }, + "border": { + "display": false + }, "grid":{ "drawOnChartArea": false, - "drawBorder": false, "color": "rgba(0, 0, 0, 1)" } }, @@ -43,10 +47,12 @@ "ticks": { "display": false }, + "border": { + "display": false + }, "grid":{ "offset": false, "drawOnChartArea": false, - "drawBorder": false, "color": "rgba(0, 0, 0, 1)" } }, @@ -59,10 +65,12 @@ "ticks": { "display": false }, + "border": { + "display": false + }, "grid":{ "offset": false, "drawOnChartArea": false, - "drawBorder": false, "color": "rgba(0, 0, 0, 1)" } } diff --git a/test/fixtures/core.scale/tick-override-styles.json b/test/fixtures/core.scale/tick-override-styles.json index c793190117b..23d8e81993d 100644 --- a/test/fixtures/core.scale/tick-override-styles.json +++ b/test/fixtures/core.scale/tick-override-styles.json @@ -15,9 +15,12 @@ "ticks": { "display": false }, + + "border": { + "display": false + }, "grid":{ "drawOnChartArea": false, - "drawBorder": false, "color": "rgba(0, 0, 0, 1)", "width": 1, "tickColor": "rgba(255, 0, 0, 1)", @@ -34,10 +37,12 @@ "ticks": { "display": false }, + "border": { + "display": false + }, "grid":{ "offset": false, "drawOnChartArea": false, - "drawBorder": false, "color": "rgba(0, 0, 0, 1)", "tickColor": "rgba(255, 0, 0, 1)", "tickWidth": 5 diff --git a/test/fixtures/core.scale/x-axis-position-center.json b/test/fixtures/core.scale/x-axis-position-center.json index 57124da11a8..98dda96fca0 100644 --- a/test/fixtures/core.scale/x-axis-position-center.json +++ b/test/fixtures/core.scale/x-axis-position-center.json @@ -22,13 +22,16 @@ "axis": "x", "min": -100, "max": 100, + "border": { + "color": "red" + }, "grid": { "color": "red", - "borderColor": "red", "drawOnChartArea": false }, "ticks": { - "display": true + "display": true, + "color": "red" } }, "y": { @@ -36,9 +39,11 @@ "axis": "y", "min": -100, "max": 100, + "border": { + "color": "red" + }, "grid": { "color": "red", - "borderColor": "red", "drawOnChartArea": false }, "ticks": { diff --git a/test/fixtures/core.scale/x-axis-position-dynamic.json b/test/fixtures/core.scale/x-axis-position-dynamic.json index 074cd9eea63..7fbe9aed2f9 100644 --- a/test/fixtures/core.scale/x-axis-position-dynamic.json +++ b/test/fixtures/core.scale/x-axis-position-dynamic.json @@ -24,9 +24,11 @@ "axis": "x", "min": -100, "max": 100, + "border": { + "color": "red" + }, "grid": { "color": "red", - "borderColor": "red", "drawOnChartArea": false }, "ticks": { @@ -38,9 +40,11 @@ "axis": "y", "min": -100, "max": 100, + "border": { + "color": "red" + }, "grid": { "color": "red", - "borderColor": "red", "drawOnChartArea": false }, "ticks": { diff --git a/test/fixtures/core.scale/y-axis-position-center.json b/test/fixtures/core.scale/y-axis-position-center.json index a43b0ebb850..a4e92a5db98 100644 --- a/test/fixtures/core.scale/y-axis-position-center.json +++ b/test/fixtures/core.scale/y-axis-position-center.json @@ -22,9 +22,11 @@ "axis": "x", "min": -100, "max": 100, + "border": { + "color": "red" + }, "grid": { "color": "red", - "borderColor": "red", "drawOnChartArea": false }, "ticks": { @@ -36,9 +38,11 @@ "axis": "y", "min": -100, "max": 100, + "border": { + "color": "red" + }, "grid": { "color": "red", - "borderColor": "red", "drawOnChartArea": false }, "ticks": { diff --git a/test/fixtures/core.scale/y-axis-position-dynamic.json b/test/fixtures/core.scale/y-axis-position-dynamic.json index 10d3b930a4a..6d8b3fcf933 100644 --- a/test/fixtures/core.scale/y-axis-position-dynamic.json +++ b/test/fixtures/core.scale/y-axis-position-dynamic.json @@ -22,9 +22,11 @@ "axis": "x", "min": -100, "max": 100, + "border": { + "color": "red" + }, "grid": { "color": "red", - "borderColor": "red", "drawOnChartArea": false }, "ticks": { @@ -38,9 +40,11 @@ "axis": "y", "min": -100, "max": 100, + "border": { + "color": "red" + }, "grid": { "color": "red", - "borderColor": "red", "drawOnChartArea": false }, "ticks": { diff --git a/test/fixtures/scale.radialLinear/border-dash.json b/test/fixtures/scale.radialLinear/border-dash.json index 5aac486374a..356f4e508b8 100644 --- a/test/fixtures/scale.radialLinear/border-dash.json +++ b/test/fixtures/scale.radialLinear/border-dash.json @@ -10,9 +10,11 @@ "r": { "grid": { "color": "rgba(0, 0, 255, 0.5)", - "lineWidth": 1, - "borderDash": [4, 2], - "borderDashOffset": 2 + "lineWidth": 1 + }, + "border": { + "dash": [4, 2], + "dashOffset": 2 }, "angleLines": { "color": "rgba(0, 0, 255, 0.5)", diff --git a/test/fixtures/scale.radialLinear/circular-border-dash.json b/test/fixtures/scale.radialLinear/circular-border-dash.json index 844b526627b..3425e0e7b96 100644 --- a/test/fixtures/scale.radialLinear/circular-border-dash.json +++ b/test/fixtures/scale.radialLinear/circular-border-dash.json @@ -8,12 +8,14 @@ "responsive": false, "scales": { "r": { + "border": { + "dash": [4, 2], + "dashOffset": 2 + }, "grid": { "circular": true, "color": "rgba(0, 0, 255, 0.5)", - "lineWidth": 1, - "borderDash": [4, 2], - "borderDashOffset": 2 + "lineWidth": 1 }, "angleLines": { "color": "rgba(0, 0, 255, 0.5)", diff --git a/test/fixtures/scale.timeseries/financial-daily.js b/test/fixtures/scale.timeseries/financial-daily.js index 52dcb9614d3..9f13f02d195 100644 --- a/test/fixtures/scale.timeseries/financial-daily.js +++ b/test/fixtures/scale.timeseries/financial-daily.js @@ -46,8 +46,8 @@ module.exports = { }, y: { type: 'linear', - grid: { - drawBorder: false + border: { + display: false } } } diff --git a/test/specs/scale.linear.tests.js b/test/specs/scale.linear.tests.js index 77a6dd5e4dd..9fbe5467a2d 100644 --- a/test/specs/scale.linear.tests.js +++ b/test/specs/scale.linear.tests.js @@ -1119,7 +1119,9 @@ describe('Linear Scale', function() { type: 'linear', grid: { drawTicks: false, - drawBorder: false + }, + border: { + display: false }, title: { display: false, diff --git a/test/specs/scale.time.tests.js b/test/specs/scale.time.tests.js index 3629dc2508a..abae7359cf3 100644 --- a/test/specs/scale.time.tests.js +++ b/test/specs/scale.time.tests.js @@ -1102,8 +1102,8 @@ describe('Time scale tests', function() { }, y: { type: 'linear', - grid: { - drawBorder: false + border: { + display: false } } } diff --git a/types/index.d.ts b/types/index.d.ts index e40319e12d4..430d5890421 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -2831,13 +2831,28 @@ export interface PluginChartOptions { plugins: PluginOptionsByType; } +export interface BorderOptions { + /** + * @default true + */ + display: boolean + /** + * @default [] + */ + dash: Scriptable; + /** + * @default 0 + */ + dashOffset: Scriptable; + color: Color; + width: number; +} + export interface GridLineOptions { /** * @default true */ display: boolean; - borderColor: Color; - borderWidth: number; /** * @default false */ @@ -2846,23 +2861,10 @@ export interface GridLineOptions { * @default 'rgba(0, 0, 0, 0.1)' */ color: ScriptableAndArray; - /** - * @default [] - */ - borderDash: Scriptable; - /** - * @default 0 - */ - borderDashOffset: Scriptable; /** * @default 1 */ lineWidth: ScriptableAndArray; - - /** - * @default true - */ - drawBorder: boolean; /** * @default true */ @@ -3092,6 +3094,8 @@ export interface CartesianScaleOptions extends CoreScaleOptions { grid: GridLineOptions; + border: BorderOptions; + /** Options for the scale title. */ title: { /** If true, displays the axis title. */