fix(axis): fix horizontal title positioning to account for title padding

12
elastic · Jan 31, 2019 · 08d1f83 · 08d1f83
1 parent ab7e974
commit 08d1f83
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/src/components/react_canvas/axis.tsx b/src/components/react_canvas/axis.tsx
@@ -177,7 +177,7 @@ export class Axis extends React.PureComponent<AxisProps> {
       return null;
     }
     if (isHorizontal(position)) {
-      return this.renderOriziontalAxisTitle();
+      return this.renderHorizontalAxisTitle();
     }
     return this.renderVerticalAxisTitle();
   }
@@ -229,13 +229,13 @@ export class Axis extends React.PureComponent<AxisProps> {
       </Group>
     );
   }
-  private renderOriziontalAxisTitle() {
+  private renderHorizontalAxisTitle() {
     const {
       axisPosition: { width, height },
       axisSpec: { title, position, tickSize, tickPadding },
       axisTicksDimensions: { maxLabelBboxHeight },
       chartTheme: {
-        axes: { titleFontSize },
+        axes: { titleFontSize, titlePadding },
       },
       debug,
     } = this.props;
@@ -244,7 +244,10 @@ export class Axis extends React.PureComponent<AxisProps> {
       return;
     }
 
-    const top = position === Position.Top ? -maxLabelBboxHeight : maxLabelBboxHeight + tickPadding + tickSize;
+    const top = position === Position.Top ?
+      -maxLabelBboxHeight - titlePadding :
+      maxLabelBboxHeight + tickPadding + tickSize + titlePadding;
+
     const left = 0;
     return (
       <Group>