Radial scale point label backdrop color (#8633)

* Radial scale point label backdrop color

* Update default tests

* backdropPadding is a single setting

* Up the tolerance a bit

* Update tick backdrop padding options

Author: etimberg

docs/docs/axes/radial/linear.mdx

@@ -34,8 +34,7 @@ Namespace: `options.scales[scaleId].ticks`
 | Name | Type | Scriptable | Default | Description
 | ---- | ---- | ------- | ------- | -----------
 | `backdropColor` | [`Color`](../../general/colors.md) | Yes | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops.
-| `backdropPaddingX` | `number` | | `2` | Horizontal padding of label backdrop.
-| `backdropPaddingY` | `number` | | `2` | Vertical padding of label backdrop.
+| `backdropPadding` | `number`\|`{top: number, bottom: number}` | | `2` | Padding of label backdrop.
 | `format` | `object` | | | The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options used by the default label formatter
 | `maxTicksLimit` | `number` | | `11` | Maximum number of ticks and gridlines to show.
 | `precision` | `number` | | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
@@ -126,6 +125,8 @@ Namespace: `options.scales[scaleId].pointLabels`
 
 | Name | Type | Scriptable | Default | Description
 | ---- | ---- | ------- | ------- | -----------
+| `backdropColor` | [`Color`](../../general/colors.md) | `true` | `undefined` | Background color of the point label.
+| `backdropPadding` | `number`\|`{top: number, bottom: number}` | | `2` | Padding of label backdrop.
 | `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.

docs/docs/getting-started/v3-migration.md

@@ -235,6 +235,7 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
 * `options.ticks.fixedStepSize` is no longer used. Use `options.ticks.stepSize`.
 * `options.ticks.major` and `options.ticks.minor` were replaced with scriptable options for tick fonts.
 * `Chart.Ticks.formatters.linear` was renamed to `Chart.Ticks.formatters.numeric`.
+* `options.ticks.backdropPaddingX` and `options.ticks.backdropPaddingY` were replaced with `options.ticks.backdropPadding` in the radial linear scale.
 
 #### Tooltip
 

src/scales/scale.radialLinear.js

@@ -4,13 +4,14 @@ import {HALF_PI, isNumber, TAU, toDegrees, toRadians, _normalizeAngle} from '../
 import LinearScaleBase from './scale.linearbase';
 import Ticks from '../core/core.ticks';
 import {valueOrDefault, isArray, isFinite, callback as callCallback, isNullOrUndef} from '../helpers/helpers.core';
-import {toFont} from '../helpers/helpers.options';
+import {toFont, toPadding} from '../helpers/helpers.options';
 
 function getTickBackdropHeight(opts) {
   const tickOpts = opts.ticks;
 
   if (tickOpts.display && opts.display) {
-    return valueOrDefault(tickOpts.font && tickOpts.font.size, defaults.font.size) + tickOpts.backdropPaddingY * 2;
+    const padding = toPadding(tickOpts.backdropPadding);
+    return valueOrDefault(tickOpts.font && tickOpts.font.size, defaults.font.size) + padding.height;
   }
   return 0;
 }
@@ -202,7 +203,15 @@ function drawPointLabels(scale, labelCount) {
   for (let i = labelCount - 1; i >= 0; i--) {
     const optsAtIndex = pointLabels.setContext(scale.getContext(i));
     const plFont = toFont(optsAtIndex.font);
-    const {x, y, textAlign} = scale._pointLabelItems[i];
+    const {x, y, textAlign, left, top, right, bottom} = scale._pointLabelItems[i];
+    const {backdropColor} = optsAtIndex;
+
+    if (!isNullOrUndef(backdropColor)) {
+      const padding = toPadding(optsAtIndex.backdropPadding);
+      ctx.fillStyle = backdropColor;
+      ctx.fillRect(left - padding.left, top - padding.top, right - left + padding.width, bottom - top + padding.height);
+    }
+
     renderText(
       ctx,
       scale._pointLabels[i],
@@ -532,12 +541,12 @@ export default class RadialLinearScale extends LinearScaleBase {
         width = ctx.measureText(tick.label).width;
         ctx.fillStyle = optsAtIndex.backdropColor;
 
-        const {backdropPaddingX, backdropPaddingY} = optsAtIndex;
+        const padding = toPadding(optsAtIndex.backdropPadding);
         ctx.fillRect(
-          -width / 2 - backdropPaddingX,
-          -offset - tickFont.size / 2 - backdropPaddingY,
-          width + backdropPaddingX * 2,
-          tickFont.size + backdropPaddingY * 2
+          -width / 2 - padding.left,
+          -offset - tickFont.size / 2 - padding.top,
+          width + padding.width,
+          tickFont.size + padding.height
         );
       }
 
@@ -588,16 +597,18 @@ RadialLinearScale.defaults = {
     // String - The colour of the label backdrop
     backdropColor: 'rgba(255,255,255,0.75)',
 
-    // Number - The backdrop padding above & below the label in pixels
-    backdropPaddingY: 2,
-
-    // Number - The backdrop padding to the side of the label in pixels
-    backdropPaddingX: 2,
+    // Number/Object - The backdrop padding of the label in pixels
+    backdropPadding: 2,
 
     callback: Ticks.formatters.numeric
   },
 
   pointLabels: {
+    backdropColor: undefined,
+
+    // Number - The backdrop padding above & below the label in pixels
+    backdropPadding: 2,
+
     // Boolean - if true, show point labels
     display: true,
 

test/fixtures/scale.radialLinear/pointLabels/background.js

@@ -0,0 +1,50 @@
+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},
+          },
+          ticks: {
+            display: false,
+            stepSize: 1,
+            maxTicksLimit: 1
+          }
+        }
+      },
+      responsive: true,
+      maintainAspectRatio: false
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};

test/fixtures/scale.radialLinear/pointLabels/background.png

@@ -37,12 +37,13 @@ describe('Test the radial linear scale', function() {
         color: Chart.defaults.color,
         showLabelBackdrop: true,
         backdropColor: 'rgba(255,255,255,0.75)',
-        backdropPaddingY: 2,
-        backdropPaddingX: 2,
+        backdropPadding: 2,
         callback: defaultConfig.ticks.callback
       },
 
       pointLabels: {
+        backdropColor: undefined,
+        backdropPadding: 2,
         color: Chart.defaults.color,
         display: true,
         font: {

test/specs/scale.radialLinear.tests.js

@@ -3005,6 +3005,17 @@ export type RadialLinearScaleOptions = CoreScaleOptions & {
   max: number;
 
   pointLabels: {
+    /**
+     * Background color of the point label.
+     * @default undefined
+     */
+    backdropColor: Scriptable<Color, ScriptableScaleContext>;
+    /**
+     * Padding of label backdrop.
+     * @default 2
+     */
+     backdropPadding: Scriptable<number | ChartArea, ScriptableScaleContext>;
+
     /**
      * if true, point labels are shown.
      * @default true
@@ -3043,15 +3054,10 @@ export type RadialLinearScaleOptions = CoreScaleOptions & {
      */
     backdropColor: Scriptable<Color, ScriptableScaleContext>;
     /**
-     * Horizontal padding of label backdrop.
-     * @default 2
-     */
-    backdropPaddingX: number;
-    /**
-     * Vertical padding of label backdrop.
+     * Padding of label backdrop.
      * @default 2
      */
-    backdropPaddingY: number;
+    backdropPadding: number | ChartArea;
 
     /**
      * The Intl.NumberFormat options used by the default label formatter