Add borderDash options to arc element (#11127)

diff --git a/docs/charts/doughnut.md b/docs/charts/doughnut.md
index f9f29d5214b95ed671b7368b374af58f2c758aab..3d0e3b08bed116f04d55da5f44f1a3e9c154cc1c 100644 (file)
--- a/docs/charts/doughnut.md
+++ b/docs/charts/doughnut.md
@@ -105,6 +105,8 @@ The doughnut/pie chart allows a number of properties to be specified for each da
 | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`borderAlign`](#border-alignment) | `'center'`\|`'inner'` | Yes | Yes | `'center'`
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
+| [`borderDash`](#styling) | `number[]` | Yes | - | `[]`
+| [`borderDashOffset`](#styling) | `number` | Yes | - | `0.0`
 | [`borderJoinStyle`](#styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
 | [`borderRadius`](#border-radius) | `number`\|`object` | Yes | Yes | `0`
 | [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
@@ -113,6 +115,8 @@ The doughnut/pie chart allows a number of properties to be specified for each da
 | [`data`](#data-structure) | `number[]` | - | - | **required**
 | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
 | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
+| [`hoverBorderDash`](#interactions) | `number[]` | Yes | - | `undefined`
+| [`hoverBorderDashOffset`](#interactions) | `number` | Yes | - | `undefined`
 | [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
 | [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
 | [`hoverOffset`](#interactions) | `number` | Yes | Yes | `0`
@@ -139,6 +143,8 @@ The style of each arc can be controlled with the following properties:
 | ---- | ----
 | `backgroundColor` | arc background color.
 | `borderColor` | arc border color.
+| `borderDash` | arc border length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
+| `borderDashOffset` | arc border offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
 | `borderJoinStyle` | arc border join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
 | `borderWidth` | arc border width (in pixels).
 | `offset` | arc offset (in pixels).
@@ -168,6 +174,8 @@ The interaction with each arc can be controlled with the following properties:
 | ---- | -----------
 | `hoverBackgroundColor` | arc background color when hovered.
 | `hoverBorderColor` | arc border color when hovered.
+| `hoverBorderDash` | arc border length and spacing of dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
+| `hoverBorderDashOffset` | arc border offset for line dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
 | `hoverBorderJoinStyle` | arc border join style when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
 | `hoverBorderWidth` | arc border width when hovered (in pixels).
 | `hoverOffset` | arc offset when hovered (in pixels).

diff --git a/docs/charts/polar.md b/docs/charts/polar.md
index 0f9c8fcee1b4c9d2cb88f71033206715b1d8de10..068cebcce8b1db954ba28f81157ff4fa2d48cd6d 100644 (file)
--- a/docs/charts/polar.md
+++ b/docs/charts/polar.md
@@ -58,12 +58,16 @@ The following options can be included in a polar area chart dataset to configure
 | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`borderAlign`](#border-alignment) | `'center'`\|`'inner'` | Yes | Yes | `'center'`
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
+| [`borderDash`](#styling) | `number[]` | Yes | - | `[]`
+| [`borderDashOffset`](#styling) | `number` | Yes | - | `0.0`
 | [`borderJoinStyle`](#styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
 | [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
 | [`clip`](#general) | `number`\|`object`\|`false` | - | - | `undefined`
 | [`data`](#data-structure) | `number[]` | - | - | **required**
 | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
 | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
+| [`hoverBorderDash`](#interactions) | `number[]` | Yes | - | `undefined`
+| [`hoverBorderDashOffset`](#interactions) | `number` | Yes | - | `undefined`
 | [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
 | [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
 | [`circular`](#styling) | `boolean` | Yes | Yes | `true`
@@ -84,6 +88,8 @@ The style of each arc can be controlled with the following properties:
 | ---- | ----
 | `backgroundColor` | arc background color.
 | `borderColor` | arc border color.
+| `borderDash` | arc border length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
+| `borderDashOffset` | arc border offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
 | `borderJoinStyle` | arc border join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
 | `borderWidth` | arc border width (in pixels).
 | `circular` | By default the Arc is curved. If `circular: false` the Arc will be flat.
@@ -107,6 +113,8 @@ The interaction with each arc can be controlled with the following properties:
 | ---- | -----------
 | `hoverBackgroundColor` | arc background color when hovered.
 | `hoverBorderColor` | arc border color when hovered.
+| `hoverBorderDash` | arc border length and spacing of dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
+| `hoverBorderDashOffset` | arc border offset for line dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
 | `hoverBorderJoinStyle` | arc border join style when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
 | `hoverBorderWidth` | arc border width when hovered (in pixels).
 

diff --git a/docs/configuration/elements.md b/docs/configuration/elements.md
index 4b2a08f940caf78f329c5f5dbaa772e56adcb4c6..828df39439e470b1959a8c4619c55d337c4866c9 100644 (file)
--- a/docs/configuration/elements.md
+++ b/docs/configuration/elements.md
@@ -100,6 +100,8 @@ Namespace: `options.elements.arc`, global arc options: `Chart.defaults.elements.
 | `backgroundColor` | [`Color`](/general/colors.md) | `Chart.defaults.backgroundColor` | Arc fill color.
 | `borderAlign` | `'center'`\|`'inner'` | `'center'` | Arc stroke alignment.
 | `borderColor` | [`Color`](/general/colors.md) | `'#fff'` | Arc stroke color.
+| `borderDash` | `number[]` | `[]` | Arc line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
+| `borderDashOffset` | `number` | `0.0` | Arc line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
 | `borderJoinStyle` | `'round'`\|`'bevel'`\|`'miter'` | `'bevel'`\|`'round'` | Line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin). The default is `'round'` when `borderAlign` is `'inner'`
 | `borderWidth`| `number` | `2` | Arc stroke width.
 | `circular` | `boolean` | `true` | By default the Arc is curved. If `circular: false` the Arc will be flat

diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js
index 3080b98831a5a45436f5b35199c78eda69f9270b..59285010b5309cc8b266548625f90b06470f55fc 100644 (file)
--- a/src/controllers/controller.doughnut.js
+++ b/src/controllers/controller.doughnut.js
@@ -76,7 +76,7 @@ export default class DoughnutController extends DatasetController {
 
   static descriptors = {
     _scriptable: (name) => name !== 'spacing',
-    _indexable: (name) => name !== 'spacing',
+    _indexable: (name) => name !== 'spacing' && !name.startsWith('borderDash') && !name.startsWith('hoverBorderDash'),
   };
 
   /**

diff --git a/src/elements/element.arc.ts b/src/elements/element.arc.ts
index 88391d31dd4cfc7bd75a139147911ba5767342aa..dff28b62a477c812551a0e6a3101a223ef486f68 100644 (file)
--- a/src/elements/element.arc.ts
+++ b/src/elements/element.arc.ts
@@ -213,13 +213,16 @@ function drawBorder(
   circular: boolean,
 ) {
   const {fullCircles, startAngle, circumference, options} = element;
-  const {borderWidth, borderJoinStyle} = options;
+  const {borderWidth, borderJoinStyle, borderDash, borderDashOffset} = options;
   const inner = options.borderAlign === 'inner';
 
   if (!borderWidth) {
     return;
   }
 
+  ctx.setLineDash(borderDash || []);
+  ctx.lineDashOffset = borderDashOffset;
+
   if (inner) {
     ctx.lineWidth = borderWidth * 2;
     ctx.lineJoin = borderJoinStyle || 'round';
@@ -264,6 +267,8 @@ export default class ArcElement extends Element<ArcProps, ArcOptions> {
   static defaults = {
     borderAlign: 'center',
     borderColor: '#fff',
+    borderDash: [],
+    borderDashOffset: 0,
     borderJoinStyle: undefined,
     borderRadius: 0,
     borderWidth: 2,
@@ -277,6 +282,11 @@ export default class ArcElement extends Element<ArcProps, ArcOptions> {
     backgroundColor: 'backgroundColor'
   };
 
+  static descriptors = {
+    _scriptable: true,
+    _indexable: (name) => name !== 'borderDash'
+  };
+
   circumference: number;
   endAngle: number;
   fullCircles: number;

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index b6f90af8bc7c78ef6549d3121451c17cc652e21c..6caf2174d458a384432be64a9cf87e85d4d69fc9 100644 (file)
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -1700,7 +1700,16 @@ export interface ArcOptions extends CommonElementOptions {
    * Arc stroke alignment.
    */
   borderAlign: 'center' | 'inner';
-
+  /**
+   * Line dash. See MDN.
+   * @default []
+   */
+  borderDash: number[];
+  /**
+   * Line dash offset. See MDN.
+   * @default 0.0
+   */
+  borderDashOffset: number;
   /**
    * Line join style. See MDN. Default is 'round' when `borderAlign` is 'inner', else 'bevel'.
    */
@@ -1730,6 +1739,8 @@ export interface ArcOptions extends CommonElementOptions {
 }
 
 export interface ArcHoverOptions extends CommonHoverOptions {
+  hoverBorderDash: number[];
+  hoverBorderDashOffset: number;
   hoverOffset: number;
 }
 

diff --git a/test/fixtures/controller.doughnut/borderDash/scriptable.js b/test/fixtures/controller.doughnut/borderDash/scriptable.js
new file mode 100644 (file)
index 0000000..d8d2b69
--- /dev/null
+++ b/test/fixtures/controller.doughnut/borderDash/scriptable.js
@@ -0,0 +1,34 @@
+module.exports = {
+  config: {
+    type: 'doughnut',
+    data: {
+      labels: [0, 1, 2, 3, 4, 5],
+      datasets: [
+        {
+          // option in element (fallback)
+          data: [5, 2, 4, 7, 6, 8]
+        }
+      ]
+    },
+    options: {
+      elements: {
+        arc: {
+          backgroundColor: 'transparent',
+          borderColor: 'black',
+          borderWidth: 1,
+          borderDash: function(ctx) {
+            var value = (ctx.dataIndex || 0) % 2;
+            return value === 0 ? [3, 3] : [];
+          }
+
+        }
+      },
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};

diff --git a/test/fixtures/controller.doughnut/borderDash/scriptable.png b/test/fixtures/controller.doughnut/borderDash/scriptable.png
new file mode 100644 (file)
index 0000000..eed3a23
Binary files /dev/null and b/test/fixtures/controller.doughnut/borderDash/scriptable.png differ

diff --git a/test/fixtures/controller.doughnut/borderDash/value.js b/test/fixtures/controller.doughnut/borderDash/value.js
new file mode 100644 (file)
index 0000000..7e726e1
--- /dev/null
+++ b/test/fixtures/controller.doughnut/borderDash/value.js
@@ -0,0 +1,36 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      labels: [0, 1, 2, 3, 4, 5],
+      datasets: [
+        {
+          // option in dataset
+          data: [5, 2, 4, 7, 6, 8],
+          borderAlign: 'inner',
+          borderColor: 'black'
+        },
+      ]
+    },
+    options: {
+      elements: {
+        arc: {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderDash: [3, 3]
+        }
+      },
+      scales: {
+        r: {
+          display: false
+        }
+      }
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};

diff --git a/test/fixtures/controller.doughnut/borderDash/value.png b/test/fixtures/controller.doughnut/borderDash/value.png
new file mode 100644 (file)
index 0000000..f7ecdc5
Binary files /dev/null and b/test/fixtures/controller.doughnut/borderDash/value.png differ

diff --git a/test/fixtures/controller.polarArea/borderDash/scriptable.js b/test/fixtures/controller.polarArea/borderDash/scriptable.js
new file mode 100644 (file)
index 0000000..3bce13b
--- /dev/null
+++ b/test/fixtures/controller.polarArea/borderDash/scriptable.js
@@ -0,0 +1,38 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      labels: [0, 1, 2, 3, 4, 5],
+      datasets: [
+        {
+          // option in dataset
+          data: [5, 2, 4, 7, 6, 8]
+        }
+      ]
+    },
+    options: {
+      elements: {
+        arc: {
+          backgroundColor: 'transparent',
+          borderColor: 'black',
+          borderWidth: 1,
+          borderDash: function(ctx) {
+            var value = (ctx.dataIndex || 0) % 2;
+            return value === 0 ? [3, 3] : [];
+          }
+        }
+      },
+      scales: {
+        r: {
+          display: false
+        }
+      }
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};

diff --git a/test/fixtures/controller.polarArea/borderDash/scriptable.png b/test/fixtures/controller.polarArea/borderDash/scriptable.png
new file mode 100644 (file)
index 0000000..5098dde
Binary files /dev/null and b/test/fixtures/controller.polarArea/borderDash/scriptable.png differ

diff --git a/test/fixtures/controller.polarArea/borderDash/value.js b/test/fixtures/controller.polarArea/borderDash/value.js
new file mode 100644 (file)
index 0000000..7e726e1
--- /dev/null
+++ b/test/fixtures/controller.polarArea/borderDash/value.js
@@ -0,0 +1,36 @@
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      labels: [0, 1, 2, 3, 4, 5],
+      datasets: [
+        {
+          // option in dataset
+          data: [5, 2, 4, 7, 6, 8],
+          borderAlign: 'inner',
+          borderColor: 'black'
+        },
+      ]
+    },
+    options: {
+      elements: {
+        arc: {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderDash: [3, 3]
+        }
+      },
+      scales: {
+        r: {
+          display: false
+        }
+      }
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};

diff --git a/test/fixtures/controller.polarArea/borderDash/value.png b/test/fixtures/controller.polarArea/borderDash/value.png
new file mode 100644 (file)
index 0000000..2e44c31
Binary files /dev/null and b/test/fixtures/controller.polarArea/borderDash/value.png differ