diff --git a/docs/axes/_common.md b/docs/axes/_common.md index 57541277603..6a66bc38b09 100644 --- a/docs/axes/_common.md +++ b/docs/axes/_common.md @@ -6,14 +6,14 @@ 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. +| `backgroundColor` | [`Color`](/general/colors.md) | | Background color of the scale area. | `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...](./styling.md#grid-line-configuration) -| `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](./index.md#axis-range-settings) -| `max` | `number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](./index.md#axis-range-settings) +| `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) +| `max` | `number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](/axes/index.md#axis-range-settings) | `reverse` | `boolean` | `false` | Reverse the scale. -| `stacked` | `boolean`\|`string` | `false` | Should the data be stacked. [more...](./index.md#stacking) -| `suggestedMax` | `number` | | Adjustment used when calculating the maximum data value. [more...](./index.md#axis-range-settings) -| `suggestedMin` | `number` | | Adjustment used when calculating the minimum data value. [more...](./index.md#axis-range-settings) -| `ticks` | `object` | | Tick configuration. [more...](#tick-configuration) +| `stacked` | `boolean`\|`string` | `false` | Should the data be stacked. [more...](/axes/index.md#stacking) +| `suggestedMax` | `number` | | Adjustment used when calculating the maximum data value. [more...](/axes/index.md#axis-range-settings) +| `suggestedMin` | `number` | | Adjustment used when calculating the minimum data value. [more...](/axes/index.md#axis-range-settings) +| `ticks` | `object` | | Tick configuration. [more...](/axes/index.md#tick-configuration) | `weight` | `number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area. diff --git a/docs/axes/_common_ticks.md b/docs/axes/_common_ticks.md index a33df3655bb..94e22f5a90d 100644 --- a/docs/axes/_common_ticks.md +++ b/docs/axes/_common_ticks.md @@ -4,12 +4,12 @@ Namespace: `options.scales[scaleId].ticks` | Name | Type | Scriptable | Default | Description | ---- | ---- | :-------------------------------: | ------- | ----------- -| `callback` | `function` | | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats). +| `callback` | `function` | | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](/axes/labelling.md#creating-custom-tick-formats). | `display` | `boolean` | | `true` | If true, show tick labels. -| `color` | [`Color`](../general/colors.md) | Yes | `Chart.defaults.color` | Color of ticks. -| `font` | `Font` | Yes | `Chart.defaults.font` | See [Fonts](../general/fonts.md) -| `major` | `object` | | `{}` | [Major ticks configuration](./styling.md#major-tick-configuration). +| `color` | [`Color`](/general/colors.md) | Yes | `Chart.defaults.color` | Color of ticks. +| `font` | `Font` | Yes | `Chart.defaults.font` | See [Fonts](/general/fonts.md) +| `major` | `object` | | `{}` | [Major ticks configuration](/axes/styling.md#major-tick-configuration). | `padding` | `number` | | `3` | Sets the offset of the tick labels from the axis -| `textStrokeColor` | [`Color`](../general/colors.md) | Yes | `` | The color of the stroke around the text. +| `textStrokeColor` | [`Color`](/general/colors.md) | Yes | `` | The color of the stroke around the text. | `textStrokeWidth` | `number` | Yes | `0` | Stroke width around the text. | `z` | `number` | | `0` | z-index of tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top. diff --git a/docs/axes/styling.md b/docs/axes/styling.md index beeb1139489..f74d258e2d4 100644 --- a/docs/axes/styling.md +++ b/docs/axes/styling.md @@ -8,12 +8,12 @@ Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines | Name | Type | Scriptable | Indexable | Default | Description | ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | ----------- -| `borderColor` | [`Color`](../general/colors.md) | | | | 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. +| `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[]` | | | `[]` | 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 chart only). -| `color` | [`Color`](../general/colors.md) | Yes | Yes | `'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. +| `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. diff --git a/src/core/core.scale.defaults.js b/src/core/core.scale.defaults.js index 8aa6f093d19..490b09454a2 100644 --- a/src/core/core.scale.defaults.js +++ b/src/core/core.scale.defaults.js @@ -35,8 +35,7 @@ defaults.set('scale', { offset: false, borderDash: [], borderDashOffset: 0.0, - borderColor: (_ctx, options) => options.color, - borderWidth: (_ctx, options) => options.lineWidth + borderWidth: 1 }, // scale title @@ -77,6 +76,7 @@ defaults.set('scale', { defaults.route('scale.ticks', 'color', '', 'color'); defaults.route('scale.grid', 'color', '', 'borderColor'); +defaults.route('scale.grid', 'borderColor', '', 'borderColor'); defaults.route('scale.title', 'color', '', 'color'); defaults.describe('scale', { diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 3913ad30291..bdefea4a747 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1356,7 +1356,7 @@ export default class Scale extends Element { const grid = me.options.grid; const ctx = me.ctx; const chart = me.chart; - const borderOpts = grid.setContext(me.getContext(0)); + const borderOpts = grid.setContext(me.getContext()); const axisWidth = grid.drawBorder ? borderOpts.borderWidth : 0; const items = me._gridLineItems || (me._gridLineItems = me._computeGridLineItems(chartArea)); let i, ilen; @@ -1407,8 +1407,7 @@ export default class Scale extends Element { if (axisWidth) { // Draw the line at the edge of the axis - const edgeOpts = grid.setContext(me.getContext(me._ticksLength - 1)); - const lastLineWidth = edgeOpts.lineWidth; + const lastLineWidth = borderOpts.lineWidth; const borderValue = me._borderValue; let x1, x2, y1, y2; @@ -1424,7 +1423,7 @@ export default class Scale extends Element { drawLine( {x: x1, y: y1}, {x: x2, y: y2}, - {width: axisWidth, color: edgeOpts.borderColor}); + {width: axisWidth, color: borderOpts.borderColor}); } } diff --git a/test/fixtures/core.scale/cartesian-axis-border-settings.json b/test/fixtures/core.scale/cartesian-axis-border-settings.json index 135b0439388..e71e8fd7a03 100644 --- a/test/fixtures/core.scale/cartesian-axis-border-settings.json +++ b/test/fixtures/core.scale/cartesian-axis-border-settings.json @@ -38,6 +38,7 @@ "max": 100, "grid": { "color": "red", + "borderColor": "red", "drawOnChartArea": false }, "ticks": { diff --git a/test/fixtures/core.scale/x-axis-position-center.json b/test/fixtures/core.scale/x-axis-position-center.json index 4ecd78329db..57124da11a8 100644 --- a/test/fixtures/core.scale/x-axis-position-center.json +++ b/test/fixtures/core.scale/x-axis-position-center.json @@ -24,6 +24,7 @@ "max": 100, "grid": { "color": "red", + "borderColor": "red", "drawOnChartArea": false }, "ticks": { @@ -37,6 +38,7 @@ "max": 100, "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 4a0be74b745..074cd9eea63 100644 --- a/test/fixtures/core.scale/x-axis-position-dynamic.json +++ b/test/fixtures/core.scale/x-axis-position-dynamic.json @@ -26,6 +26,7 @@ "max": 100, "grid": { "color": "red", + "borderColor": "red", "drawOnChartArea": false }, "ticks": { @@ -39,6 +40,7 @@ "max": 100, "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 e2128ad5c7e..a43b0ebb850 100644 --- a/test/fixtures/core.scale/y-axis-position-center.json +++ b/test/fixtures/core.scale/y-axis-position-center.json @@ -24,6 +24,7 @@ "max": 100, "grid": { "color": "red", + "borderColor": "red", "drawOnChartArea": false }, "ticks": { @@ -37,6 +38,7 @@ "max": 100, "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 c3b63d3d38b..10d3b930a4a 100644 --- a/test/fixtures/core.scale/y-axis-position-dynamic.json +++ b/test/fixtures/core.scale/y-axis-position-dynamic.json @@ -24,6 +24,7 @@ "max": 100, "grid": { "color": "red", + "borderColor": "red", "drawOnChartArea": false }, "ticks": { @@ -39,6 +40,7 @@ "max": 100, "grid": { "color": "red", + "borderColor": "red", "drawOnChartArea": false }, "ticks": {