Enable configuration of radial scale point label border radius (#10293)

chartjs · Apr 15, 2022 · 5c3dc93 · 5c3dc93
1 parent 4b5ca7f
commit 5c3dc93
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 3 deletions.
diff --git a/docs/axes/radial/linear.md b/docs/axes/radial/linear.md
@@ -120,6 +120,7 @@ Namespace: `options.scales[scaleId].pointLabels`
 | ---- | ---- | ------- | ------- | -----------
 | `backdropColor` | [`Color`](../../general/colors.md) | `true` | `undefined` | Background color of the point label.
 | `backdropPadding` | [`Padding`](../../general/padding.md) | | `2` | Padding of label backdrop.
+| `borderRadius` | `number`\|`object` | `true` | `0` | Border radius of the point label
 | `display` | `boolean` | | `true` | If true, point labels are shown.
 | `callback` | `function` | | | Callback function to transform data labels to point labels. The default implementation simply returns the current string.
 | `color` | [`Color`](../../general/colors.md) | Yes | `Chart.defaults.color` | Color of label.

diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
@@ -1,10 +1,10 @@
 import defaults from '../core/core.defaults';
-import {_longestText, renderText} from '../helpers/helpers.canvas';
+import {_longestText, addRoundedRectPath, renderText} from '../helpers/helpers.canvas';
 import {HALF_PI, TAU, toDegrees, toRadians, _normalizeAngle, PI} from '../helpers/helpers.math';
 import LinearScaleBase from './scale.linearbase';
 import Ticks from '../core/core.ticks';
 import {valueOrDefault, isArray, isFinite, callback as callCallback, isNullOrUndef} from '../helpers/helpers.core';
-import {createContext, toFont, toPadding} from '../helpers/helpers.options';
+import {createContext, toFont, toPadding, toTRBLCorners} from '../helpers/helpers.options';
 
 function getTickBackdropHeight(opts) {
   const tickOpts = opts.ticks;
@@ -208,9 +208,28 @@ function drawPointLabels(scale, labelCount) {
     const {backdropColor} = optsAtIndex;
 
     if (!isNullOrUndef(backdropColor)) {
+      const borderRadius = toTRBLCorners(optsAtIndex.borderRadius);
       const padding = toPadding(optsAtIndex.backdropPadding);
       ctx.fillStyle = backdropColor;
-      ctx.fillRect(left - padding.left, top - padding.top, right - left + padding.width, bottom - top + padding.height);
+
+      const backdropLeft = left - padding.left;
+      const backdropTop = top - padding.top;
+      const backdropWidth = right - left + padding.width;
+      const backdropHeight = bottom - top + padding.height;
+
+      if (Object.values(borderRadius).some(v => v !== 0)) {
+        ctx.beginPath();
+        addRoundedRectPath(ctx, {
+          x: backdropLeft,
+          y: backdropTop,
+          w: backdropWidth,
+          h: backdropHeight,
+          radius: borderRadius,
+        });
+        ctx.fill();
+      } else {
+        ctx.fillRect(backdropLeft, backdropTop, backdropWidth, backdropHeight);
+      }
     }
 
     renderText(

diff --git a/test/fixtures/scale.radialLinear/pointLabels/border-radius.js b/test/fixtures/scale.radialLinear/pointLabels/border-radius.js
@@ -0,0 +1,51 @@
+module.exports = {
+  tolerance: 0.01,
+  config: {
+    type: 'radar',
+    data: {
+      labels: [
+        ['VENTE ET', 'COMMERCIALISATION'],
+        ['GESTION', 'FINANCIÈRE'],
+        'NUMÉRIQUE',
+        ['ADMINISTRATION', 'ET OPÉRATION'],
+        ['RESSOURCES', 'HUMAINES'],
+        'INNOVATION'
+      ],
+      datasets: [
+        {
+          backgroundColor: '#E43E51',
+          label: 'Compétences entrepreunariales',
+          data: [3, 2, 2, 1, 3, 1]
+        }
+      ]
+    },
+    options: {
+      plugins: {
+        legend: false,
+        tooltip: false,
+        filler: false
+      },
+      scales: {
+        r: {
+          min: 0,
+          max: 3,
+          pointLabels: {
+            backdropColor: 'blue',
+            backdropPadding: {left: 5, right: 5, top: 2, bottom: 2},
+            borderRadius: 10,
+          },
+          ticks: {
+            display: false,
+            stepSize: 1,
+            maxTicksLimit: 1
+          }
+        }
+      },
+      responsive: true,
+      maintainAspectRatio: false
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};
diff --git a/test/fixtures/scale.radialLinear/pointLabels/border-radius.png b/test/fixtures/scale.radialLinear/pointLabels/border-radius.png
diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
@@ -3380,6 +3380,13 @@ export type RadialLinearScaleOptions = CoreScaleOptions & {
      */
     backdropPadding: Scriptable<number | ChartArea, ScriptableScalePointLabelContext>;
 
+    /**
+     * Border radius
+     * @default 0
+     * @since 3.8.0
+     */
+    borderRadius: Scriptable<number | BorderRadius, ScriptableScalePointLabelContext>;
+
     /**
      * if true, point labels are shown.
      * @default true