diff --git a/docs/axes/styling.md b/docs/axes/styling.md index 4eb9bf0b428..6f77edd5de7 100644 --- a/docs/axes/styling.md +++ b/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. diff --git a/src/core/core.scale.defaults.js b/src/core/core.scale.defaults.js index 85f9764ec0a..7cd04c846f7 100644 --- a/src/core/core.scale.defaults.js +++ b/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, diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 8b8bf347292..8ba19ba6873 100644 --- a/src/core/core.scale.js +++ b/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); diff --git a/src/types/index.d.ts b/src/types/index.d.ts index c4f042ec16e..afbcf43ae05 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -2934,6 +2934,14 @@ export interface BorderOptions { } export interface GridLineOptions { + /** + * @default [] + */ + dash: number[]; + /** + * @default 0 + */ + dashOffset: Scriptable; /** * @default true */ diff --git a/test/fixtures/core.scale/grid/borderDash.js b/test/fixtures/core.scale/grid/borderDash.js new file mode 100644 index 00000000000..2979ff2f7d4 --- /dev/null +++ b/test/fixtures/core.scale/grid/borderDash.js @@ -0,0 +1,41 @@ +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 + }, + } + } + } + } +}; diff --git a/test/fixtures/core.scale/grid/borderDash.png b/test/fixtures/core.scale/grid/borderDash.png new file mode 100644 index 00000000000..a5a007ea27c Binary files /dev/null and b/test/fixtures/core.scale/grid/borderDash.png differ diff --git a/test/fixtures/core.scale/grid/scriptable-borderDash.js b/test/fixtures/core.scale/grid/scriptable-dash.js similarity index 91% rename from test/fixtures/core.scale/grid/scriptable-borderDash.js rename to test/fixtures/core.scale/grid/scriptable-dash.js index 2471e64304b..a7d6a57face 100644 --- a/test/fixtures/core.scale/grid/scriptable-borderDash.js +++ b/test/fixtures/core.scale/grid/scriptable-dash.js @@ -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: { diff --git a/test/fixtures/core.scale/grid/scriptable-borderDash.png b/test/fixtures/core.scale/grid/scriptable-dash.png similarity index 100% rename from test/fixtures/core.scale/grid/scriptable-borderDash.png rename to test/fixtures/core.scale/grid/scriptable-dash.png