Add borderJoinStyle option for arc elements (#9877)

* Add borderJoinStyle option for arc elements * docs + types * Consistently enumerate the possible choices
chartjs · Dec 5, 2021 · cd9d528 · cd9d528
1 parent 9fa26f9
commit cd9d528
Show file tree

Hide file tree

Showing 14 changed files with 111 additions and 15 deletions.
diff --git a/docs/charts/doughnut.md b/docs/charts/doughnut.md
@@ -103,15 +103,17 @@ 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`
 | [`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`
 | [`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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/test/fixtures/controller.doughnut/borderJoinStyle/miter.js 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
diff --git a/test/fixtures/controller.doughnut/borderJoinStyle/round.js 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
diff --git 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
@@ -43,6 +43,7 @@ const chart3 = new Chart('id', {
     elements: {
       arc: {
         borderWidth: (ctx) => 3,
+        borderJoinStyle: (ctx) => 'miter'
       }
     }
   }