Enable borderDash option in the grid as scriptable (#10519)

docs/axes/styling.md

@@ -10,7 +10,7 @@ Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines
 | ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
 | `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).
+| `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 chart 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.

src/core/core.scale.js

@@ -1085,7 +1085,7 @@ export default class Scale extends Element {
 
       const lineWidth = optsAtIndex.lineWidth;
       const lineColor = optsAtIndex.color;
-      const borderDash = grid.borderDash || [];
+      const borderDash = optsAtIndex.borderDash || [];
       const borderDashOffset = optsAtIndex.borderDashOffset;
 
       const tickWidth = optsAtIndex.tickWidth;

test/fixtures/core.scale/grid/scriptable-borderDash.js

@@ -0,0 +1,35 @@
+module.exports = {
+  config: {
+    type: 'scatter',
+    options: {
+      scales: {
+        x: {
+          position: {y: 0},
+          min: -10,
+          max: 10,
+          grid: {
+            borderDash: (ctx) => ctx.index % 2 === 0 ? [6, 3] : [],
+            color: 'lightGray',
+            lineWidth: 3,
+          },
+          ticks: {
+            display: false
+          },
+        },
+        y: {
+          position: {x: 0},
+          min: -10,
+          max: 10,
+          grid: {
+            borderDash: (ctx) => ctx.index % 2 === 0 ? [6, 3] : [],
+            color: 'lightGray',
+            lineWidth: 3,
+          },
+          ticks: {
+            display: false
+          },
+        }
+      }
+    }
+  }
+};

types/index.esm.d.ts

@@ -2857,7 +2857,7 @@ export interface GridLineOptions {
   /**
    * @default []
    */
-  borderDash: number[];
+  borderDash: Scriptable<number[], ScriptableScaleContext>;
   /**
    * @default 0
    */