fix(axis): rotated label positioning (#709)

Fix title positioning when using rotated tick labels fixes #673
elastic · Jun 15, 2020 · 2e26430 · 2e26430
1 parent ed49bbb
commit 2e26430
Show file tree

Hide file tree

Showing 7 changed files with 3 additions and 3 deletions.
diff --git a/...ests-for-all-stories-axes-tick-label-rotation-visually-looks-correct-1-snap.png b/...ests-for-all-stories-axes-tick-label-rotation-visually-looks-correct-1-snap.png
diff --git a/...napshots__/axis-stories-test-ts-axis-stories-should-hide-bottom-axis-1-snap.png b/...napshots__/axis-stories-test-ts-axis-stories-should-hide-bottom-axis-1-snap.png
diff --git a/..._snapshots__/axis-stories-test-ts-axis-stories-should-hide-left-axis-1-snap.png b/..._snapshots__/axis-stories-test-ts-axis-stories-should-hide-left-axis-1-snap.png
diff --git a/...e_snapshots__/axis-stories-test-ts-axis-stories-should-hide-top-axis-1-snap.png b/...e_snapshots__/axis-stories-test-ts-axis-stories-should-hide-top-axis-1-snap.png
diff --git a/...ories-test-ts-axis-stories-should-render-ticks-with-varied-rotations-1-snap.png b/...ories-test-ts-axis-stories-should-render-ticks-with-varied-rotations-1-snap.png
diff --git 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
@@ -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,