diff --git a/src/lib/axes/axis_utils.test.ts b/src/lib/axes/axis_utils.test.ts index a8959bc928..9adc7bad6f 100644 --- a/src/lib/axes/axis_utils.test.ts +++ b/src/lib/axes/axis_utils.test.ts @@ -1,6 +1,6 @@ import { XDomain } from '../series/domains/x_domain'; import { YDomain } from '../series/domains/y_domain'; -import { AxisSpec, DomainRange, Position } from '../series/specs'; +import { AxisSpec, DomainRange, Position, AxisStyle } from '../series/specs'; import { LIGHT_THEME } from '../themes/light_theme'; import { AxisId, getAxisId, getGroupId, GroupId } from '../utils/ids'; import { ScaleType } from '../utils/scales/scales'; @@ -28,6 +28,7 @@ import { isVertical, isYDomain, mergeDomainsByGroupId, + getAxisTickLabelPadding, } from './axis_utils'; import { CanvasTextBBoxCalculator } from './canvas_text_bbox_calculator'; import { SvgTextBBoxCalculator } from './svg_text_bbox_calculator'; @@ -1283,4 +1284,13 @@ describe('Axis computational utils', () => { expect(JSON.stringify(negativeReducer)).toEqual(JSON.stringify(positiveReducer)); }); + test('should expect axisSpec.style.tickLabelPadding if specified', () => { + const axisSpecStyle: AxisStyle = { + tickLabelPadding: 2, + }; + + const axisConfigTickLabelPadding = 1; + + expect(getAxisTickLabelPadding(axisConfigTickLabelPadding, axisSpecStyle)).toEqual(2); + }); }); diff --git a/src/lib/axes/axis_utils.ts b/src/lib/axes/axis_utils.ts index e6a4bd5ab1..687729503a 100644 --- a/src/lib/axes/axis_utils.ts +++ b/src/lib/axes/axis_utils.ts @@ -10,6 +10,7 @@ import { Rotation, TickFormatter, UpperBoundedDomain, + AxisStyle, } from '../series/specs'; import { AxisConfig, Theme } from '../themes/theme'; import { Dimensions, Margins } from '../utils/dimensions'; @@ -70,10 +71,7 @@ export function computeAxisTicksDimensions( throw new Error(`Cannot compute scale for axis spec ${axisSpec.id}`); } - const tickLabelPadding = - axisSpec.style && axisSpec.style.tickLabelPadding - ? axisSpec.style.tickLabelPadding - : axisConfig.tickLabelStyle.padding; + const tickLabelPadding = getAxisTickLabelPadding(axisConfig.tickLabelStyle.padding, axisSpec.style); const dimensions = computeTickDimensions( scale, @@ -89,6 +87,13 @@ export function computeAxisTicksDimensions( }; } +export function getAxisTickLabelPadding(axisConfigTickLabelPadding: number, axisSpecStyle?: AxisStyle): number { + if (axisSpecStyle && axisSpecStyle.tickLabelPadding) { + return axisSpecStyle.tickLabelPadding; + } + return axisConfigTickLabelPadding; +} + export function isYDomain(position: Position, chartRotation: Rotation): boolean { const isStraightRotation = chartRotation === 0 || chartRotation === 180; if (isVertical(position)) { diff --git a/src/lib/axes/canvas_text_bbox_calculator.ts b/src/lib/axes/canvas_text_bbox_calculator.ts index 4f6b51306c..82308cd654 100644 --- a/src/lib/axes/canvas_text_bbox_calculator.ts +++ b/src/lib/axes/canvas_text_bbox_calculator.ts @@ -22,7 +22,7 @@ export class CanvasTextBBoxCalculator implements BBoxCalculator { return none; } - // Avoid having negative padding that can obscure text + // Padding should be at least one to avoid browser measureText inconsistencies if (padding < 1) { padding = 1; } diff --git a/src/lib/series/specs.ts b/src/lib/series/specs.ts index 8d157159db..ab8599f20e 100644 --- a/src/lib/series/specs.ts +++ b/src/lib/series/specs.ts @@ -219,12 +219,12 @@ export interface AxisSpec { /** If specified, it constrains the domain for these values */ domain?: DomainRange; /** Object to hold custom styling */ - style?: CustomStyle; + style?: AxisStyle; } export type TickFormatter = (value: any) => string; -interface CustomStyle { +export interface AxisStyle { /** Specifies the amount of padding on the tick label bounding box */ tickLabelPadding?: number; }