diff --git a/docs/charts/doughnut.md b/docs/charts/doughnut.md index f9f29d5214b..3d0e3b08bed 100644 --- a/docs/charts/doughnut.md +++ b/docs/charts/doughnut.md @@ -105,6 +105,8 @@ The doughnut/pie chart allows a number of properties to be specified for each da | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` | [`borderAlign`](#border-alignment) | `'center'`\|`'inner'` | Yes | Yes | `'center'` | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'` +| [`borderDash`](#styling) | `number[]` | Yes | - | `[]` +| [`borderDashOffset`](#styling) | `number` | Yes | - | `0.0` | [`borderJoinStyle`](#styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined` | [`borderRadius`](#border-radius) | `number`\|`object` | Yes | Yes | `0` | [`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 | [`data`](#data-structure) | `number[]` | - | - | **required** | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` +| [`hoverBorderDash`](#interactions) | `number[]` | Yes | - | `undefined` +| [`hoverBorderDashOffset`](#interactions) | `number` | Yes | - | `undefined` | [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined` | [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined` | [`hoverOffset`](#interactions) | `number` | Yes | Yes | `0` @@ -139,6 +143,8 @@ The style of each arc can be controlled with the following properties: | ---- | ---- | `backgroundColor` | arc background color. | `borderColor` | arc border color. +| `borderDash` | arc border length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). +| `borderDashOffset` | arc border offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). | `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). @@ -168,6 +174,8 @@ The interaction with each arc can be controlled with the following properties: | ---- | ----------- | `hoverBackgroundColor` | arc background color when hovered. | `hoverBorderColor` | arc border color when hovered. +| `hoverBorderDash` | arc border length and spacing of dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). +| `hoverBorderDashOffset` | arc border offset for line dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). | `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/polar.md b/docs/charts/polar.md index 0f9c8fcee1b..068cebcce8b 100644 --- a/docs/charts/polar.md +++ b/docs/charts/polar.md @@ -58,12 +58,16 @@ The following options can be included in a polar area chart dataset to configure | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` | [`borderAlign`](#border-alignment) | `'center'`\|`'inner'` | Yes | Yes | `'center'` | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'` +| [`borderDash`](#styling) | `number[]` | Yes | - | `[]` +| [`borderDashOffset`](#styling) | `number` | Yes | - | `0.0` | [`borderJoinStyle`](#styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined` | [`borderWidth`](#styling) | `number` | Yes | Yes | `2` | [`clip`](#general) | `number`\|`object`\|`false` | - | - | `undefined` | [`data`](#data-structure) | `number[]` | - | - | **required** | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` +| [`hoverBorderDash`](#interactions) | `number[]` | Yes | - | `undefined` +| [`hoverBorderDashOffset`](#interactions) | `number` | Yes | - | `undefined` | [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined` | [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined` | [`circular`](#styling) | `boolean` | Yes | Yes | `true` @@ -84,6 +88,8 @@ The style of each arc can be controlled with the following properties: | ---- | ---- | `backgroundColor` | arc background color. | `borderColor` | arc border color. +| `borderDash` | arc border length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). +| `borderDashOffset` | arc border offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). | `borderJoinStyle` | arc border join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin). | `borderWidth` | arc border width (in pixels). | `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: | ---- | ----------- | `hoverBackgroundColor` | arc background color when hovered. | `hoverBorderColor` | arc border color when hovered. +| `hoverBorderDash` | arc border length and spacing of dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). +| `hoverBorderDashOffset` | arc border offset for line dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). | `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). diff --git a/docs/configuration/elements.md b/docs/configuration/elements.md index 4b2a08f940c..828df39439e 100644 --- a/docs/configuration/elements.md +++ b/docs/configuration/elements.md @@ -100,6 +100,8 @@ Namespace: `options.elements.arc`, global arc options: `Chart.defaults.elements. | `backgroundColor` | [`Color`](/general/colors.md) | `Chart.defaults.backgroundColor` | Arc fill color. | `borderAlign` | `'center'`\|`'inner'` | `'center'` | Arc stroke alignment. | `borderColor` | [`Color`](/general/colors.md) | `'#fff'` | Arc stroke color. +| `borderDash` | `number[]` | `[]` | Arc line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). +| `borderDashOffset` | `number` | `0.0` | Arc line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). | `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. | `circular` | `boolean` | `true` | By default the Arc is curved. If `circular: false` the Arc will be flat diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index 3080b98831a..59285010b53 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -76,7 +76,7 @@ export default class DoughnutController extends DatasetController { static descriptors = { _scriptable: (name) => name !== 'spacing', - _indexable: (name) => name !== 'spacing', + _indexable: (name) => name !== 'spacing' && !name.startsWith('borderDash') && !name.startsWith('hoverBorderDash'), }; /** diff --git a/src/elements/element.arc.ts b/src/elements/element.arc.ts index 88391d31dd4..dff28b62a47 100644 --- a/src/elements/element.arc.ts +++ b/src/elements/element.arc.ts @@ -213,13 +213,16 @@ function drawBorder( circular: boolean, ) { const {fullCircles, startAngle, circumference, options} = element; - const {borderWidth, borderJoinStyle} = options; + const {borderWidth, borderJoinStyle, borderDash, borderDashOffset} = options; const inner = options.borderAlign === 'inner'; if (!borderWidth) { return; } + ctx.setLineDash(borderDash || []); + ctx.lineDashOffset = borderDashOffset; + if (inner) { ctx.lineWidth = borderWidth * 2; ctx.lineJoin = borderJoinStyle || 'round'; @@ -264,6 +267,8 @@ export default class ArcElement extends Element { static defaults = { borderAlign: 'center', borderColor: '#fff', + borderDash: [], + borderDashOffset: 0, borderJoinStyle: undefined, borderRadius: 0, borderWidth: 2, @@ -277,6 +282,11 @@ export default class ArcElement extends Element { backgroundColor: 'backgroundColor' }; + static descriptors = { + _scriptable: true, + _indexable: (name) => name !== 'borderDash' + }; + circumference: number; endAngle: number; fullCircles: number; diff --git a/src/types/index.d.ts b/src/types/index.d.ts index b6f90af8bc7..6caf2174d45 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -1700,7 +1700,16 @@ export interface ArcOptions extends CommonElementOptions { * Arc stroke alignment. */ borderAlign: 'center' | 'inner'; - + /** + * Line dash. See MDN. + * @default [] + */ + borderDash: number[]; + /** + * Line dash offset. See MDN. + * @default 0.0 + */ + borderDashOffset: number; /** * Line join style. See MDN. Default is 'round' when `borderAlign` is 'inner', else 'bevel'. */ @@ -1730,6 +1739,8 @@ export interface ArcOptions extends CommonElementOptions { } export interface ArcHoverOptions extends CommonHoverOptions { + hoverBorderDash: number[]; + hoverBorderDashOffset: number; hoverOffset: number; } diff --git a/test/fixtures/controller.doughnut/borderDash/scriptable.js b/test/fixtures/controller.doughnut/borderDash/scriptable.js new file mode 100644 index 00000000000..d8d2b6900fc --- /dev/null +++ b/test/fixtures/controller.doughnut/borderDash/scriptable.js @@ -0,0 +1,34 @@ +module.exports = { + config: { + type: 'doughnut', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in element (fallback) + data: [5, 2, 4, 7, 6, 8] + } + ] + }, + options: { + elements: { + arc: { + backgroundColor: 'transparent', + borderColor: 'black', + borderWidth: 1, + borderDash: function(ctx) { + var value = (ctx.dataIndex || 0) % 2; + return value === 0 ? [3, 3] : []; + } + + } + }, + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.doughnut/borderDash/scriptable.png b/test/fixtures/controller.doughnut/borderDash/scriptable.png new file mode 100644 index 00000000000..eed3a23fe04 Binary files /dev/null and b/test/fixtures/controller.doughnut/borderDash/scriptable.png differ diff --git a/test/fixtures/controller.doughnut/borderDash/value.js b/test/fixtures/controller.doughnut/borderDash/value.js new file mode 100644 index 00000000000..7e726e16cd4 --- /dev/null +++ b/test/fixtures/controller.doughnut/borderDash/value.js @@ -0,0 +1,36 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [5, 2, 4, 7, 6, 8], + borderAlign: 'inner', + borderColor: 'black' + }, + ] + }, + options: { + elements: { + arc: { + backgroundColor: 'transparent', + borderWidth: 1, + borderDash: [3, 3] + } + }, + scales: { + r: { + display: false + } + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.doughnut/borderDash/value.png b/test/fixtures/controller.doughnut/borderDash/value.png new file mode 100644 index 00000000000..f7ecdc504aa Binary files /dev/null and b/test/fixtures/controller.doughnut/borderDash/value.png differ diff --git a/test/fixtures/controller.polarArea/borderDash/scriptable.js b/test/fixtures/controller.polarArea/borderDash/scriptable.js new file mode 100644 index 00000000000..3bce13b38c5 --- /dev/null +++ b/test/fixtures/controller.polarArea/borderDash/scriptable.js @@ -0,0 +1,38 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [5, 2, 4, 7, 6, 8] + } + ] + }, + options: { + elements: { + arc: { + backgroundColor: 'transparent', + borderColor: 'black', + borderWidth: 1, + borderDash: function(ctx) { + var value = (ctx.dataIndex || 0) % 2; + return value === 0 ? [3, 3] : []; + } + } + }, + scales: { + r: { + display: false + } + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderDash/scriptable.png b/test/fixtures/controller.polarArea/borderDash/scriptable.png new file mode 100644 index 00000000000..5098dde9d69 Binary files /dev/null and b/test/fixtures/controller.polarArea/borderDash/scriptable.png differ diff --git a/test/fixtures/controller.polarArea/borderDash/value.js b/test/fixtures/controller.polarArea/borderDash/value.js new file mode 100644 index 00000000000..7e726e16cd4 --- /dev/null +++ b/test/fixtures/controller.polarArea/borderDash/value.js @@ -0,0 +1,36 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [5, 2, 4, 7, 6, 8], + borderAlign: 'inner', + borderColor: 'black' + }, + ] + }, + options: { + elements: { + arc: { + backgroundColor: 'transparent', + borderWidth: 1, + borderDash: [3, 3] + } + }, + scales: { + r: { + display: false + } + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderDash/value.png b/test/fixtures/controller.polarArea/borderDash/value.png new file mode 100644 index 00000000000..2e44c316eac Binary files /dev/null and b/test/fixtures/controller.polarArea/borderDash/value.png differ