diff --git a/docs/charts/doughnut.md b/docs/charts/doughnut.md index 5964864272c..d6a91912ffe 100644 --- 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 bfd9927d175..819799fe9b5 100644 --- 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 550674272d2..9ec9bb27ea2 100644 --- 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 47e2a888795..5508b2abf6b 100644 --- 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 aff43601185..ec5fe9659d0 100644 --- 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 66b51677115..1e03f9e1a7b 100644 --- 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 index 00000000000..9bb4415ad1b --- /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 index 00000000000..ecb2a2de3e9 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 index 00000000000..f50e923c085 --- /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 index 00000000000..6ec65b1f031 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 index 00000000000..43aa7ca6c51 --- /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 index 00000000000..dab62871e83 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 67c251c6d75..48f398e584a 100644 --- 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 0776ec0a080..c81892d7910 100644 --- 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' } } }