diff --git a/docs/axes/styling.md b/docs/axes/styling.md index f74d258e2d4..9af53d3b211 100644 --- a/docs/axes/styling.md +++ b/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. diff --git a/src/core/core.scale.js b/src/core/core.scale.js index e349a51fb8a..dcc2bc75fcf 100644 --- a/src/core/core.scale.js +++ b/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; diff --git a/test/fixtures/core.scale/grid/scriptable-borderDash.js b/test/fixtures/core.scale/grid/scriptable-borderDash.js new file mode 100644 index 00000000000..8fabb498c4c --- /dev/null +++ b/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 + }, + } + } + } + } +}; diff --git a/test/fixtures/core.scale/grid/scriptable-borderDash.png b/test/fixtures/core.scale/grid/scriptable-borderDash.png new file mode 100644 index 00000000000..365545e9ab0 Binary files /dev/null and b/test/fixtures/core.scale/grid/scriptable-borderDash.png differ diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index d576bbcef45..8fd5a41f635 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -2857,7 +2857,7 @@ export interface GridLineOptions { /** * @default [] */ - borderDash: number[]; + borderDash: Scriptable; /** * @default 0 */