react-native-gifted-charts 1.4.2 → 1.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.2",
+  "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.10"
+    "gifted-charts-core": "^0.0.14"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

package/src/BarChart/Animated2DWithGradient.tsx

@@ -173,35 +173,35 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
               </View>
             ) : null}
           </View>
-          {(item.topLabelComponent || showValuesAsTopLabel) && (
-            <View
-              style={[
-                {
-                  position: 'absolute',
-                  top: (item.barWidth || barWidth || 30) * -1,
-                  height: item.barWidth || barWidth || 30,
-                  width: item.barWidth || barWidth || 30,
-                  justifyContent:
-                    (props.horizontal && !intactTopLabel) || item.value < 0
-                      ? 'center'
-                      : 'flex-end',
-                  alignItems: 'center',
-                  opacity: opacity,
-                },
-                item.value < 0 && {transform: [{rotate: '180deg'}]},
-                props.horizontal &&
-                  !intactTopLabel && {transform: [{rotate: '270deg'}]},
-                topLabelContainerStyle ?? item.topLabelContainerStyle,
-              ]}>
-              {showValuesAsTopLabel ? (
-                <Text style={topLabelTextStyle}>{item.value}</Text>
-              ) : (
-                item.topLabelComponent?.()
-              )}
-            </View>
-          )}
         </View>
       )}
+      {item.topLabelComponent || showValuesAsTopLabel ? (
+        <View
+          style={[
+            {
+              position: 'absolute',
+              top: (item.barWidth || barWidth || 30) * -1,
+              height: item.barWidth || barWidth || 30,
+              width: item.barWidth || barWidth || 30,
+              justifyContent:
+                (props.horizontal && !intactTopLabel) || item.value < 0
+                  ? 'center'
+                  : 'flex-end',
+              alignItems: 'center',
+              opacity: opacity,
+            },
+            item.value < 0 && {transform: [{rotate: '180deg'}]},
+            props.horizontal &&
+              !intactTopLabel && {transform: [{rotate: '270deg'}]},
+            topLabelContainerStyle ?? item.topLabelContainerStyle,
+          ]}>
+          {showValuesAsTopLabel ? (
+            <Text style={topLabelTextStyle}>{item.value}</Text>
+          ) : (
+            item.topLabelComponent?.()
+          )}
+        </View>
+      ) : null}
     </>
   );
 };

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',

package/src/BarChart/index.tsx

@@ -3,11 +3,7 @@ import {Animated, Easing, View} from 'react-native';
 import RenderBars from './RenderBars';
 import RenderStackBars from './RenderStackBars';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
-import {
-  BarChartPropsType,
-  useBarChart,
-  screenWidth,
-} from 'gifted-charts-core';
+import {BarChartPropsType, useBarChart, screenWidth} from 'gifted-charts-core';
 import {StripAndLabel} from '../Components/common/StripAndLabel';
 import {Pointer} from '../Components/common/Pointer';
 
@@ -338,7 +334,7 @@ export const BarChart = (props: BarChartPropsType) => {
         <RenderBars
           data={data}
           side={side}
-          minHeight={props.minHeight || 0}
+          minHeight={props.minHeight ?? (isAnimated && !isThreeD ? 0.1 : 0)}
           sideWidth={props.sideWidth}
           labelWidth={labelWidth}
           isThreeD={isThreeD}

package/src/Components/AnimatedThreeDBar/index.tsx

@@ -10,7 +10,11 @@ import {
 import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
 import {styles} from './styles';
-import { useAnimatedThreeDBar, animatedBarPropTypes, trianglePropTypes } from 'gifted-charts-core';
+import {
+  useAnimatedThreeDBar,
+  animatedBarPropTypes,
+  trianglePropTypes,
+} from 'gifted-charts-core';
 
 if (Platform.OS === 'android') {
   UIManager.setLayoutAnimationEnabledExperimental &&
@@ -154,28 +158,26 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
 
           {/*******************************************************************/}
 
-          {props.height ? (
-            <View style={{marginTop: sideWidth / -2}}>
-              <TriangleCorner
-                color={sideColor}
-                width={sideWidth}
-                style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
-              />
-              <View
-                style={{
-                  width: sideWidth / 2,
-                  height: height - sideWidth / 2, //animatedSideHeight
-                  backgroundColor: sideColor,
-                  opacity: opacity,
-                }}
-              />
-              <TriangleCorner
-                color={sideColor}
-                width={sideWidth}
-                style={{transform: [{rotate: '90deg'}], opacity: opacity}}
-              />
-            </View>
-          ) : null}
+          <View style={{marginTop: sideWidth / -2}}>
+            <TriangleCorner
+              color={height ? sideColor : 'transparent'}
+              width={sideWidth}
+              style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
+            />
+            <View
+              style={{
+                width: sideWidth / 2,
+                height: height - sideWidth / 2, //animatedSideHeight
+                backgroundColor: sideColor,
+                opacity: opacity,
+              }}
+            />
+            <TriangleCorner
+              color={height ? sideColor : 'transparent'}
+              width={sideWidth}
+              style={{transform: [{rotate: '90deg'}], opacity: opacity}}
+            />
+          </View>
 
           <View
             style={[

package/src/LineChart/index.tsx

@@ -104,7 +104,6 @@ export const LineChart = (props: LineChartPropsType) => {
     arrowPointsFromSet,
     selectedIndex,
     setSelectedIndex,
-    noOfSections,
     containerHeight,
     data,
     data2,
@@ -298,7 +297,7 @@ export const LineChart = (props: LineChartPropsType) => {
 
   if (!initialData) {
     initialData = data0 ?? [...data];
-    animations = initialData.map(item => new Animated.Value(item.value));
+    animations = initialData?.map(item => new Animated.Value(item.value));
   }
 
   const widthValuesFromSet = useMemo(