Skip to content

Commit 7f9bca6

Browse files
stockiNailstockiNail
authored
Add borderDash options to arc element (#11127)
1 parent 6cf9de9 commit 7f9bca6

File tree

14 files changed

+186
-3
lines changed

14 files changed

+186
-3
lines changed

‎docs/charts/doughnut.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,8 @@ The doughnut/pie chart allows a number of properties to be specified for each da
105105
| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
106106
| [`borderAlign`](#border-alignment) | `'center'`\|`'inner'` | Yes | Yes | `'center'`
107107
| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
108+
| [`borderDash`](#styling) | `number[]` | Yes | - | `[]`
109+
| [`borderDashOffset`](#styling) | `number` | Yes | - | `0.0`
108110
| [`borderJoinStyle`](#styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
109111
| [`borderRadius`](#border-radius) | `number`\|`object` | Yes | Yes | `0`
110112
| [`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
113115
| [`data`](#data-structure) | `number[]` | - | - | **required**
114116
| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
115117
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
118+
| [`hoverBorderDash`](#interactions) | `number[]` | Yes | - | `undefined`
119+
| [`hoverBorderDashOffset`](#interactions) | `number` | Yes | - | `undefined`
116120
| [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
117121
| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
118122
| [`hoverOffset`](#interactions) | `number` | Yes | Yes | `0`
@@ -139,6 +143,8 @@ The style of each arc can be controlled with the following properties:
139143
| ---- | ----
140144
| `backgroundColor` | arc background color.
141145
| `borderColor` | arc border color.
146+
| `borderDash` | arc border length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
147+
| `borderDashOffset` | arc border offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
142148
| `borderJoinStyle` | arc border join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
143149
| `borderWidth` | arc border width (in pixels).
144150
| `offset` | arc offset (in pixels).
@@ -168,6 +174,8 @@ The interaction with each arc can be controlled with the following properties:
168174
| ---- | -----------
169175
| `hoverBackgroundColor` | arc background color when hovered.
170176
| `hoverBorderColor` | arc border color when hovered.
177+
| `hoverBorderDash` | arc border length and spacing of dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
178+
| `hoverBorderDashOffset` | arc border offset for line dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
171179
| `hoverBorderJoinStyle` | arc border join style when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
172180
| `hoverBorderWidth` | arc border width when hovered (in pixels).
173181
| `hoverOffset` | arc offset when hovered (in pixels).

‎docs/charts/polar.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,12 +58,16 @@ The following options can be included in a polar area chart dataset to configure
5858
| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
5959
| [`borderAlign`](#border-alignment) | `'center'`\|`'inner'` | Yes | Yes | `'center'`
6060
| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
61+
| [`borderDash`](#styling) | `number[]` | Yes | - | `[]`
62+
| [`borderDashOffset`](#styling) | `number` | Yes | - | `0.0`
6163
| [`borderJoinStyle`](#styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
6264
| [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
6365
| [`clip`](#general) | `number`\|`object`\|`false` | - | - | `undefined`
6466
| [`data`](#data-structure) | `number[]` | - | - | **required**
6567
| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
6668
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
69+
| [`hoverBorderDash`](#interactions) | `number[]` | Yes | - | `undefined`
70+
| [`hoverBorderDashOffset`](#interactions) | `number` | Yes | - | `undefined`
6771
| [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
6872
| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
6973
| [`circular`](#styling) | `boolean` | Yes | Yes | `true`
@@ -84,6 +88,8 @@ The style of each arc can be controlled with the following properties:
8488
| ---- | ----
8589
| `backgroundColor` | arc background color.
8690
| `borderColor` | arc border color.
91+
| `borderDash` | arc border length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
92+
| `borderDashOffset` | arc border offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
8793
| `borderJoinStyle` | arc border join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
8894
| `borderWidth` | arc border width (in pixels).
8995
| `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:
107113
| ---- | -----------
108114
| `hoverBackgroundColor` | arc background color when hovered.
109115
| `hoverBorderColor` | arc border color when hovered.
116+
| `hoverBorderDash` | arc border length and spacing of dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
117+
| `hoverBorderDashOffset` | arc border offset for line dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
110118
| `hoverBorderJoinStyle` | arc border join style when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
111119
| `hoverBorderWidth` | arc border width when hovered (in pixels).
112120

‎docs/configuration/elements.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,8 @@ Namespace: `options.elements.arc`, global arc options: `Chart.defaults.elements.
100100
| `backgroundColor` | [`Color`](/general/colors.md) | `Chart.defaults.backgroundColor` | Arc fill color.
101101
| `borderAlign` | `'center'`\|`'inner'` | `'center'` | Arc stroke alignment.
102102
| `borderColor` | [`Color`](/general/colors.md) | `'#fff'` | Arc stroke color.
103+
| `borderDash` | `number[]` | `[]` | Arc line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
104+
| `borderDashOffset` | `number` | `0.0` | Arc line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
103105
| `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'`
104106
| `borderWidth`| `number` | `2` | Arc stroke width.
105107
| `circular` | `boolean` | `true` | By default the Arc is curved. If `circular: false` the Arc will be flat

‎src/controllers/controller.doughnut.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export default class DoughnutController extends DatasetController {
7676

7777
static descriptors = {
7878
_scriptable: (name) => name !== 'spacing',
79-
_indexable: (name) => name !== 'spacing',
79+
_indexable: (name) => name !== 'spacing' && !name.startsWith('borderDash') && !name.startsWith('hoverBorderDash'),
8080
};
8181

8282
/**

‎src/elements/element.arc.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,13 +213,16 @@ function drawBorder(
213213
circular: boolean,
214214
) {
215215
const {fullCircles, startAngle, circumference, options} = element;
216-
const {borderWidth, borderJoinStyle} = options;
216+
const {borderWidth, borderJoinStyle, borderDash, borderDashOffset} = options;
217217
const inner = options.borderAlign === 'inner';
218218

219219
if (!borderWidth) {
220220
return;
221221
}
222222

223+
ctx.setLineDash(borderDash || []);
224+
ctx.lineDashOffset = borderDashOffset;
225+
223226
if (inner) {
224227
ctx.lineWidth = borderWidth * 2;
225228
ctx.lineJoin = borderJoinStyle || 'round';
@@ -264,6 +267,8 @@ export default class ArcElement extends Element<ArcProps, ArcOptions> {
264267
static defaults = {
265268
borderAlign: 'center',
266269
borderColor: '#fff',
270+
borderDash: [],
271+
borderDashOffset: 0,
267272
borderJoinStyle: undefined,
268273
borderRadius: 0,
269274
borderWidth: 2,
@@ -277,6 +282,11 @@ export default class ArcElement extends Element<ArcProps, ArcOptions> {
277282
backgroundColor: 'backgroundColor'
278283
};
279284

285+
static descriptors = {
286+
_scriptable: true,
287+
_indexable: (name) => name !== 'borderDash'
288+
};
289+
280290
circumference: number;
281291
endAngle: number;
282292
fullCircles: number;

‎src/types/index.d.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1700,7 +1700,16 @@ export interface ArcOptions extends CommonElementOptions {
17001700
* Arc stroke alignment.
17011701
*/
17021702
borderAlign: 'center' | 'inner';
1703-
1703+
/**
1704+
* Line dash. See MDN.
1705+
* @default []
1706+
*/
1707+
borderDash: number[];
1708+
/**
1709+
* Line dash offset. See MDN.
1710+
* @default 0.0
1711+
*/
1712+
borderDashOffset: number;
17041713
/**
17051714
* Line join style. See MDN. Default is 'round' when `borderAlign` is 'inner', else 'bevel'.
17061715
*/
@@ -1730,6 +1739,8 @@ export interface ArcOptions extends CommonElementOptions {
17301739
}
17311740

17321741
export interface ArcHoverOptions extends CommonHoverOptions {
1742+
hoverBorderDash: number[];
1743+
hoverBorderDashOffset: number;
17331744
hoverOffset: number;
17341745
}
17351746

‎test/fixtures/controller.doughnut/borderDash/scriptable.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
module.exports = {
2+
config: {
3+
type: 'doughnut',
4+
data: {
5+
labels: [0, 1, 2, 3, 4, 5],
6+
datasets: [
7+
{
8+
// option in element (fallback)
9+
data: [5, 2, 4, 7, 6, 8]
10+
}
11+
]
12+
},
13+
options: {
14+
elements: {
15+
arc: {
16+
backgroundColor: 'transparent',
17+
borderColor: 'black',
18+
borderWidth: 1,
19+
borderDash: function(ctx) {
20+
var value = (ctx.dataIndex || 0) % 2;
21+
return value === 0 ? [3, 3] : [];
22+
}
23+
24+
}
25+
},
26+
}
27+
},
28+
options: {
29+
canvas: {
30+
height: 256,
31+
width: 512
32+
}
33+
}
34+
};

‎test/fixtures/controller.doughnut/borderDash/scriptable.png

11.9 KB
Loading

‎test/fixtures/controller.doughnut/borderDash/value.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
module.exports = {
2+
config: {
3+
type: 'polarArea',
4+
data: {
5+
labels: [0, 1, 2, 3, 4, 5],
6+
datasets: [
7+
{
8+
// option in dataset
9+
data: [5, 2, 4, 7, 6, 8],
10+
borderAlign: 'inner',
11+
borderColor: 'black'
12+
},
13+
]
14+
},
15+
options: {
16+
elements: {
17+
arc: {
18+
backgroundColor: 'transparent',
19+
borderWidth: 1,
20+
borderDash: [3, 3]
21+
}
22+
},
23+
scales: {
24+
r: {
25+
display: false
26+
}
27+
}
28+
}
29+
},
30+
options: {
31+
canvas: {
32+
height: 256,
33+
width: 512
34+
}
35+
}
36+
};

‎test/fixtures/controller.doughnut/borderDash/value.png

9.66 KB
Loading

‎test/fixtures/controller.polarArea/borderDash/scriptable.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
module.exports = {
2+
config: {
3+
type: 'polarArea',
4+
data: {
5+
labels: [0, 1, 2, 3, 4, 5],
6+
datasets: [
7+
{
8+
// option in dataset
9+
data: [5, 2, 4, 7, 6, 8]
10+
}
11+
]
12+
},
13+
options: {
14+
elements: {
15+
arc: {
16+
backgroundColor: 'transparent',
17+
borderColor: 'black',
18+
borderWidth: 1,
19+
borderDash: function(ctx) {
20+
var value = (ctx.dataIndex || 0) % 2;
21+
return value === 0 ? [3, 3] : [];
22+
}
23+
}
24+
},
25+
scales: {
26+
r: {
27+
display: false
28+
}
29+
}
30+
}
31+
},
32+
options: {
33+
canvas: {
34+
height: 256,
35+
width: 512
36+
}
37+
}
38+
};

‎test/fixtures/controller.polarArea/borderDash/scriptable.png

9.52 KB
Loading

‎test/fixtures/controller.polarArea/borderDash/value.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
module.exports = {
2+
config: {
3+
type: 'polarArea',
4+
data: {
5+
labels: [0, 1, 2, 3, 4, 5],
6+
datasets: [
7+
{
8+
// option in dataset
9+
data: [5, 2, 4, 7, 6, 8],
10+
borderAlign: 'inner',
11+
borderColor: 'black'
12+
},
13+
]
14+
},
15+
options: {
16+
elements: {
17+
arc: {
18+
backgroundColor: 'transparent',
19+
borderWidth: 1,
20+
borderDash: [3, 3]
21+
}
22+
},
23+
scales: {
24+
r: {
25+
display: false
26+
}
27+
}
28+
}
29+
},
30+
options: {
31+
canvas: {
32+
height: 256,
33+
width: 512
34+
}
35+
}
36+
};

‎test/fixtures/controller.polarArea/borderDash/value.png

9.67 KB
Loading

0 commit comments

Comments
 (0)