patternfly
diff --git a/packages/patternfly-4/react-charts/src/components/Chart/Chart.tsx b/packages/patternfly-4/react-charts/src/components/Chart/Chart.tsx
@@ -23,7 +23,7 @@ import {
   ChartLegendWrapper
 } from "../ChartLegend";
 import { ChartCommonStyles, ChartThemeDefinition } from '../ChartTheme';
-import { getPaddingForSide, getTheme } from '../ChartUtils';
+import { getLabelTextSize, getPaddingForSide, getTheme } from '../ChartUtils';
 
 /**
  * See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/victory/index.d.ts
@@ -363,7 +363,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
   ariaTitle,
   children,
   containerComponent = allowZoom ? <VictoryZoomContainer /> : <ChartContainer />,
-  legendComponent = <ChartLegend />,
+  legendComponent = <ChartLegend/>,
   legendData,
   legendPosition = ChartCommonStyles.legend.position as ChartLegendPosition,
   padding,
@@ -411,10 +411,21 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     }
     let dx = 0;
     let dy = defaultPadding.top;
+    let xAxisLabelHeight = 0;
+    let legendTitleHeight = legend.props.title ? 10 : 0;
+
+    // Adjust for axis label
+    React.Children.toArray(children).map((child: any) => {
+      if (child.type.role === 'axis' && child.props.label && !child.props.dependentAxis) {
+        xAxisLabelHeight = getLabelTextSize({text: child.props.label, theme}).height + 10;
+        legendTitleHeight = 0;
+      }
+    });
+
     if (legendPosition === ChartLegendPosition.bottom) {
-      dy += ChartCommonStyles.legend.margin;
+      dy += ChartCommonStyles.legend.margin + xAxisLabelHeight + legendTitleHeight;
     } else if (legendPosition === ChartLegendPosition.bottomLeft) {
-      dy += ChartCommonStyles.legend.margin;
+      dy += ChartCommonStyles.legend.margin + xAxisLabelHeight + legendTitleHeight;
       dx += defaultPadding.left - 10;
     } else if (legendPosition === ChartLegendPosition.right) {
       dx += defaultPadding.left;

diff --git a/packages/patternfly-4/react-charts/src/components/ChartArea/examples/ChartArea.md b/packages/patternfly-4/react-charts/src/components/ChartArea/examples/ChartArea.md
@@ -33,7 +33,7 @@ import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '
       width={800}
     >
       <ChartAxis />
-      <ChartAxis dependentAxis showGrid />
+      <ChartAxis dependentAxis showGrid/>
       <ChartGroup>
         <ChartArea
           data={[
@@ -83,9 +83,9 @@ import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor } from '@patte
       containerComponent={<ChartVoronoiContainer labels={datum => `${datum.name}: ${datum.y}`} />}
       legendData={[{ name: 'Cats' }, { name: 'Birds' }, { name: 'Dogs' }]}
       legendPosition="bottom"
-      height={225}
+      height={250}
       padding={{
-        bottom: 75, // Adjusted to accomodate legend
+        bottom: 100, // Adjusted to accomodate legend
         left: 50,
         right: 50,
         top: 50,
@@ -94,8 +94,8 @@ import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor } from '@patte
       themeColor={ChartThemeColor.cyan}
       width={650}
     >
-      <ChartAxis />
-      <ChartAxis dependentAxis showGrid />
+      <ChartAxis label="Animals"/>
+      <ChartAxis dependentAxis showGrid/>
       <ChartGroup>
         <ChartArea
           data={[

diff --git a/packages/patternfly-4/react-charts/src/components/ChartArea/examples/chart-area.scss b/packages/patternfly-4/react-charts/src/components/ChartArea/examples/chart-area.scss
@@ -1,7 +1,7 @@
 .ws-preview {
   & > * {
     .area-chart-legend-bottom {
-      height: 225px;
+      height: 250px;
       width: 650px;
     }
 

diff --git a/packages/patternfly-4/react-charts/src/components/ChartLegend/ChartLegendWrapper.tsx b/packages/patternfly-4/react-charts/src/components/ChartLegend/ChartLegendWrapper.tsx
@@ -151,31 +151,33 @@ export const ChartLegendWrapper: React.FunctionComponent<ChartLegendWrapperProps
   const renderChildren = () =>
     React.Children.toArray(children).map((child: any) => {
       const childProps = child.props ? child.props : {};
+      const legendX = getLegendX({
+        chartWidth,
+        dx,
+        legendData: childProps.data,
+        legendOrientation: childProps.legendOrientation ? childProps.legendOrientation : orientation,
+        legendPosition: position,
+        legendProps: childProps,
+        theme,
+        svgWidth
+      });
+      const legendY = getLegendY({
+        chartHeight,
+        chartType,
+        dy,
+        legendData: childProps.data,
+        legendOrientation: childProps.legendOrientation ? childProps.legendOrientation : orientation,
+        legendProps: childProps,
+        legendPosition: position,
+        theme
+      });
       if (childProps.data) {
         return React.cloneElement(child as React.ReactElement<any>, {
           orientation,
           standalone: false,
           theme,
-          x: getLegendX({
-            chartWidth,
-            dx,
-            legendData: childProps.data,
-            legendOrientation: childProps.legendOrientation ? childProps.legendOrientation : orientation,
-            legendPosition: position,
-            legendProps: childProps,
-            theme,
-            svgWidth
-          }),
-          y: getLegendY({
-            chartHeight,
-            chartType,
-            dy,
-            legendData: childProps.data,
-            legendOrientation: childProps.legendOrientation ? childProps.legendOrientation : orientation,
-            legendProps: childProps,
-            legendPosition: position,
-            theme
-          }),
+          x: legendX > 0 ? legendX : 0,
+          y: legendY > 0 ? legendY : 0,
           ...childProps,
         });
       }