react-native-gifted-charts 1.4.3 → 1.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [
@@ -24,7 +24,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "^0.0.13"
+    "gifted-charts-core": "^0.0.14"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

package/src/BarChart/RenderBars.tsx

@@ -48,6 +48,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
     topLabelContainerStyle,
     topLabelTextStyle,
     pointerConfig,
+    noOfSectionsBelowXAxis,
   } = props;
 
   const barHeight = Math.max(
@@ -112,7 +113,11 @@ const RenderBars = (props: RenderBarsPropsType) => {
                 ? {
                     transform: [
                       {rotate: '180deg'},
-                      {translateY: autoShiftLabels ? 0 : 32},
+                      {
+                        translateY: autoShiftLabels
+                          ? 0
+                          : 16.5 * xAxisTextNumberOfLines + 14,
+                      },
                     ],
                   }
                 : {},
@@ -166,7 +171,18 @@ const RenderBars = (props: RenderBarsPropsType) => {
               : {transform: [{rotate: '60deg'}]}
             : horizontal
               ? {transform: [{rotate: '-90deg'}]}
-              : {},
+              : value < 0
+                ? {
+                    transform: [
+                      {rotate: '180deg'},
+                      {
+                        translateY: autoShiftLabels
+                          ? 0
+                          : 16.5 * xAxisTextNumberOfLines + 14,
+                      },
+                    ],
+                  }
+                : {},
         ]}>
         {item.labelComponent ? (
           item.labelComponent()
@@ -300,6 +316,8 @@ const RenderBars = (props: RenderBarsPropsType) => {
     (pointerConfig && pointerConfig.barTouchable !== true);
 
   const barContent = () => {
+    const isBarBelowXaxisAndInvisible =
+      item.value < 0 && !noOfSectionsBelowXAxis;
     const animated2DWithGradient = (noGradient, noAnimation) => (
       <Animated2DWithGradient
         {...commonPropsFor2Dand3Dbars}
@@ -341,7 +359,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
             }}
           />
         )}
-        {isThreeD ? (
+        {isBarBelowXaxisAndInvisible ? null : isThreeD ? (
           <AnimatedThreeDBar
             {...commonPropsFor2Dand3Dbars}
             sideWidth={
@@ -401,6 +419,13 @@ const RenderBars = (props: RenderBarsPropsType) => {
                 ? props.onLongPress(item, index)
                 : null;
           }}
+          onPressOut={() => {
+            item.onPressOut
+              ? item.onPressOut()
+              : props.onPressOut
+                ? props.onPressOut(item, index)
+                : null;
+          }}
           style={barWrapperStyle}>
           {barContent()}
         </TouchableOpacity>

package/src/BarChart/RenderStackBars.tsx

@@ -9,7 +9,11 @@ import {
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
-import { useRenderStackBars, BarDefaults, StackedBarChartPropsType } from 'gifted-charts-core';
+import {
+  useRenderStackBars,
+  BarDefaults,
+  StackedBarChartPropsType,
+} from 'gifted-charts-core';
 
 if (Platform.OS === 'android') {
   UIManager.setLayoutAnimationEnabledExperimental &&
@@ -121,7 +125,6 @@ const RenderStackBars = (props: StackedBarChartPropsType) => {
   };
 
   const static2DSimple = () => {
-
     return (
       <>
         <TouchableOpacity
@@ -135,13 +138,20 @@ const RenderStackBars = (props: StackedBarChartPropsType) => {
               props.onPress(item, index);
             }
           }}
-          onLongPress={()=>{
+          onLongPress={() => {
             if (item.onLongPress) {
               item.onLongPress();
             } else if (props.onLongPress) {
               props.onLongPress(item, index);
             }
           }}
+          onPressOut={() => {
+            if (item.onPressOut) {
+              item.onPressOut();
+            } else if (props.onPressOut) {
+              props.onPressOut(item, index);
+            }
+          }}
           style={[
             {
               position: 'absolute',