react-native-gifted-charts 1.4.2 → 1.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "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.13"
   },
   "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/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(