diff --git a/App.js b/App.js
index 487d4c9..4e39b13 100644
--- a/App.js
+++ b/App.js
@@ -560,35 +560,85 @@ const App = () => {
     {value: 40, label: 'Thu'},
   ];
 
+  const styleObject = {
+    marginLeft: -95,
+    paddingLeft: 120,
+    transform: [{rotate: '90deg'}],
+  };
+  const ddtt = [
+    {
+      value: 10,
+      label: 'January month',
+      labelTextStyle: styleObject,
+      labelWidth: 130,
+    },
+    {
+      value: 20,
+      label: 'February month',
+      labelTextStyle: styleObject,
+      labelWidth: 130,
+    },
+    {
+      value: 30,
+      label: 'March month',
+      labelTextStyle: styleObject,
+      labelWidth: 130,
+    },
+    {
+      value: 20,
+      label: 'April month',
+      labelTextStyle: styleObject,
+      labelWidth: 130,
+    },
+  ];
+
+  const [dtt,setDtt] = useState([
+    {value: 110},
+    {value: 130},
+    {value: 120},
+    {value: 160},
+    {value: 190},
+  ]);
+
   return (
     <View
       style={{
         marginVertical: 100,
         // marginLeft: 46,
-        marginLeft:20
+        marginLeft: 20,
       }}>
       {/* <BarChart backgroundColor={'green'} data={barData} /> */}
       <BarChart
+      // isAnimated={true}
+      isThreeD={true}
+        data={dtt}
+        labelsExtraHeight={60}
+        // maxValue={100}
+        // yAxisLabelTexts={['100','110','120','130','140','150','160','170','180','190','200']}
         // backgroundColor={'red'}
-        initialSpacing={10}
-        yAxisSide='right'
-        maxValue={40}
-        data={barData}
-        width={240}
-        radius={170}
-        donut={true}
-        showText={true}
-        showValuesAsLabels={true}
-        semiCircle={true}
-        isThreeD={true}
-        rulesType='solid'
-        // shiftInnerCenterY={100}
-        shadow={true}
-        strokeWidth={5}
-        noOfSections={4}
-        innerCircleBorderColor={'gray'}
+        // initialSpacing={10}
+        // yAxisSide='right'
+        // maxValue={40}
+        // data={barData}
+        // width={240}
+        // radius={170}
+        // donut={true}
+        // showText={true}
+        // showValuesAsLabels={true}
+        // semiCircle={true}
+        // isThreeD={true}
+        // rulesType='solid'
+        // // shiftInnerCenterY={100}
+        // shadow={true}
+        // strokeWidth={5}
+        // noOfSections={4}
+        // innerCircleBorderColor={'gray'}
         // showTextBackground={true}
       />
+      <TouchableOpacity
+      onPress={()=>{dtt[1].value+=20;setDtt([...dtt])}}>
+        <Text>Press me</Text>
+      </TouchableOpacity>
       {/* <View
         style={{
           marginVertical: 100,
diff --git a/android/gradle/wrapper/gradle-wrapper.properties b/android/gradle/wrapper/gradle-wrapper.properties
index 14e30f7..7665b0f 100644
--- a/android/gradle/wrapper/gradle-wrapper.properties
+++ b/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
diff --git a/src/BarChart/Animated2DWithGradient.tsx b/src/BarChart/Animated2DWithGradient.tsx
index 40a9cb0..5298ebc 100644
--- a/src/BarChart/Animated2DWithGradient.tsx
+++ b/src/BarChart/Animated2DWithGradient.tsx
@@ -32,6 +32,8 @@ type propTypes = {
   horizontal: Boolean;
   intactTopLabel: Boolean;
   barBorderRadius?: number;
+  containerHeight?: number;
+  maxValue?: number;
 };
 type itemType = {
   value?: number;
@@ -54,12 +56,19 @@ type itemType = {
 };
 
 const Animated2DWithGradient = (props: propTypes) => {
-  const {item, opacity, animationDuration, noGradient, noAnimation} = props;
+  const {
+    item,
+    opacity,
+    animationDuration,
+    noGradient,
+    noAnimation,
+    containerHeight,
+    maxValue,
+  } = props;
   const [height, setHeight] = useState(noAnimation ? props.height : 2);
   const [initialRender, setInitialRender] = useState(
     noAnimation ? false : true,
   );
-  // console.log('comes to animated2DWithGradient', item);
 
   useEffect(() => {
     if (!noAnimation) {
@@ -97,9 +106,19 @@ const Animated2DWithGradient = (props: propTypes) => {
             position: 'absolute',
             bottom: 0,
             width: '100%',
-            height: height,
+            height: noAnimation
+              ? (Math.abs(item.value) * (containerHeight || 200)) /
+                (maxValue || 200)
+              : height,
           }}>
-          <View style={{width: '100%', height: height}}>
+          <View
+            style={{
+              width: '100%',
+              height: noAnimation
+                ? (Math.abs(item.value) * (containerHeight || 200)) /
+                  (maxValue || 200)
+                : height,
+            }}>
             {noGradient ? (
               <View
                 style={[
@@ -223,13 +242,14 @@ const Animated2DWithGradient = (props: propTypes) => {
                   height: item.barWidth || 30,
                   width: item.barWidth || 30,
                   justifyContent:
-                    (props.horizontal && !props.intactTopLabel) || item.value < 0
+                    (props.horizontal && !props.intactTopLabel) ||
+                    item.value < 0
                       ? 'center'
                       : 'flex-end',
                   alignItems: 'center',
                   opacity: opacity,
                 },
-                item.value < 0 && {transform:[{rotate:'180deg'}]},
+                item.value < 0 && {transform: [{rotate: '180deg'}]},
                 props.horizontal &&
                   !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
                 item.topLabelContainerStyle,
@@ -243,4 +263,4 @@ const Animated2DWithGradient = (props: propTypes) => {
   );
 };
 
-export default Animated2DWithGradient;
\ No newline at end of file
+export default Animated2DWithGradient;
diff --git a/src/BarChart/RenderBars.tsx b/src/BarChart/RenderBars.tsx
index 99cfce1..7a7fac0 100644
--- a/src/BarChart/RenderBars.tsx
+++ b/src/BarChart/RenderBars.tsx
@@ -121,18 +121,29 @@ const RenderBars = (props: Props) => {
           rotateLabel
             ? props.horizontal
               ? {transform: [{rotate: '330deg'}]}
-              : {transform: [{rotate: value < 0 ? '240deg' : '60deg'}, {translateX: value < 0 ? 56 : 0}, {translateY: value < 0 ? 32 : 0}]}
+              : {
+                  transform: [
+                    {rotate: value < 0 ? '240deg' : '60deg'},
+                    {translateX: value < 0 ? 56 : 0},
+                    {translateY: value < 0 ? 32 : 0},
+                  ],
+                }
             : props.horizontal
             ? {transform: [{rotate: '-90deg'}]}
             : value < 0
-            ?{transform:[{rotate:'180deg'},{translateY:autoShiftLabels?0:32}]}
-            :{},
+            ? {
+                transform: [
+                  {rotate: '180deg'},
+                  {translateY: autoShiftLabels ? 0 : 32},
+                ],
+              }
+            : {},
         ]}>
         {item.labelComponent ? (
           item.labelComponent()
         ) : (
           <Text
-            style={[labelTextStyle, {textAlign: 'center'}]}
+            style={labelTextStyle || {textAlign: 'center'}}
             numberOfLines={1}>
             {label || ''}
           </Text>
@@ -141,7 +152,11 @@ const RenderBars = (props: Props) => {
     );
   };
 
-  const renderAnimatedLabel = (label: String, labelTextStyle: any, value: number) => {
+  const renderAnimatedLabel = (
+    label: String,
+    labelTextStyle: any,
+    value: number,
+  ) => {
     return (
       <Animated.View
         style={[
@@ -158,7 +173,7 @@ const RenderBars = (props: Props) => {
             bottom: rotateLabel ? -40 : -25,
             opacity: appearingOpacity,
           },
-          value < 0 && {transform:[{rotate:'180deg'}]},
+          value < 0 && {transform: [{rotate: '180deg'}]},
           rotateLabel
             ? props.horizontal
               ? {transform: [{rotate: '330deg'}]}
@@ -171,7 +186,7 @@ const RenderBars = (props: Props) => {
           item.labelComponent()
         ) : (
           <Text
-            style={[labelTextStyle, {textAlign: 'center'}]}
+            style={labelTextStyle || {textAlign: 'center'}}
             numberOfLines={1}>
             {label || ''}
           </Text>
@@ -255,7 +270,7 @@ const RenderBars = (props: Props) => {
                     : 'flex-end',
                 alignItems: 'center',
               },
-              item.value < 0 && {transform:[{rotate:'180deg'}]},
+              item.value < 0 && {transform: [{rotate: '180deg'}]},
               props.horizontal &&
                 !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
               item.topLabelContainerStyle,
@@ -277,13 +292,27 @@ const RenderBars = (props: Props) => {
           // overflow: 'visible',
           marginBottom: 60,
           width: item.barWidth || props.barWidth || 30,
-          height: item.value>=0 &&(!isThreeD || isAnimated) && item.topLabelComponent
-            ? (item.topLabelComponentHeight || 30) +
-              (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)
-            : (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200),
+          height:
+            item.value >= 0 &&
+            (!isThreeD || isAnimated) &&
+            item.topLabelComponent
+              ? (item.topLabelComponentHeight || 30) +
+                (Math.abs(item.value) * (containerHeight || 200)) /
+                  (maxValue || 200)
+              : (Math.abs(item.value) * (containerHeight || 200)) /
+                (maxValue || 200),
           marginRight: spacing,
         },
-        item.value < 0 && {transform:[{translateY:(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)},{rotateZ:'180deg'}]},
+        item.value < 0 && {
+          transform: [
+            {
+              translateY:
+                (Math.abs(item.value) * (containerHeight || 200)) /
+                (maxValue || 200),
+            },
+            {rotateZ: '180deg'},
+          ],
+        },
         // !isThreeD && !item.showGradient && !props.showGradient &&
         // { backgroundColor: item.frontColor || props.frontColor || 'black' },
         side !== 'right' && {zIndex: data.length - index},
@@ -333,7 +362,10 @@ const RenderBars = (props: Props) => {
             topLabelComponent={item.topLabelComponent}
             opacity={opacity || 1}
             animationDuration={animationDuration || 800}
-            height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
+            height={
+              (Math.abs(item.value) * (containerHeight || 200)) /
+              (maxValue || 200)
+            }
             intactTopLabel={props.intactTopLabel}
             horizontal={props.horizontal}
           />
@@ -358,7 +390,10 @@ const RenderBars = (props: Props) => {
             opacity={opacity || 1}
             horizontal={props.horizontal}
             intactTopLabel={props.intactTopLabel}
-            height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
+            height={
+              (Math.abs(item.value) * (containerHeight || 200)) /
+              (maxValue || 200)
+            }
             value={item.value}
           />
         )
@@ -373,7 +408,12 @@ const RenderBars = (props: Props) => {
             roundedTop={props.roundedTop || false}
             gradientColor={props.gradientColor}
             frontColor={props.frontColor || 'black'}
-            height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
+            containerHeight={containerHeight}
+            maxValue={maxValue}
+            height={
+              (Math.abs(item.value) * (containerHeight || 200)) /
+              (maxValue || 200)
+            }
             cappedBars={props.cappedBars}
             capThickness={props.capThickness}
             capColor={props.capColor}
@@ -396,7 +436,12 @@ const RenderBars = (props: Props) => {
           gradientColor={props.gradientColor}
           noGradient
           frontColor={props.frontColor || 'black'}
-          height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
+          containerHeight={containerHeight}
+          maxValue={maxValue}
+          height={
+            (Math.abs(item.value) * (containerHeight || 200)) /
+            (maxValue || 200)
+          }
           cappedBars={props.cappedBars}
           capThickness={props.capThickness}
           capColor={props.capColor}
@@ -417,7 +462,12 @@ const RenderBars = (props: Props) => {
           noGradient
           noAnimation
           frontColor={props.frontColor || 'black'}
-          height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
+          containerHeight={containerHeight}
+          maxValue={maxValue}
+          height={
+            (Math.abs(item.value) * (containerHeight || 200)) /
+            (maxValue || 200)
+          }
           cappedBars={props.cappedBars}
           capThickness={props.capThickness}
           capColor={props.capColor}
@@ -428,10 +478,10 @@ const RenderBars = (props: Props) => {
         />
       )}
       {isAnimated
-        ? renderAnimatedLabel(item.label || '', item.labelTextStyle,item.value)
-        : renderLabel(item.label || '', item.labelTextStyle,item.value)}
+        ? renderAnimatedLabel(item.label || '', item.labelTextStyle, item.value)
+        : renderLabel(item.label || '', item.labelTextStyle, item.value)}
     </TouchableOpacity>
   );
 };
 
-export default RenderBars;
\ No newline at end of file
+export default RenderBars;
diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx
index 2140515..e770310 100644
--- a/src/BarChart/index.tsx
+++ b/src/BarChart/index.tsx
@@ -121,6 +121,7 @@ type PropTypes = {
   autoShiftLabels?: Boolean;
   scrollToEnd?: Boolean;
   scrollAnimation?: Boolean;
+  labelsExtraHeight?: number;
 };
 type lineConfigType = {
   curved?: Boolean;
@@ -231,6 +232,7 @@ export const BarChart = (props: PropTypes) => {
   const labelWidth = props.labelWidth || 0;
   const scrollToEnd = props.scrollToEnd || false;
   const scrollAnimation = props.scrollAnimation === false ? false : true;
+  const labelsExtraHeight = props.labelsExtraHeight || 0;
 
   let totalWidth = spacing;
   let maxItem = 0, minItem = 0;
@@ -1095,9 +1097,12 @@ export const BarChart = (props: PropTypes) => {
       style={[
         styles.container,
         {
-          height: containerHeight + horizSectionsBelow.length * stepHeight,
+          height:
+            containerHeight +
+            horizSectionsBelow.length * stepHeight +
+            labelsExtraHeight,
         },
-        yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness },
+        yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness},
         props.width && {width: props.width},
         horizontal && {transform: [{rotate: '90deg'}, {translateY: -15}]},
       ]}>
@@ -1124,7 +1129,7 @@ export const BarChart = (props: PropTypes) => {
             // backgroundColor: 'yellow',
             height: containerHeight + 130 + horizSectionsBelow.length * stepHeight,
             paddingLeft: initialSpacing,
-            paddingBottom:horizSectionsBelow.length * stepHeight,
+            paddingBottom:horizSectionsBelow.length * stepHeight + labelsExtraHeight,
             alignItems: 'flex-end',
           },
           !props.width && {width: totalWidth},
diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx
index a5ca2e7..97e020b 100644
--- a/src/LineChart/index.tsx
+++ b/src/LineChart/index.tsx
@@ -966,7 +966,7 @@ export const LineChart = (props: propTypes) => {
           labelComponent()
         ) : (
           <Text
-            style={[labelTextStyle, {textAlign: 'center'}]}
+            style={labelTextStyle || {textAlign: 'center'}}
             numberOfLines={1}>
             {label || ''}
           </Text>
@@ -1004,7 +1004,7 @@ export const LineChart = (props: propTypes) => {
           labelComponent()
         ) : (
           <Text
-            style={[labelTextStyle, {textAlign: 'center'}]}
+            style={labelTextStyle || {textAlign: 'center'}}
             numberOfLines={1}>
             {label || ''}
           </Text>