Dissociate border options from grid options (#8823)

* Dissociate border options from grid options * Update docs
chartjs · Apr 4, 2021 · e1ddaa8 · e1ddaa8
1 parent 7d08bab
commit e1ddaa8
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 22 deletions.
diff --git 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
@@ -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 &lt;= 0 are drawn under datasets, &gt; 0 on top.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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": {