diff --git a/docs/axes/radial/linear.md b/docs/axes/radial/linear.md index 10c2109421d..e47d0bbf200 100644 --- a/docs/axes/radial/linear.md +++ b/docs/axes/radial/linear.md @@ -65,6 +65,7 @@ Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines | `borderDash` | `number[]` | | | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). | `borderDashOffset` | `number` | Yes | | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). | `circular` | `boolean` | | | `false` | If true, gridlines are circular (on radar and polar area charts only). +| `borderRadius` | `number` | | | `0` | If greater than 0, grid lines will be curved. | `color` | [`Color`](../general/colors.md) | Yes | Yes | `Chart.defaults.borderColor` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line, and so on. | `display` | `boolean` | | | `true` | If false, do not display grid lines for this axis. | `lineWidth` | `number` | Yes | Yes | `1` | Stroke width of grid lines. diff --git a/docs/axes/styling.md b/docs/axes/styling.md index 20c2b93f412..d715b101640 100644 --- a/docs/axes/styling.md +++ b/docs/axes/styling.md @@ -9,6 +9,7 @@ Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines | Name | Type | Scriptable | Indexable | Default | Description | ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | ----------- | `circular` | `boolean` | | | `false` | If true, gridlines are circular (on radar and polar area charts only). +| `borderRadius` | `number` | | | `0` | If greater than 0, grid lines will be curved. | `color` | [`Color`](../general/colors.md) | Yes | Yes | `Chart.defaults.borderColor` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line, and so on. | `display` | `boolean` | | | `true` | If false, do not display grid lines for this axis. | `drawOnChartArea` | `boolean` | | | `true` | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn. diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index 23e207bd5d9..6e6c7d2b696 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -287,11 +287,31 @@ function drawPointLabels(scale, labelCount) { } } -function pathRadiusLine(scale, radius, circular, labelCount) { +function pathRadiusLine(scale, radius, borderRadius, circular, labelCount) { const {ctx} = scale; if (circular) { // Draw circular arcs between the points ctx.arc(scale.xCenter, scale.yCenter, radius, 0, TAU); + } else if (borderRadius) { + // Draw curved lines connecting each index + let pointPosition1 = scale.getPointPosition(0, radius); + let pointPosition2 = scale.getPointPosition(1, radius); + ctx.lineTo( + (pointPosition1.x + pointPosition2.x) / 2, + (pointPosition1.y + pointPosition2.y) / 2 + ); + + for (let i = 1; i <= labelCount; i++) { + pointPosition1 = pointPosition2; + pointPosition2 = scale.getPointPosition((i + 1) % labelCount, radius); + ctx.arcTo( + pointPosition1.x, + pointPosition1.y, + (pointPosition1.x + pointPosition2.x) / 2, + (pointPosition1.y + pointPosition2.y) / 2, + borderRadius + ); + } } else { // Draw straight lines connecting each index let pointPosition = scale.getPointPosition(0, radius); @@ -306,7 +326,7 @@ function pathRadiusLine(scale, radius, circular, labelCount) { function drawRadiusLine(scale, gridLineOpts, radius, labelCount, borderOpts) { const ctx = scale.ctx; - const circular = gridLineOpts.circular; + const {circular, borderRadius} = gridLineOpts; const {color, lineWidth} = gridLineOpts; @@ -321,7 +341,7 @@ function drawRadiusLine(scale, gridLineOpts, radius, labelCount, borderOpts) { ctx.lineDashOffset = borderOpts.dashOffset; ctx.beginPath(); - pathRadiusLine(scale, radius, circular, labelCount); + pathRadiusLine(scale, radius, borderRadius, circular, labelCount); ctx.closePath(); ctx.stroke(); ctx.restore(); @@ -548,12 +568,12 @@ export default class RadialLinearScale extends LinearScaleBase { * @protected */ drawBackground() { - const {backgroundColor, grid: {circular}} = this.options; + const {backgroundColor, grid: {circular, borderRadius}} = this.options; if (backgroundColor) { const ctx = this.ctx; ctx.save(); ctx.beginPath(); - pathRadiusLine(this, this.getDistanceFromCenterForValue(this._endValue), circular, this._pointLabels.length); + pathRadiusLine(this, this.getDistanceFromCenterForValue(this._endValue), borderRadius, circular, this._pointLabels.length); ctx.closePath(); ctx.fillStyle = backgroundColor; ctx.fill(); diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 1a652c6dc19..21dcf84f290 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -2977,6 +2977,10 @@ export interface GridLineOptions { * @default false */ circular: boolean; + /** + * @default 0 + */ + borderRadius: number; /** * @default 'rgba(0, 0, 0, 0.1)' */