Add borderJoinStyle option for arc elements (#9877)

* Add borderJoinStyle option for arc elements
* docs + types
* Consistently enumerate the possible choices

diff --git a/docs/charts/doughnut.md b/docs/charts/doughnut.md
index 5964864272cf679b669427779511ccf678abffb2..d6a91912ffeb6443938aa841a10faa567af66c54 100644 (file)
--- a/docs/charts/doughnut.md
+++ b/docs/charts/doughnut.md
@@ -103,8 +103,9 @@ The doughnut/pie chart allows a number of properties to be specified for each da
 | Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
 | ---- | ---- | :----: | :----: | ----
 | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
-| [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'`
+| [`borderAlign`](#border-alignment) | `'center'`\|`'inner'` | Yes | Yes | `'center'`
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
+| [`borderJoinStyle`](#styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
 | [`borderRadius`](#border-radius) | `number`\|`object` | Yes | Yes | `0`
 | [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
 | [`circumference`](#general) | `number` | - | - | `undefined`
@@ -112,6 +113,7 @@ The doughnut/pie chart allows a number of properties to be specified for each da
 | [`data`](#data-structure) | `number[]` | - | - | **required**
 | [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
 | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
+| [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
 | [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
 | [`hoverOffset`](#interactions) | `number` | Yes | Yes | `0`
 | [`offset`](#styling) | `number` | Yes | Yes | `0`
@@ -137,6 +139,7 @@ The style of each arc can be controlled with the following properties:
 | ---- | ----
 | `backgroundColor` | arc background color.
 | `borderColor` | arc border color.
+| `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).
 | `spacing` | Fixed arc offset (in pixels). Similar to `offset` but applies to all arcs.
@@ -165,6 +168,7 @@ The interaction with each arc can be controlled with the following properties:
 | ---- | -----------
 | `hoverBackgroundColor` | arc background color when hovered.
 | `hoverBorderColor` | arc border color when hovered.
+| `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/line.md b/docs/charts/line.md
index bfd9927d175642823f278c3cf3c0d39dc989c369..819799fe9b57d4b3e969a7c16d46b8c754dea56b 100644 (file)
--- a/docs/charts/line.md
+++ b/docs/charts/line.md
@@ -49,7 +49,7 @@ The line chart allows a number of properties to be specified for each dataset. T
 | [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `'rgba(0, 0, 0, 0.1)'`
 | [`borderDash`](#line-styling) | `number[]` | Yes | - | `[]`
 | [`borderDashOffset`](#line-styling) | `number` | Yes | - | `0.0`
-| [`borderJoinStyle`](#line-styling) | `string` | Yes | - | `'miter'`
+| [`borderJoinStyle`](#line-styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | - | `'miter'`
 | [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
 | [`clip`](#general) | `number`\|`object` | - | - | `undefined`
 | [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | Yes | - | `'default'`
@@ -60,7 +60,7 @@ The line chart allows a number of properties to be specified for each dataset. T
 | [`hoverBorderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
 | [`hoverBorderDash`](#line-styling) | `number[]` | Yes | - | `undefined`
 | [`hoverBorderDashOffset`](#line-styling) | `number` | Yes | - | `undefined`
-| [`hoverBorderJoinStyle`](#line-styling) | `string` | Yes | - | `undefined`
+| [`hoverBorderJoinStyle`](#line-styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | - | `undefined`
 | [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
 | [`indexAxis`](#general) | `string` | - | - | `'x'`
 | [`label`](#general) | `string` | - | - | `''`

diff --git a/docs/charts/polar.md b/docs/charts/polar.md
index 550674272d23ed6166f5b1c91ca306ff8549a96e..9ec9bb27ea2ef46fafe3e807985e2e63e5cc63b8 100644 (file)
--- a/docs/charts/polar.md
+++ b/docs/charts/polar.md
@@ -56,13 +56,15 @@ The following options can be included in a polar area chart dataset to configure
 | Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
 | ---- | ---- | :----: | :----: | ----
 | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
-| [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'`
+| [`borderAlign`](#border-alignment) | `'center'`\|`'inner'` | Yes | Yes | `'center'`
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
+| [`borderJoinStyle`](#styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
 | [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
 | [`clip`](#general) | `number`\|`object` | - | - | `undefined`
 | [`data`](#data-structure) | `number[]` | - | - | **required**
 | [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
 | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
+| [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
 | [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
 
 All these values, if `undefined`, fallback to the scopes described in [option resolution](../general/options)
@@ -81,6 +83,7 @@ The style of each arc can be controlled with the following properties:
 | ---- | ----
 | `backgroundColor` | arc background color.
 | `borderColor` | arc border color.
+| `borderJoinStyle` | arc border join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
 | `borderWidth` | arc border width (in pixels).
 
 All these values, if `undefined`, fallback to the associated [`elements.arc.*`](../configuration/elements.md#arc-configuration) options.
@@ -102,6 +105,7 @@ The interaction with each arc can be controlled with the following properties:
 | ---- | -----------
 | `hoverBackgroundColor` | arc background color when hovered.
 | `hoverBorderColor` | arc border color when hovered.
+| `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).
 
 All these values, if `undefined`, fallback to the associated [`elements.arc.*`](../configuration/elements.md#arc-configuration) options.

diff --git a/docs/charts/radar.md b/docs/charts/radar.md
index 47e2a8887953ff7b7187f93d7fa54125f6fd082e..5508b2abf6b1aa6c71bad3935805d0bbf649b7a9 100644 (file)
--- a/docs/charts/radar.md
+++ b/docs/charts/radar.md
@@ -79,14 +79,14 @@ The radar chart allows a number of properties to be specified for each dataset.
 | [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `'rgba(0, 0, 0, 0.1)'`
 | [`borderDash`](#line-styling) | `number[]` | Yes | - | `[]`
 | [`borderDashOffset`](#line-styling) | `number` | Yes | - | `0.0`
-| [`borderJoinStyle`](#line-styling) | `string` | Yes | - | `'miter'`
+| [`borderJoinStyle`](#line-styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | - | `'miter'`
 | [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
 | [`hoverBackgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
 | [`hoverBorderCapStyle`](#line-styling) | `string` | Yes | - | `undefined`
 | [`hoverBorderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
 | [`hoverBorderDash`](#line-styling) | `number[]` | Yes | - | `undefined`
 | [`hoverBorderDashOffset`](#line-styling) | `number` | Yes | - | `undefined`
-| [`hoverBorderJoinStyle`](#line-styling) | `string` | Yes | - | `undefined`
+| [`hoverBorderJoinStyle`](#line-styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | - | `undefined`
 | [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
 | [`clip`](#general) | `number`\|`object` | - | - | `undefined`
 | [`data`](#data-structure) | `number[]` | - | - | **required**

diff --git a/docs/configuration/elements.md b/docs/configuration/elements.md
index aff43601185b3a941fc3893d06bdf246b7ea887a..ec5fe9659d02d6fb8584f24e5aa22f1edadbc5be 100644 (file)
--- a/docs/configuration/elements.md
+++ b/docs/configuration/elements.md
@@ -65,7 +65,7 @@ Namespace: `options.elements.line`, global line options: `Chart.defaults.element
 | `borderCapStyle` | `string` | `'butt'` | Line cap style. See [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap).
 | `borderDash` | `number[]` | `[]` | Line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
 | `borderDashOffset` | `number` | `0.0` | Line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
-| `borderJoinStyle` | `string` | `'miter'` | Line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
+| `borderJoinStyle` | `'round'`\|`'bevel'`\|`'miter'` | `'miter'` | Line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
 | `capBezierPoints` | `boolean` | `true` | `true` to keep Bézier control inside the chart, `false` for no restriction.
 | `cubicInterpolationMode` | `string` | `'default'` |  Interpolation mode to apply. [See more...](/charts/line.md#cubicinterpolationmode)
 | `fill` | `boolean`\|`string` | `false` | How to fill the area under the line. See [area charts](/charts/area.md#filling-modes).
@@ -97,6 +97,7 @@ Namespace: `options.elements.arc`, global arc options: `Chart.defaults.elements.
 | ---- | ---- | ------- | -----------
 | `angle` - for polar only | `number` | `circumference / (arc count)` | Arc angle to cover.
 | `backgroundColor` | [`Color`](/general/colors.md) | `Chart.defaults.backgroundColor` | Arc fill color.
-| `borderAlign` | `string` | `'center'` | Arc stroke alignment.
+| `borderAlign` | `'center'`\|`'inner'` | `'center'` | Arc stroke alignment.
 | `borderColor` | [`Color`](/general/colors.md) | `'#fff'` | Arc stroke color.
+| `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.

diff --git a/src/elements/element.arc.js b/src/elements/element.arc.js
index 66b5167711587728cdddef3df6a3c61cec48c905..1e03f9e1a7b5e97fe46d6596b3d97cb76c2517ab 100644 (file)
--- a/src/elements/element.arc.js
+++ b/src/elements/element.arc.js
@@ -221,18 +221,19 @@ function drawFullCircleBorders(ctx, element, inner) {
 
 function drawBorder(ctx, element, offset, spacing, endAngle) {
   const {options} = element;
+  const {borderWidth, borderJoinStyle} = options;
   const inner = options.borderAlign === 'inner';
 
-  if (!options.borderWidth) {
+  if (!borderWidth) {
     return;
   }
 
   if (inner) {
-    ctx.lineWidth = options.borderWidth * 2;
-    ctx.lineJoin = 'round';
+    ctx.lineWidth = borderWidth * 2;
+    ctx.lineJoin = borderJoinStyle || 'round';
   } else {
-    ctx.lineWidth = options.borderWidth;
-    ctx.lineJoin = 'bevel';
+    ctx.lineWidth = borderWidth;
+    ctx.lineJoin = borderJoinStyle || 'bevel';
   }
 
   if (element.fullCircles) {
@@ -359,6 +360,7 @@ ArcElement.id = 'arc';
 ArcElement.defaults = {
   borderAlign: 'center',
   borderColor: '#fff',
+  borderJoinStyle: undefined,
   borderRadius: 0,
   borderWidth: 2,
   offset: 0,

diff --git a/test/fixtures/controller.doughnut/borderJoinStyle/bevel-default.js b/test/fixtures/controller.doughnut/borderJoinStyle/bevel-default.js
new file mode 100644 (file)
index 0000000..9bb4415
--- /dev/null
+++ b/test/fixtures/controller.doughnut/borderJoinStyle/bevel-default.js
@@ -0,0 +1,25 @@
+module.exports = {
+  config: {
+    type: 'doughnut',
+    data: {
+      labels: [0, 1, 2, 3, 4, 5],
+      datasets: [
+        {
+          data: [0, 2, 4, null, 6, 8],
+          backgroundColor: 'transparent',
+          borderColor: '#000',
+          borderWidth: 10,
+          spacing: 50,
+        },
+      ]
+    },
+    options: {
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};

diff --git a/test/fixtures/controller.doughnut/borderJoinStyle/bevel-default.png b/test/fixtures/controller.doughnut/borderJoinStyle/bevel-default.png
new file mode 100644 (file)
index 0000000..ecb2a2d
Binary files /dev/null and b/test/fixtures/controller.doughnut/borderJoinStyle/bevel-default.png differ

diff --git a/test/fixtures/controller.doughnut/borderJoinStyle/miter.js b/test/fixtures/controller.doughnut/borderJoinStyle/miter.js
new file mode 100644 (file)
index 0000000..f50e923
--- /dev/null
+++ b/test/fixtures/controller.doughnut/borderJoinStyle/miter.js
@@ -0,0 +1,26 @@
+module.exports = {
+  config: {
+    type: 'doughnut',
+    data: {
+      labels: [0, 1, 2, 3, 4, 5],
+      datasets: [
+        {
+          data: [0, 2, 4, null, 6, 8],
+          backgroundColor: 'transparent',
+          borderColor: '#000',
+          borderJoinStyle: 'miter',
+          borderWidth: 10,
+          spacing: 50,
+        },
+      ]
+    },
+    options: {
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};

diff --git a/test/fixtures/controller.doughnut/borderJoinStyle/miter.png b/test/fixtures/controller.doughnut/borderJoinStyle/miter.png
new file mode 100644 (file)
index 0000000..6ec65b1
Binary files /dev/null and b/test/fixtures/controller.doughnut/borderJoinStyle/miter.png differ

diff --git a/test/fixtures/controller.doughnut/borderJoinStyle/round.js b/test/fixtures/controller.doughnut/borderJoinStyle/round.js
new file mode 100644 (file)
index 0000000..43aa7ca
--- /dev/null
+++ b/test/fixtures/controller.doughnut/borderJoinStyle/round.js
@@ -0,0 +1,26 @@
+module.exports = {
+  config: {
+    type: 'doughnut',
+    data: {
+      labels: [0, 1, 2, 3, 4, 5],
+      datasets: [
+        {
+          data: [0, 2, 4, null, 6, 8],
+          backgroundColor: 'transparent',
+          borderColor: '#000',
+          borderJoinStyle: 'round',
+          borderWidth: 10,
+          spacing: 50,
+        },
+      ]
+    },
+    options: {
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};

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

diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index 67c251c6d753972d296dbe64c13caae636639ae7..48f398e584a9e72389166db3145c42a537880eb9 100644 (file)
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -1688,15 +1688,22 @@ export interface ArcOptions extends CommonElementOptions {
    * Arc stroke alignment.
    */
   borderAlign: 'center' | 'inner';
+
   /**
-   * Arc offset (in pixels).
+   * Line join style. See MDN. Default is 'round' when `borderAlign` is 'inner', else 'bevel'.
    */
-  offset: number;
+  borderJoinStyle: CanvasLineJoin;
+
   /**
    * Sets the border radius for arcs
    * @default 0
    */
   borderRadius: number | ArcBorderRadius;
+
+  /**
+   * Arc offset (in pixels).
+   */
+  offset: number;
 }
 
 export interface ArcHoverOptions extends CommonHoverOptions {

diff --git a/types/tests/elements/scriptable_element_options.ts b/types/tests/elements/scriptable_element_options.ts
index 0776ec0a080bf2a8508f04e0318ee5b980161a9b..c81892d7910beeb5c634cf3ea13b15b00caf9367 100644 (file)
--- a/types/tests/elements/scriptable_element_options.ts
+++ b/types/tests/elements/scriptable_element_options.ts
@@ -43,6 +43,7 @@ const chart3 = new Chart('id', {
     elements: {
       arc: {
         borderWidth: (ctx) => 3,
+        borderJoinStyle: (ctx) => 'miter'
       }
     }
   }