return this.options.labels || (this.isHorizontal() ? data.xLabels : data.yLabels) || data.labels || [];
}
+ /**
+ * @return {import('../types.js').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 = {};
}
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,
+ }
});
}
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) {
}
}
});
- 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];
-import { PointStyle } from '../index.js';
+import { PointStyle, Scriptable, ScriptableScaleContext } from '../index.js';
import { Color } from '../color.js';
import { ChartArea, RoundedRect } from '../geometric.js';
import { CanvasFontSpec } from '../../src/helpers/helpers.options.js';
* 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
* 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(
import Element from '../src/core/core.element.js';
import { ChartArea, Padding, Point } from './geometric.js';
import { LayoutItem, LayoutPosition } from './layout.js';
+import { RenderTextOpts } from './helpers/helpers.canvas.js';
+import { CanvasFontSpec } from '../src/helpers/helpers.options.js';
export { EasingFunction } from '../src/helpers/helpers.easing.js';
export { default as ArcElement, ArcProps } from '../src/elements/element.arc.js';
getMinMax(canStack: boolean): { min: number; max: number };
getTicks(): Tick[];
getLabels(): string[];
+ getLabelItems(chartArea?: ChartArea): LabelItem[];
beforeUpdate(): void;
configure(): void;
afterUpdate(): void;
type: string;
}
+export interface LabelItem {
+ label: string | string[];
+ font: CanvasFontSpec;
+ textOffset: number;
+ options: RenderTextOpts;
+}
export declare const Ticks: {
formatters: {