Update tick backdrop padding options

chartjs · Mar 13, 2021 · 3908ff9 · 3908ff9
1 parent 6a3b11e
commit 3908ff9
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 22 deletions.
diff --git a/docs/docs/axes/radial/linear.mdx b/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.

diff --git a/docs/docs/getting-started/v3-migration.md b/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
 

diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
@@ -10,7 +10,8 @@ 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;
 }
@@ -540,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
         );
       }
 
@@ -596,11 +597,8 @@ 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
   },

diff --git a/test/specs/scale.radialLinear.tests.js b/test/specs/scale.radialLinear.tests.js
@@ -37,8 +37,7 @@ 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
       },
 

diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
@@ -3054,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