From 07e6386297322e1820f100ac4298e3e19cf82e7d Mon Sep 17 00:00:00 2001 From: stockiNail Date: Tue, 26 Jul 2022 10:54:16 +0200 Subject: [PATCH] Enable borderDash option in the grid as scriptable --- docs/axes/styling.md | 2 +- src/core/core.scale.js | 2 +- .../core.scale/grid/scriptable-borderDash.js | 35 ++++++++++++++++++ .../core.scale/grid/scriptable-borderDash.png | Bin 0 -> 14531 bytes types/index.esm.d.ts | 2 +- 5 files changed, 38 insertions(+), 3 deletions(-) create mode 100644 test/fixtures/core.scale/grid/scriptable-borderDash.js create mode 100644 test/fixtures/core.scale/grid/scriptable-borderDash.png 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 0000000000000000000000000000000000000000..365545e9ab01801a03ac94602d4aa826f4a45484 GIT binary patch literal 14531 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 literal 0 HcmV?d00001 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 */