#10836 add getLabelItems public method

src/core/core.scale.js

@@ -359,6 +359,14 @@ export default class Scale extends Element {
     return this.options.labels || (this.isHorizontal() ? data.xLabels : data.yLabels) || data.labels || [];
   }
 
+  /**
+   * @return {import('../types').LabelItem[]}
+   */
+  getLabelItems(chartArea = this.chart.chartArea) {
+    const items = this._labelItems || (this._labelItems = this._computeLabelItems(chartArea));
+    return items;
+  }
+
   // When a new layout is created, reset the data limits cache
   beforeLayout() {
     this._cache = {};
@@ -1292,17 +1300,19 @@ export default class Scale extends Element {
       }
 
       items.push({
-        rotation,
         label,
         font,
-        color,
-        strokeColor,
-        strokeWidth,
         textOffset,
-        textAlign: tickTextAlign,
-        textBaseline,
-        translation: [x, y],
-        backdrop,
+        options: {
+          rotation,
+          color,
+          strokeColor,
+          strokeWidth,
+          textAlign: tickTextAlign,
+          textBaseline,
+          translation: [x, y],
+          backdrop,
+        }
       });
     }
 
@@ -1549,16 +1559,13 @@ export default class Scale extends Element {
       clipArea(ctx, area);
     }
 
-    const items = this._labelItems || (this._labelItems = this._computeLabelItems(chartArea));
-    let i, ilen;
-
-    for (i = 0, ilen = items.length; i < ilen; ++i) {
-      const item = items[i];
+    const items = this.getLabelItems(chartArea);
+    for (const item of items) {
+      const renderTextOptions = item.options;
       const tickFont = item.font;
       const label = item.label;
-
-      let y = item.textOffset;
-      renderText(ctx, label, 0, y, tickFont, item);
+      const y = item.textOffset;
+      renderText(ctx, label, 0, y, tickFont, renderTextOptions);
     }
 
     if (area) {

test/specs/core.scale.tests.js

@@ -720,9 +720,9 @@ describe('Core.scale', function() {
           }
         }
       });
-      const mapper = item => parseFloat(item.translation[0].toFixed(2));
+      const mapper = item => parseFloat(item.options.translation[0].toFixed(2));
       const expected = [20.15, 113.6, 207.05, 300.5, 393.95, 487.4];
-      const actual = chart.scales.x._labelItems.map(mapper);
+      const actual = chart.scales.x.getLabelItems().map(mapper);
       const len = expected.length;
       for (let i = 0; i < len; ++i) {
         const actualValue = actual[i];

types/helpers/helpers.canvas.d.ts

@@ -1,7 +1,7 @@
-import { PointStyle } from '../index.js';
-import { Color } from '../color.js';
-import { ChartArea, RoundedRect } from '../geometric.js';
-import { CanvasFontSpec } from '../../src/helpers/helpers.options.js';
+import { PointStyle, Scriptable, ScriptableScaleContext } from '../index.js';
+import { Color } from '../color';
+import { ChartArea, RoundedRect } from '../geometric';
+import { CanvasFontSpec } from '../../src/helpers/helpers.options';
 
 export function clearCanvas(canvas: HTMLCanvasElement, ctx?: CanvasRenderingContext2D): void;
 
@@ -72,13 +72,13 @@ export interface RenderTextOpts {
    * The text alignment to use. If unset, the existing
    * textAlign property of the context is unchanged
    */
-  textAlign: CanvasTextAlign;
+  textAlign?: CanvasTextAlign;
 
   /**
    * The text baseline to use. If unset, the existing
    * textBaseline property of the context is unchanged
    */
-  textBaseline: CanvasTextBaseline;
+  textBaseline?: CanvasTextBaseline;
 
   /**
    * If specified, a translation to apply to the context
@@ -89,6 +89,38 @@ export interface RenderTextOpts {
    * Underline the text
    */
   underline?: boolean;
+
+  /**
+   * Dimensions for drawing the label backdrop
+   */
+  backdrop?: BackdropOptions;
+}
+
+export interface BackdropOptions {
+  /**
+   * Left position of backdrop as pixel
+   */
+  left: number;
+
+  /**
+   * Top position of backdrop as pixel
+   */
+  top: number;
+
+  /**
+   * Width of backdrop in pixels
+   */
+  width: number;
+
+  /**
+   * Height of backdrop in pixels
+   */
+  height: number;
+
+  /**
+   * Color of label backdrops.
+   */
+  color: Scriptable<Color, ScriptableScaleContext>;
 }
 
 export function renderText(

types/index.d.ts

@@ -1,22 +1,24 @@
-import { DeepPartial, DistributiveArray, UnionToIntersection } from './utils.js';
-
-import { TimeUnit } from '../src/core/core.adapters.js';
-import PointElement from '../src/elements/element.point.js';
-import { EasingFunction } from '../src/helpers/helpers.easing.js';
-import { AnimationEvent } from './animation.js';
-import { AnyObject, EmptyObject } from './basic.js';
-import { Color } from './color.js';
-import Element from '../src/core/core.element.js';
-import { ChartArea, Padding, Point } from './geometric.js';
-import { LayoutItem, LayoutPosition } from './layout.js';
-
-export { EasingFunction } from '../src/helpers/helpers.easing.js';
-export { default as ArcElement, ArcProps } from '../src/elements/element.arc.js';
-export { default as PointElement, PointProps } from '../src/elements/element.point.js';
-export { Animation, Animations, Animator, AnimationEvent } from './animation.js';
-export { Color } from './color.js';
-export { ChartArea, Point } from './geometric.js';
-export { LayoutItem, LayoutPosition } from './layout.js';
+import { DeepPartial, DistributiveArray, UnionToIntersection } from './utils';
+
+import { TimeUnit } from '../src/core/core.adapters';
+import PointElement from '../src/elements/element.point';
+import { EasingFunction } from '../src/helpers/helpers.easing';
+import { AnimationEvent } from './animation';
+import { AnyObject, EmptyObject } from './basic';
+import { Color } from './color';
+import Element from '../src/core/core.element';
+import { ChartArea, Padding, Point } from './geometric';
+import { LayoutItem, LayoutPosition } from './layout';
+import { RenderTextOpts } from './helpers/helpers.canvas';
+import { CanvasFontSpec } from '../src/helpers/helpers.options';
+
+export { EasingFunction } from '../src/helpers/helpers.easing';
+export { default as ArcElement, ArcProps } from '../src/elements/element.arc';
+export { default as PointElement, PointProps } from '../src/elements/element.point';
+export { Animation, Animations, Animator, AnimationEvent } from './animation';
+export { Color } from './color';
+export { ChartArea, Point } from './geometric';
+export { LayoutItem, LayoutPosition } from './layout';
 
 export interface ScriptableContext<TType extends ChartType> {
   active: boolean;
@@ -1311,6 +1313,7 @@ export interface Scale<O extends CoreScaleOptions = CoreScaleOptions> extends El
   getMinMax(canStack: boolean): { min: number; max: number };
   getTicks(): Tick[];
   getLabels(): string[];
+  getLabelItems(chartArea?: ChartArea): LabelItem[];
   beforeUpdate(): void;
   configure(): void;
   afterUpdate(): void;
@@ -1354,6 +1357,12 @@ export interface ScriptableScalePointLabelContext {
   type: string;
 }
 
+export interface LabelItem {
+  label: string | string[];
+  font: CanvasFontSpec;
+  textOffset: number;
+  options: RenderTextOpts;
+}
 
 export declare const Ticks: {
   formatters: {