diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-tick-label-rotation-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-tick-label-rotation-visually-looks-correct-1-snap.png index 9c1b2d4cfd..88318c25d4 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-tick-label-rotation-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-axes-tick-label-rotation-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-bottom-axis-1-snap.png b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-bottom-axis-1-snap.png index e2baa23bf2..3710203c65 100644 Binary files a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-bottom-axis-1-snap.png and b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-bottom-axis-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-left-axis-1-snap.png b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-left-axis-1-snap.png index 554da97c73..621a63ad67 100644 Binary files a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-left-axis-1-snap.png and b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-left-axis-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-top-axis-1-snap.png b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-top-axis-1-snap.png index d09ab503f7..c07a2b65b0 100644 Binary files a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-top-axis-1-snap.png and b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-hide-top-axis-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-ticks-with-varied-rotations-1-snap.png b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-ticks-with-varied-rotations-1-snap.png index 008a5350c2..66152ff2de 100644 Binary files a/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-ticks-with-varied-rotations-1-snap.png and b/integration/tests/__image_snapshots__/axis-stories-test-ts-axis-stories-should-render-ticks-with-varied-rotations-1-snap.png differ diff --git a/src/chart_types/xy_chart/renderer/canvas/axes/title.ts b/src/chart_types/xy_chart/renderer/canvas/axes/title.ts index 488762bbdf..52b797388e 100644 --- a/src/chart_types/xy_chart/renderer/canvas/axes/title.ts +++ b/src/chart_types/xy_chart/renderer/canvas/axes/title.ts @@ -42,7 +42,7 @@ function renderVerticalTitle(ctx: CanvasRenderingContext2D, props: AxisProps) { const { axisPosition: { height }, axisSpec: { title, position, tickSize, tickPadding }, - axisTicksDimensions: { maxLabelTextWidth }, + axisTicksDimensions: { maxLabelBboxWidth }, axisConfig: { axisTitleStyle }, debug, } = props; @@ -51,7 +51,7 @@ function renderVerticalTitle(ctx: CanvasRenderingContext2D, props: AxisProps) { } const { padding, ...titleStyle } = axisTitleStyle; const top = height; - const left = position === Position.Left ? 0 : tickSize + tickPadding + maxLabelTextWidth + padding; + const left = position === Position.Left ? 0 : tickSize + tickPadding + maxLabelBboxWidth + padding; if (debug) { renderDebugRect(ctx, { x: left, y: top, width: height, height: titleStyle.fontSize }, undefined, undefined, -90); diff --git a/stories/axes/2_tick_label_rotation.tsx b/stories/axes/2_tick_label_rotation.tsx index 642f866e60..3067454f15 100644 --- a/stories/axes/2_tick_label_rotation.tsx +++ b/stories/axes/2_tick_label_rotation.tsx @@ -75,7 +75,7 @@ export const Example = () => { id="right" title="Bar axis" position={Position.Right} - tickLabelRotation={number('right axis tick label rotation', 0, { + tickLabelRotation={number('right axis tick label rotation', -90, { range: true, min: -90, max: 90,