Skip to content

Commit cd9d528

Browse files
kurklekurkle
authored
Add borderJoinStyle option for arc elements (#9877)
* Add borderJoinStyle option for arc elements * docs + types * Consistently enumerate the possible choices
1 parent 9fa26f9 commit cd9d528

File tree

14 files changed

+111
-15
lines changed

14 files changed

+111
-15
lines changed

‎docs/charts/doughnut.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -103,15 +103,17 @@ The doughnut/pie chart allows a number of properties to be specified for each da
103103
| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
104104
| ---- | ---- | :----: | :----: | ----
105105
| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
106-
| [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'`
106+
| [`borderAlign`](#border-alignment) | `'center'`\|`'inner'` | Yes | Yes | `'center'`
107107
| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
108+
| [`borderJoinStyle`](#styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
108109
| [`borderRadius`](#border-radius) | `number`\|`object` | Yes | Yes | `0`
109110
| [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
110111
| [`circumference`](#general) | `number` | - | - | `undefined`
111112
| [`clip`](#general) | `number`\|`object` | - | - | `undefined`
112113
| [`data`](#data-structure) | `number[]` | - | - | **required**
113114
| [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
114115
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
116+
| [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
115117
| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
116118
| [`hoverOffset`](#interactions) | `number` | Yes | Yes | `0`
117119
| [`offset`](#styling) | `number` | Yes | Yes | `0`
@@ -137,6 +139,7 @@ The style of each arc can be controlled with the following properties:
137139
| ---- | ----
138140
| `backgroundColor` | arc background color.
139141
| `borderColor` | arc border color.
142+
| `borderJoinStyle` | arc border join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
140143
| `borderWidth` | arc border width (in pixels).
141144
| `offset` | arc offset (in pixels).
142145
| `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:
165168
| ---- | -----------
166169
| `hoverBackgroundColor` | arc background color when hovered.
167170
| `hoverBorderColor` | arc border color when hovered.
171+
| `hoverBorderJoinStyle` | arc border join style when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
168172
| `hoverBorderWidth` | arc border width when hovered (in pixels).
169173
| `hoverOffset` | arc offset when hovered (in pixels).
170174

‎docs/charts/line.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ The line chart allows a number of properties to be specified for each dataset. T
4949
| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `'rgba(0, 0, 0, 0.1)'`
5050
| [`borderDash`](#line-styling) | `number[]` | Yes | - | `[]`
5151
| [`borderDashOffset`](#line-styling) | `number` | Yes | - | `0.0`
52-
| [`borderJoinStyle`](#line-styling) | `string` | Yes | - | `'miter'`
52+
| [`borderJoinStyle`](#line-styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | - | `'miter'`
5353
| [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
5454
| [`clip`](#general) | `number`\|`object` | - | - | `undefined`
5555
| [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | Yes | - | `'default'`
@@ -60,7 +60,7 @@ The line chart allows a number of properties to be specified for each dataset. T
6060
| [`hoverBorderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
6161
| [`hoverBorderDash`](#line-styling) | `number[]` | Yes | - | `undefined`
6262
| [`hoverBorderDashOffset`](#line-styling) | `number` | Yes | - | `undefined`
63-
| [`hoverBorderJoinStyle`](#line-styling) | `string` | Yes | - | `undefined`
63+
| [`hoverBorderJoinStyle`](#line-styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | - | `undefined`
6464
| [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
6565
| [`indexAxis`](#general) | `string` | - | - | `'x'`
6666
| [`label`](#general) | `string` | - | - | `''`

‎docs/charts/polar.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -56,13 +56,15 @@ The following options can be included in a polar area chart dataset to configure
5656
| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
5757
| ---- | ---- | :----: | :----: | ----
5858
| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
59-
| [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'`
59+
| [`borderAlign`](#border-alignment) | `'center'`\|`'inner'` | Yes | Yes | `'center'`
6060
| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
61+
| [`borderJoinStyle`](#styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
6162
| [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
6263
| [`clip`](#general) | `number`\|`object` | - | - | `undefined`
6364
| [`data`](#data-structure) | `number[]` | - | - | **required**
6465
| [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
6566
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
67+
| [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
6668
| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
6769

6870
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:
8183
| ---- | ----
8284
| `backgroundColor` | arc background color.
8385
| `borderColor` | arc border color.
86+
| `borderJoinStyle` | arc border join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
8487
| `borderWidth` | arc border width (in pixels).
8588

8689
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:
102105
| ---- | -----------
103106
| `hoverBackgroundColor` | arc background color when hovered.
104107
| `hoverBorderColor` | arc border color when hovered.
108+
| `hoverBorderJoinStyle` | arc border join style when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
105109
| `hoverBorderWidth` | arc border width when hovered (in pixels).
106110

107111
All these values, if `undefined`, fallback to the associated [`elements.arc.*`](../configuration/elements.md#arc-configuration) options.

‎docs/charts/radar.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -79,14 +79,14 @@ The radar chart allows a number of properties to be specified for each dataset.
7979
| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `'rgba(0, 0, 0, 0.1)'`
8080
| [`borderDash`](#line-styling) | `number[]` | Yes | - | `[]`
8181
| [`borderDashOffset`](#line-styling) | `number` | Yes | - | `0.0`
82-
| [`borderJoinStyle`](#line-styling) | `string` | Yes | - | `'miter'`
82+
| [`borderJoinStyle`](#line-styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | - | `'miter'`
8383
| [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
8484
| [`hoverBackgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
8585
| [`hoverBorderCapStyle`](#line-styling) | `string` | Yes | - | `undefined`
8686
| [`hoverBorderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
8787
| [`hoverBorderDash`](#line-styling) | `number[]` | Yes | - | `undefined`
8888
| [`hoverBorderDashOffset`](#line-styling) | `number` | Yes | - | `undefined`
89-
| [`hoverBorderJoinStyle`](#line-styling) | `string` | Yes | - | `undefined`
89+
| [`hoverBorderJoinStyle`](#line-styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | - | `undefined`
9090
| [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
9191
| [`clip`](#general) | `number`\|`object` | - | - | `undefined`
9292
| [`data`](#data-structure) | `number[]` | - | - | **required**

‎docs/configuration/elements.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ Namespace: `options.elements.line`, global line options: `Chart.defaults.element
6565
| `borderCapStyle` | `string` | `'butt'` | Line cap style. See [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap).
6666
| `borderDash` | `number[]` | `[]` | Line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
6767
| `borderDashOffset` | `number` | `0.0` | Line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
68-
| `borderJoinStyle` | `string` | `'miter'` | Line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
68+
| `borderJoinStyle` | `'round'`\|`'bevel'`\|`'miter'` | `'miter'` | Line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
6969
| `capBezierPoints` | `boolean` | `true` | `true` to keep Bézier control inside the chart, `false` for no restriction.
7070
| `cubicInterpolationMode` | `string` | `'default'` | Interpolation mode to apply. [See more...](/charts/line.md#cubicinterpolationmode)
7171
| `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.
9797
| ---- | ---- | ------- | -----------
9898
| `angle` - for polar only | `number` | `circumference / (arc count)` | Arc angle to cover.
9999
| `backgroundColor` | [`Color`](/general/colors.md) | `Chart.defaults.backgroundColor` | Arc fill color.
100-
| `borderAlign` | `string` | `'center'` | Arc stroke alignment.
100+
| `borderAlign` | `'center'`\|`'inner'` | `'center'` | Arc stroke alignment.
101101
| `borderColor` | [`Color`](/general/colors.md) | `'#fff'` | Arc stroke color.
102+
| `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'`
102103
| `borderWidth`| `number` | `2` | Arc stroke width.

‎src/elements/element.arc.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -221,18 +221,19 @@ function drawFullCircleBorders(ctx, element, inner) {
221221

222222
function drawBorder(ctx, element, offset, spacing, endAngle) {
223223
const {options} = element;
224+
const {borderWidth, borderJoinStyle} = options;
224225
const inner = options.borderAlign === 'inner';
225226

226-
if (!options.borderWidth) {
227+
if (!borderWidth) {
227228
return;
228229
}
229230

230231
if (inner) {
231-
ctx.lineWidth = options.borderWidth * 2;
232-
ctx.lineJoin = 'round';
232+
ctx.lineWidth = borderWidth * 2;
233+
ctx.lineJoin = borderJoinStyle || 'round';
233234
} else {
234-
ctx.lineWidth = options.borderWidth;
235-
ctx.lineJoin = 'bevel';
235+
ctx.lineWidth = borderWidth;
236+
ctx.lineJoin = borderJoinStyle || 'bevel';
236237
}
237238

238239
if (element.fullCircles) {
@@ -359,6 +360,7 @@ ArcElement.id = 'arc';
359360
ArcElement.defaults = {
360361
borderAlign: 'center',
361362
borderColor: '#fff',
363+
borderJoinStyle: undefined,
362364
borderRadius: 0,
363365
borderWidth: 2,
364366
offset: 0,

‎test/fixtures/controller.doughnut/borderJoinStyle/bevel-default.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
module.exports = {
2+
config: {
3+
type: 'doughnut',
4+
data: {
5+
labels: [0, 1, 2, 3, 4, 5],
6+
datasets: [
7+
{
8+
data: [0, 2, 4, null, 6, 8],
9+
backgroundColor: 'transparent',
10+
borderColor: '#000',
11+
borderWidth: 10,
12+
spacing: 50,
13+
},
14+
]
15+
},
16+
options: {
17+
}
18+
},
19+
options: {
20+
canvas: {
21+
height: 256,
22+
width: 512
23+
}
24+
}
25+
};

‎test/fixtures/controller.doughnut/borderJoinStyle/bevel-default.png

15.2 KB
Loading

‎test/fixtures/controller.doughnut/borderJoinStyle/miter.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
module.exports = {
2+
config: {
3+
type: 'doughnut',
4+
data: {
5+
labels: [0, 1, 2, 3, 4, 5],
6+
datasets: [
7+
{
8+
data: [0, 2, 4, null, 6, 8],
9+
backgroundColor: 'transparent',
10+
borderColor: '#000',
11+
borderJoinStyle: 'miter',
12+
borderWidth: 10,
13+
spacing: 50,
14+
},
15+
]
16+
},
17+
options: {
18+
}
19+
},
20+
options: {
21+
canvas: {
22+
height: 256,
23+
width: 512
24+
}
25+
}
26+
};

‎test/fixtures/controller.doughnut/borderJoinStyle/miter.png

15.8 KB
Loading

‎test/fixtures/controller.doughnut/borderJoinStyle/round.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
module.exports = {
2+
config: {
3+
type: 'doughnut',
4+
data: {
5+
labels: [0, 1, 2, 3, 4, 5],
6+
datasets: [
7+
{
8+
data: [0, 2, 4, null, 6, 8],
9+
backgroundColor: 'transparent',
10+
borderColor: '#000',
11+
borderJoinStyle: 'round',
12+
borderWidth: 10,
13+
spacing: 50,
14+
},
15+
]
16+
},
17+
options: {
18+
}
19+
},
20+
options: {
21+
canvas: {
22+
height: 256,
23+
width: 512
24+
}
25+
}
26+
};

‎test/fixtures/controller.doughnut/borderJoinStyle/round.png

15.2 KB
Loading

‎types/index.esm.d.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -1688,15 +1688,22 @@ export interface ArcOptions extends CommonElementOptions {
16881688
* Arc stroke alignment.
16891689
*/
16901690
borderAlign: 'center' | 'inner';
1691+
16911692
/**
1692-
* Arc offset (in pixels).
1693+
* Line join style. See MDN. Default is 'round' when `borderAlign` is 'inner', else 'bevel'.
16931694
*/
1694-
offset: number;
1695+
borderJoinStyle: CanvasLineJoin;
1696+
16951697
/**
16961698
* Sets the border radius for arcs
16971699
* @default 0
16981700
*/
16991701
borderRadius: number | ArcBorderRadius;
1702+
1703+
/**
1704+
* Arc offset (in pixels).
1705+
*/
1706+
offset: number;
17001707
}
17011708

17021709
export interface ArcHoverOptions extends CommonHoverOptions {

‎types/tests/elements/scriptable_element_options.ts

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const chart3 = new Chart('id', {
4343
elements: {
4444
arc: {
4545
borderWidth: (ctx) => 3,
46+
borderJoinStyle: (ctx) => 'miter'
4647
}
4748
}
4849
}

0 commit comments

Comments
 (0)