feat: grid borderRadius

chartjs · Sep 21, 2023 · a2d648f · a2d648f
1 parent 6516b0a
commit a2d648f
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -2977,6 +2977,10 @@ export interface GridLineOptions {
    * @default false
    */
   circular: boolean;
+  /**
+   * @default 0
+   */
+  borderRadius: number;
   /**
    * @default 'rgba(0, 0, 0, 0.1)'
    */