Enable separate grid and border dashes for cartesian axes

Author: etimberg

docs/axes/styling.md

@@ -10,6 +10,8 @@ Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines
 | ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
 | `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.
+| `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).
 | `display` | `boolean` | | | `true` | If false, do not display grid lines for this axis.
 | `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.

src/core/core.scale.defaults.js

@@ -24,6 +24,8 @@ export function applyScaleDefaults(defaults) {
 
     // grid line settings
     grid: {
+      dash: [],
+      dashOffset: 0,
       display: true,
       lineWidth: 1,
       drawOnChartArea: true,

src/core/core.scale.js

@@ -1089,12 +1089,11 @@ export default class Scale extends Element {
     for (i = 0; i < ticksLength; i += step) {
       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 = optsAtIndexBorder.dash || [];
-      const borderDashOffset = optsAtIndexBorder.dashOffset;
+      const borderDash = optsAtIndex.dash || [];
+      const borderDashOffset = optsAtIndex.dashOffset;
 
       const tickWidth = optsAtIndex.tickWidth;
       const tickColor = optsAtIndex.tickColor;
@@ -1536,6 +1535,8 @@ export default class Scale extends Element {
     ctx.save();
     ctx.lineWidth = borderOpts.width;
     ctx.strokeStyle = borderOpts.color;
+    ctx.lineDashOffset = borderOpts.dashOffset
+    ctx.setLineDash(borderOpts.dash || [])
 
     ctx.beginPath();
     ctx.moveTo(x1, y1);

src/types/index.d.ts

@@ -2934,6 +2934,14 @@ export interface BorderOptions {
 }
 
 export interface GridLineOptions {
+  /**
+   * @default []
+   */
+  dash: number[];
+  /**
+   * @default 0
+   */
+  dashOffset: Scriptable<number, ScriptableScaleContext>;
   /**
    * @default true
    */

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

@@ -0,0 +1,42 @@
+module.exports = {
+    config: {
+      type: 'scatter',
+      options: {
+        scales: {
+          x: {
+            position: {y: 0},
+            min: -10,
+            max: 10,
+            border: {
+              dash: [6, 3],
+              color: 'red',
+            },
+            grid: {
+              color: 'lightGray',
+              lineWidth: 3,
+            },
+            ticks: {
+              display: false
+            },
+          },
+          y: {
+            position: {x: 0},
+            min: -10,
+            max: 10,
+            border: {
+              color: 'red',
+              dash: [6, 3],
+            },
+            grid: {
+              color: 'lightGray',
+              lineWidth: 3,
+            },
+            ticks: {
+              display: false
+            },
+          }
+        }
+      }
+    }
+  };
+  

test/fixtures/core.scale/grid/borderDash.png

@@ -7,11 +7,9 @@ module.exports = {
           position: {y: 0},
           min: -10,
           max: 10,
-          border: {
-            dash: (ctx) => ctx.index % 2 === 0 ? [6, 3] : [],
-          },
           grid: {
             color: 'lightGray',
+            dash: (ctx) => ctx.index % 2 === 0 ? [6, 3] : [],
             lineWidth: 3,
           },
           ticks: {
@@ -22,11 +20,9 @@ module.exports = {
           position: {x: 0},
           min: -10,
           max: 10,
-          border: {
-            dash: (ctx) => ctx.index % 2 === 0 ? [6, 3] : [],
-          },
           grid: {
             color: 'lightGray',
+            dash: (ctx) => ctx.index % 2 === 0 ? [6, 3] : [],
             lineWidth: 3,
           },
           ticks: {