react-native-gifted-charts 1.3.22 → 1.3.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.3.22",
+  "version": "1.3.24",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [

package/src/BarChart/Animated2DWithGradient.tsx

@@ -39,6 +39,8 @@ type propTypes = {
   showValuesAsTopLabel: boolean;
   topLabelContainerStyle?: any;
   topLabelTextStyle?: any;
+  barBorderWidth?: number;
+  barBorderColor: ColorValue;
   barBorderRadius?: number;
   barBorderTopLeftRadius?: number;
   barBorderTopRightRadius?: number;
@@ -66,6 +68,8 @@ const Animated2DWithGradient = (props: propTypes) => {
     containerHeight,
     maxValue,
     barMarginBottom,
+    barBorderWidth,
+    barBorderColor,
     barBorderRadius,
     barBorderTopLeftRadius,
     barBorderTopRightRadius,
@@ -150,6 +154,8 @@ const Animated2DWithGradient = (props: propTypes) => {
                     height: '100%',
                     backgroundColor:
                       item.frontColor || props.frontColor || 'black',
+                    borderWidth: barBorderWidth ?? 0,
+                    borderColor: barBorderColor,
                     borderRadius: item.barBorderRadius ?? barBorderRadius ?? 0,
                     borderTopLeftRadius:
                       item.barBorderTopLeftRadius ??
@@ -211,6 +217,8 @@ const Animated2DWithGradient = (props: propTypes) => {
                     position: 'absolute',
                     width: '100%',
                     height: '100%',
+                    borderWidth: barBorderWidth ?? 0,
+                    borderColor: barBorderColor,
                     borderRadius: item.barBorderRadius ?? barBorderRadius ?? 0,
                     borderTopLeftRadius:
                       item.barBorderTopLeftRadius ??

package/src/BarChart/RenderBars.tsx

@@ -1,7 +1,6 @@
 import React, {Component} from 'react';
 import {View, TouchableOpacity, Animated, Text, ColorValue} from 'react-native';
-import ThreeDBar from '../Components/ThreeDBar';
-import AnimatedBar from '../Components/AnimatedBar';
+import AnimatedThreeDBar from '../Components/AnimatedThreeDBar';
 import LinearGradient from 'react-native-linear-gradient';
 import Animated2DWithGradient from './Animated2DWithGradient';
 import Cap from '../Components/BarSpecificComponents/cap';
@@ -61,6 +60,8 @@ type Props = {
   rtl: boolean;
   intactTopLabel: boolean;
   showValuesAsTopLabel?: boolean;
+  barBorderWidth?: number;
+  barBorderColor: ColorValue;
   barBorderRadius?: number;
   barBorderTopLeftRadius?: number;
   barBorderTopRightRadius?: number;
@@ -96,6 +97,8 @@ const RenderBars = (props: Props) => {
     side,
     data,
     barStyle,
+    barBorderWidth,
+    barBorderColor,
     barBorderRadius,
     barBorderTopLeftRadius,
     barBorderTopRightRadius,
@@ -253,6 +256,8 @@ const RenderBars = (props: Props) => {
               position: 'absolute',
               width: '100%',
               height: '100%',
+              borderWidth: barBorderWidth ?? 0,
+              borderColor: barBorderColor,
               borderRadius: item.barBorderRadius ?? barBorderRadius ?? 0,
               borderTopLeftRadius:
                 item.barBorderTopLeftRadius ??
@@ -405,7 +410,7 @@ const RenderBars = (props: Props) => {
     (pointerConfig && pointerConfig.barTouchable !== true);
 
   const barContent = () => {
-    const animated2DWithGradient = noGradient => (
+    const animated2DWithGradient = (noGradient, noAnimation) => (
       <Animated2DWithGradient
         barBackgroundPattern={props.barBackgroundPattern}
         patternId={props.patternId}
@@ -417,6 +422,7 @@ const RenderBars = (props: Props) => {
         roundedBottom={props.roundedBottom || false}
         roundedTop={props.roundedTop || false}
         noGradient={noGradient}
+        noAnimation={noAnimation}
         gradientColor={noGradient ? undefined : props.gradientColor}
         frontColor={props.frontColor || 'black'}
         containerHeight={containerHeight}
@@ -433,6 +439,8 @@ const RenderBars = (props: Props) => {
         showValuesAsTopLabel={!!showValuesAsTopLabel}
         topLabelContainerStyle={topLabelContainerStyle}
         topLabelTextStyle={topLabelTextStyle}
+        barBorderWidth={barBorderWidth}
+        barBorderColor={barBorderColor}
         barBorderRadius={props.barBorderRadius || 0}
         barBorderTopLeftRadius={barBorderTopLeftRadius}
         barBorderTopRightRadius={barBorderTopRightRadius}
@@ -459,77 +467,45 @@ const RenderBars = (props: Props) => {
           />
         )}
         {isThreeD ? (
-          isAnimated ? (
-            <AnimatedBar
-              barBackgroundPattern={
-                item.barBackgroundPattern || props.barBackgroundPattern
-              }
-              patternId={item.patternId || props.patternId}
-              width={item.barWidth || props.barWidth || 30}
-              barStyle={barStyle}
-              item={item}
-              sideWidth={
-                item.sideWidth ||
-                props.sideWidth ||
-                (item.barWidth || props.barWidth || 30) / 2
-              }
-              side={side || 'left'}
-              frontColor={item.frontColor || props.frontColor || ''}
-              sideColor={item.sideColor || props.sideColor || ''}
-              topColor={item.topColor || props.topColor || ''}
-              showGradient={item.showGradient || props.showGradient || false}
-              gradientColor={item.gradientColor || props.gradientColor}
-              opacity={opacity || 1}
-              animationDuration={animationDuration || 800}
-              height={barHeight}
-              intactTopLabel={intactTopLabel}
-              showValuesAsTopLabel={!!showValuesAsTopLabel}
-              topLabelContainerStyle={topLabelContainerStyle}
-              topLabelTextStyle={topLabelTextStyle}
-              horizontal={horizontal}
-            />
-          ) : (
-            <ThreeDBar
-              barBackgroundPattern={
-                item.barBackgroundPattern || props.barBackgroundPattern
-              }
-              patternId={item.patternId || props.patternId}
-              style={{}}
-              color={''}
-              width={item.barWidth || props.barWidth || 30}
-              sideWidth={
-                item.sideWidth ||
-                props.sideWidth ||
-                (item.barWidth || props.barWidth || 30) / 2
-              }
-              barStyle={barStyle}
-              item={item}
-              side={side || 'left'}
-              frontColor={item.frontColor || props.frontColor || ''}
-              sideColor={item.sideColor || props.sideColor || ''}
-              topColor={item.topColor || props.topColor || ''}
-              showGradient={item.showGradient || props.showGradient || false}
-              gradientColor={item.gradientColor || props.gradientColor}
-              opacity={opacity || 1}
-              horizontal={horizontal}
-              intactTopLabel={intactTopLabel}
-              showValuesAsTopLabel={!!showValuesAsTopLabel}
-              topLabelContainerStyle={topLabelContainerStyle}
-              topLabelTextStyle={topLabelTextStyle}
-              height={barHeight}
-              value={item.value}
-            />
-          )
+          <AnimatedThreeDBar
+            barBackgroundPattern={
+              item.barBackgroundPattern || props.barBackgroundPattern
+            }
+            patternId={item.patternId || props.patternId}
+            width={item.barWidth || props.barWidth || 30}
+            barStyle={barStyle}
+            item={item}
+            sideWidth={
+              item.sideWidth ||
+              props.sideWidth ||
+              (item.barWidth || props.barWidth || 30) / 2
+            }
+            side={side || 'left'}
+            frontColor={item.frontColor || props.frontColor || ''}
+            sideColor={item.sideColor || props.sideColor || ''}
+            topColor={item.topColor || props.topColor || ''}
+            showGradient={item.showGradient || props.showGradient || false}
+            gradientColor={item.gradientColor || props.gradientColor}
+            opacity={opacity || 1}
+            height={barHeight}
+            intactTopLabel={intactTopLabel}
+            showValuesAsTopLabel={!!showValuesAsTopLabel}
+            topLabelContainerStyle={topLabelContainerStyle}
+            topLabelTextStyle={topLabelTextStyle}
+            horizontal={horizontal}
+            isAnimated={isAnimated}
+            animationDuration={animationDuration || 800}
+          />
         ) : item.showGradient || props.showGradient ? (
           isAnimated ? (
-            animated2DWithGradient(false)
+            animated2DWithGradient(false, false)
           ) : (
             static2DWithGradient(item)
           )
         ) : isAnimated ? (
-          animated2DWithGradient(true)
+          animated2DWithGradient(true, false)
         ) : (
-          animated2DWithGradient(true)
+          animated2DWithGradient(true, true)
         )}
         {isAnimated
           ? renderAnimatedLabel(label, labelTextStyle, item.value)

package/src/BarChart/RenderStackBars.tsx

@@ -12,6 +12,12 @@ import {
 import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
 import {BarDefaults} from '../utils/constants';
+import {
+  isValueSumZeroForStackBottom,
+  isValueSumZeroForStackTop,
+} from '../utils';
+import {stackItemType} from './types';
+import {Pointer} from '../utils/types';
 
 if (Platform.OS === 'android') {
   UIManager.setLayoutAnimationEnabledExperimental &&
@@ -47,7 +53,18 @@ type Props = {
   xAxisIndicesColor: ColorValue;
   horizontal: boolean;
   intactTopLabel: boolean;
+  barBorderWidth?: number;
+  barBorderColor: ColorValue;
   barBorderRadius?: number;
+  barBorderTopLeftRadius?: number;
+  barBorderTopRightRadius?: number;
+  barBorderBottomLeftRadius?: number;
+  barBorderBottomRightRadius?: number;
+  stackBorderRadius?: number;
+  stackBorderTopLeftRadius?: number;
+  stackBorderTopRightRadius?: number;
+  stackBorderBottomLeftRadius?: number;
+  stackBorderBottomRightRadius?: number;
   xAxisThickness: number;
   barBackgroundPattern?: Function;
   patternId?: String;
@@ -66,45 +83,9 @@ type Props = {
   stackData: Array<stackItemType>;
   isAnimated?: boolean;
   animationDuration?: number;
+  pointerConfig?: Pointer;
 };
-export type stackItemType = {
-  onPress?: any;
-  label?: String;
-  barWidth?: number;
-  spacing?: number;
-  labelTextStyle?: any;
-  topLabelComponent?: Function;
-  topLabelContainerStyle?: any;
-  disablePress?: any;
-  color?: ColorValue;
-  showGradient?: boolean;
-  gradientColor?: any;
-  capThickness?: number;
-  capColor?: ColorValue;
-  capRadius?: number;
-  labelComponent?: Function;
-  borderRadius?: number;
-  stacks: Array<{
-    value: number;
-    color?: ColorValue;
-    onPress?: (event: GestureResponderEvent) => void;
-    marginBottom?: number;
-    barBorderRadius?: number;
-    borderTopLeftRadius?: number;
-    borderTopRightRadius?: number;
-    borderBottomLeftRadius?: number;
-    borderBottomRightRadius?: number;
-    showGradient?: boolean;
-    gradientColor?: ColorValue;
-    barWidth?: number;
-    innerBarComponent?: Function;
-  }>;
-  barBackgroundPattern?: Function;
-  barBorderRadius?: number;
-  patternId?: String;
-  leftShiftForTooltip?: number;
-  showXAxisIndex?: boolean;
-};
+
 const RenderStackBars = (props: Props) => {
   const {
     barBackgroundPattern,
@@ -131,10 +112,25 @@ const RenderStackBars = (props: Props) => {
     stackData,
     isAnimated,
     animationDuration = BarDefaults.animationDuration,
+    barBorderWidth,
+    barBorderColor,
+    stackBorderRadius,
+    stackBorderTopLeftRadius,
+    stackBorderTopRightRadius,
+    stackBorderBottomLeftRadius,
+    stackBorderBottomRightRadius,
   } = props;
   const cotainsNegative = item.stacks.some(item => item.value < 0);
   const noAnimation = cotainsNegative || !isAnimated;
 
+  const {
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+  } = item;
+
   let leftSpacing = initialSpacing;
   for (let i = 0; i < index; i++) {
     leftSpacing +=
@@ -213,6 +209,76 @@ const RenderStackBars = (props: Props) => {
     setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
   };
 
+  const getStackBorderRadii = (item: stackItemType, index: number) => {
+    const stackItem = item.stacks[index];
+    const borderRadii = {
+      borderTopLeftRadius:
+        stackItem.borderTopLeftRadius ??
+        borderTopLeftRadius ??
+        stackItem.borderRadius ??
+        borderRadius ??
+        props.barBorderTopLeftRadius ??
+        props.barBorderRadius ??
+        0,
+      borderTopRightRadius:
+        stackItem.borderTopRightRadius ??
+        borderTopRightRadius ??
+        stackItem.borderRadius ??
+        borderRadius ??
+        props.barBorderTopRightRadius ??
+        props.barBorderRadius ??
+        0,
+      borderBottomLeftRadius:
+        stackItem.borderBottomLeftRadius ??
+        borderBottomLeftRadius ??
+        stackItem.borderRadius ??
+        borderRadius ??
+        props.barBorderBottomLeftRadius ??
+        props.barBorderRadius ??
+        0,
+      borderBottomRightRadius:
+        stackItem.borderBottomRightRadius ??
+        borderBottomRightRadius ??
+        stackItem.borderRadius ??
+        borderRadius ??
+        props.barBorderBottomRightRadius ??
+        props.barBorderRadius ??
+        0,
+    };
+    if (
+      !borderRadii.borderTopLeftRadius &&
+      isValueSumZeroForStackTop(item, index)
+    ) {
+      const stackTopLeft = stackBorderTopLeftRadius ?? stackBorderRadius ?? 0;
+      borderRadii.borderTopLeftRadius = stackTopLeft;
+    }
+    if (
+      !borderRadii.borderTopRightRadius &&
+      isValueSumZeroForStackTop(item, index)
+    ) {
+      const stackTopRight = stackBorderTopRightRadius ?? stackBorderRadius ?? 0;
+      borderRadii.borderTopRightRadius = stackTopRight;
+    }
+    if (
+      !borderRadii.borderBottomLeftRadius &&
+      isValueSumZeroForStackBottom(item, index)
+    ) {
+      const stackBottomLeft =
+        stackBorderBottomLeftRadius ?? stackBorderRadius ?? 0;
+      borderRadii.borderBottomLeftRadius = stackBottomLeft;
+    }
+    if (
+      !borderRadii.borderBottomRightRadius &&
+      isValueSumZeroForStackBottom(item, index)
+    ) {
+      const stackBottomRight =
+        stackBorderBottomRightRadius ?? stackBorderRadius ?? 0;
+      borderRadii.borderBottomRightRadius = stackBottomRight;
+    }
+
+    return borderRadii;
+  };
+
   const barWrapper = () => {
     return noAnimation ? (
       static2DSimple()
@@ -258,52 +324,37 @@ const RenderStackBars = (props: Props) => {
             },
           ]}>
           {item.stacks.map((stackItem, index) => {
+            const borderRadii = getStackBorderRadii(item, index);
             return (
               <TouchableOpacity
                 key={index}
                 onPress={stackItem.onPress}
                 activeOpacity={activeOpacity}
                 disabled={disablePress || !stackItem.onPress}
-                style={[
-                  {
-                    position: 'absolute',
-                    bottom: getPosition(index) + (stackItem.marginBottom || 0),
-                    width: '100%',
-                    height:
-                      (Math.abs(stackItem.value) * (containerHeight || 200)) /
-                        (maxValue || 200) -
-                      (stackItem.marginBottom || 0),
-                    backgroundColor:
-                      stackItem.color || item.color || props.color || 'black',
-                    borderRadius:
-                      stackItem.barBorderRadius || props.barBorderRadius || 0,
-                  },
-                  !props.barBorderRadius &&
-                    !stackItem.barBorderRadius && {
-                      borderTopLeftRadius: stackItem.borderTopLeftRadius || 0,
-                      borderTopRightRadius: stackItem.borderTopRightRadius || 0,
-                      borderBottomLeftRadius:
-                        stackItem.borderBottomLeftRadius || 0,
-                      borderBottomRightRadius:
-                        stackItem.borderBottomRightRadius || 0,
-                    },
-                ]}>
+                style={{
+                  position: 'absolute',
+                  bottom: getPosition(index) + (stackItem.marginBottom || 0),
+                  width: '100%',
+                  height:
+                    (Math.abs(stackItem.value) * (containerHeight || 200)) /
+                      (maxValue || 200) -
+                    (stackItem.marginBottom || 0),
+                  backgroundColor:
+                    stackItem.color || item.color || props.color || 'black',
+                  borderWidth: barBorderWidth ?? 0,
+                  borderColor: barBorderColor,
+                  ...borderRadii,
+                }}>
                 {stackItem.showGradient ||
                 item.showGradient ||
                 props.showGradient ? (
                   <LinearGradient
-                    style={[
-                      {
-                        position: 'absolute',
-                        width: '100%',
-                        height: '100%',
-                        borderRadius:
-                          stackItem.barBorderRadius ||
-                          item.barBorderRadius ||
-                          props.barBorderRadius ||
-                          0,
-                      },
-                    ]}
+                    style={{
+                      position: 'absolute',
+                      width: '100%',
+                      height: '100%',
+                      ...borderRadii,
+                    }}
                     start={{x: 0, y: 0}}
                     end={{x: 0, y: 1}}
                     colors={[
@@ -365,6 +416,11 @@ const RenderStackBars = (props: Props) => {
   return (
     <>
       <View
+        pointerEvents={
+          props.pointerConfig
+            ? props.pointerConfig.pointerEvents ?? 'none'
+            : 'auto'
+        }
         style={[
           {
             // overflow: 'visible',
@@ -373,6 +429,18 @@ const RenderStackBars = (props: Props) => {
             height: totalHeight,
             marginRight: spacing,
           },
+
+          props.pointerConfig
+            ? {
+                transform: [
+                  {
+                    translateY:
+                      (containerHeight || 200) -
+                      (totalHeight - 10 + xAxisLabelsVerticalShift),
+                  },
+                ],
+              }
+            : null,
         ]}>
         {/* {props.showVerticalLines && (
           <View

package/src/BarChart/index.tsx

@@ -220,6 +220,7 @@ export const BarChart = (props: BarChartPropsType) => {
   const autoShiftLabels = props.autoShiftLabels ?? false;
 
   const barWidth = props.barWidth || BarDefaults.barWidth;
+  const barBorderColor = props.barBorderColor ?? BarDefaults.barBorderColor;
 
   const extendedContainerHeight = getExtendedContainerHeightWithPadding(
     containerHeight,
@@ -521,10 +522,13 @@ export const BarChart = (props: BarChartPropsType) => {
     lineConfig.arrowConfig.width,
     lineConfig.arrowConfig.showArrowBase,
   ]);
-
   useEffect(() => {
     if (initialPointerIndex !== -1) {
-      const item = data[initialPointerIndex];
+      const item = (props.stackData ?? data)[initialPointerIndex];
+      const stackSum = item.stacks?.reduce(
+        (acc, stack) => acc + (stack.value ?? 0),
+        0,
+      );
       const x =
         initialSpacing +
         (spacing + barWidth) * initialPointerIndex -
@@ -532,7 +536,7 @@ export const BarChart = (props: BarChartPropsType) => {
         barWidth / 2;
       const y =
         containerHeight -
-        (item.value * containerHeight) / maxValue -
+        ((stackSum ?? item.value) * containerHeight) / maxValue -
         (pointerRadius || pointerHeight / 2) +
         10;
       if (initialPointerAppearDelay) {
@@ -648,10 +652,14 @@ export const BarChart = (props: BarChartPropsType) => {
             setPointerX(z);
             setPointerIndex(factor);
             let item, y;
-            item = data[factor];
+            item = (props.stackData ?? data)[factor];
+            const stackSum = item.stacks?.reduce(
+              (acc, stack) => acc + (stack.value ?? 0),
+              0,
+            );
             y =
               containerHeight -
-              (item.value * containerHeight) / maxValue -
+              ((stackSum ?? item.value) * containerHeight) / maxValue -
               (pointerRadius || pointerHeight / 2) +
               10;
             setPointerY(y);
@@ -676,7 +684,7 @@ export const BarChart = (props: BarChartPropsType) => {
             let factor =
               (x - initialSpacing - barWidth / 2) / (spacing + barWidth);
             factor = Math.round(factor);
-            factor = Math.min(factor, data.length - 1);
+            factor = Math.min(factor, (props.stackData ?? data).length - 1);
             factor = Math.max(factor, 0);
             let z =
               initialSpacing +
@@ -686,10 +694,14 @@ export const BarChart = (props: BarChartPropsType) => {
             let item, y;
             setPointerX(z);
             setPointerIndex(factor);
-            item = data[factor];
+            item = (props.stackData ?? data)[factor];
+            const stackSum = item.stacks?.reduce(
+              (acc, stack) => acc + (stack.value ?? 0),
+              0,
+            );
             y =
               containerHeight -
-              (item.value * containerHeight) / maxValue -
+              ((stackSum ?? item.value) * containerHeight) / maxValue -
               (pointerRadius || pointerHeight / 2) +
               10;
             setPointerY(y);
@@ -760,6 +772,8 @@ export const BarChart = (props: BarChartPropsType) => {
         showValuesAsTopLabel: props.showValuesAsTopLabel,
         topLabelContainerStyle: props.topLabelContainerStyle,
         topLabelTextStyle: props.topLabelTextStyle,
+        barBorderWidth: props.barBorderWidth,
+        barBorderColor: barBorderColor,
         barBorderRadius: props.barBorderRadius,
         barBorderTopLeftRadius: props.barBorderTopLeftRadius,
         barBorderTopRightRadius: props.barBorderTopRightRadius,
@@ -798,6 +812,11 @@ export const BarChart = (props: BarChartPropsType) => {
             stackData={props.stackData || []}
             isAnimated={isAnimated}
             animationDuration={animationDuration}
+            stackBorderRadius={props.stackBorderRadius}
+            stackBorderTopLeftRadius={props.stackBorderTopLeftRadius}
+            stackBorderTopRightRadius={props.stackBorderTopRightRadius}
+            stackBorderBottomLeftRadius={props.stackBorderBottomLeftRadius}
+            stackBorderBottomRightRadius={props.stackBorderBottomRightRadius}
             {...getPropsCommonForBarAndStack(item, index)}
           />
         );

package/src/BarChart/types.ts

@@ -1,5 +1,4 @@
-import {ColorValue, View} from 'react-native';
-import {stackItemType} from '../BarChart/RenderStackBars';
+import {ColorValue, GestureResponderEvent, View} from 'react-native';
 import {yAxisSides} from '../utils/constants';
 import {
   CurveType,
@@ -9,6 +8,48 @@ import {
   secondaryYAxisType,
 } from '../utils/types';
 
+export type stackItemType = {
+  onPress?: any;
+  label?: String;
+  barWidth?: number;
+  spacing?: number;
+  labelTextStyle?: any;
+  topLabelComponent?: Function;
+  topLabelContainerStyle?: any;
+  disablePress?: any;
+  color?: ColorValue;
+  showGradient?: boolean;
+  gradientColor?: any;
+  capThickness?: number;
+  capColor?: ColorValue;
+  capRadius?: number;
+  labelComponent?: Function;
+  stacks: Array<{
+    value: number;
+    color?: ColorValue;
+    onPress?: (event: GestureResponderEvent) => void;
+    marginBottom?: number;
+    borderRadius?: number;
+    borderTopLeftRadius?: number;
+    borderTopRightRadius?: number;
+    borderBottomLeftRadius?: number;
+    borderBottomRightRadius?: number;
+    showGradient?: boolean;
+    gradientColor?: ColorValue;
+    barWidth?: number;
+    innerBarComponent?: Function;
+  }>;
+  barBackgroundPattern?: Function;
+  borderRadius?: number;
+  borderTopLeftRadius?: number;
+  borderTopRightRadius?: number;
+  borderBottomLeftRadius?: number;
+  borderBottomRightRadius?: number;
+  patternId?: String;
+  leftShiftForTooltip?: number;
+  showXAxisIndex?: boolean;
+};
+
 export type BarChartPropsType = {
   width?: number;
   height?: number;
@@ -131,11 +172,18 @@ export type BarChartPropsType = {
   topLabelTextStyle?: any;
 
   horizSections?: Array<sectionType>;
+  barBorderWidth?: number;
+  barBorderColor?: ColorValue;
   barBorderRadius?: number;
   barBorderTopLeftRadius?: number;
   barBorderTopRightRadius?: number;
   barBorderBottomLeftRadius?: number;
   barBorderBottomRightRadius?: number;
+  stackBorderRadius?: number;
+  stackBorderTopLeftRadius?: number;
+  stackBorderTopRightRadius?: number;
+  stackBorderBottomLeftRadius?: number;
+  stackBorderBottomRightRadius?: number;
   hideOrigin?: boolean;
   labelWidth?: number;
   yAxisLabelTexts?: Array<string>;
@@ -167,6 +215,7 @@ export type BarChartPropsType = {
 };
 type lineConfigType = {
   initialSpacing?: number;
+  spacing?: number;
   curved?: boolean;
   curvature?: number;
   curveType?: CurveType;

package/src/Components/{AnimatedBar → AnimatedThreeDBar}/index.tsx

@@ -24,6 +24,7 @@ type trianglePropTypes = {
 };
 
 type animatedBarPropTypes = {
+  isAnimated?: boolean;
   animationDuration: number;
   width: number;
   sideWidth: number;
@@ -73,21 +74,36 @@ const triangleStyles = StyleSheet.create({
   },
 });
 
-const AnimatedBar = (props: animatedBarPropTypes) => {
-  const [initialRender, setInitialRender] = useState(true);
-  const [height, setHeight] = useState(Platform.OS === 'ios' ? 0 : 20);
+const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
+  const {
+    isAnimated,
+    animationDuration,
+    item,
+    width,
+    sideWidth,
+    barStyle,
+    barBackgroundPattern,
+    patternId,
+    intactTopLabel,
+    showValuesAsTopLabel,
+    topLabelContainerStyle,
+    topLabelTextStyle,
+  } = props;
 
-  const animationDuration = props.animationDuration || 800;
+  const [initialRender, setInitialRender] = useState(isAnimated);
+  const [height, setHeight] = useState(
+    isAnimated ? (Platform.OS === 'ios' ? 0 : 20) : props.height,
+  );
 
   useEffect(() => {
-    if (initialRender) {
-      // labelsAppear();
-      // increaseOpacity();
-      setTimeout(() => {
-        layoutAppear();
-      }, 20);
-    } else {
-      elevate();
+    if (isAnimated) {
+      if (initialRender) {
+        setTimeout(() => {
+          layoutAppear();
+        }, 20);
+      } else {
+        elevate();
+      }
     }
   }, [props.height]);
 
@@ -109,19 +125,6 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
     setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
   };
 
-  const {
-    item,
-    width,
-    sideWidth,
-    barStyle,
-    barBackgroundPattern,
-    patternId,
-    intactTopLabel,
-    showValuesAsTopLabel,
-    topLabelContainerStyle,
-    topLabelTextStyle,
-  } = props;
-
   const showGradient = props.showGradient || false;
   const gradientColor = props.gradientColor || 'white';
 
@@ -271,4 +274,4 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
   );
 };
 
-export default AnimatedBar;
+export default AnimatedThreeDBar;

package/src/Components/BarAndLineChartsWrapper/index.tsx

@@ -1,5 +1,5 @@
 import React, {Fragment} from 'react';
-import {View, ScrollView} from 'react-native';
+import {View, ScrollView, StyleSheet} from 'react-native';
 import {renderHorizSections} from './renderHorizSections';
 import RenderLineInBarChart from './renderLineInBarChart';
 import RenderVerticalLines from './renderVerticalLines';
@@ -268,7 +268,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
   const verticalLinesProps = {
     verticalLinesAr,
     verticalLinesSpacing,
-    spacing,
+    spacing: lineConfig?.spacing ?? spacing,
     initialSpacing,
     verticalLinesZIndex,
     verticalLinesHeight,
@@ -328,21 +328,23 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
   /*******************************************************************************************************************************************/
   /*******************************************************************************************************************************************/
 
-  const container = {
-    width: '100%',
-    height:
-      containerHeightIncludingBelowXAxis +
-      labelsExtraHeight +
-      stepHeight / 2 +
-      xAxisLabelsVerticalShift +
-      50,
-    marginBottom: (xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18) - 50, //This is to not let the Things that should be rendered below the chart overlap with it
-  };
+  const styles = StyleSheet.create({
+    container: {
+      width: '100%',
+      height:
+        containerHeightIncludingBelowXAxis +
+        labelsExtraHeight +
+        stepHeight / 2 +
+        xAxisLabelsVerticalShift +
+        50,
+      marginBottom: (xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18) - 50, //This is to not let the Things that should be rendered below the chart overlap with it
+    },
+  });
 
   return (
     <View
       style={[
-        container,
+        styles.container,
         horizontal && {
           width: actualContainerWidth,
           transform: transformForHorizontal,

package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart.tsx

@@ -90,7 +90,7 @@ const RenderLineInBarChart = props => {
                 ),
               },
             ]}>
-            {customDataPoint()}
+            {customDataPoint(item, index)}
           </View>
         );
       }

package/src/LineChart/index.tsx

@@ -1827,6 +1827,14 @@ export const LineChart = (props: LineChartPropsType) => {
   const lineGradientEndColor =
     props.lineGradientEndColor ?? LineDefaults.lineGradientEndColor;
 
+  const getPointerY = value =>
+    value
+      ? containerHeight -
+        (value * containerHeight) / maxValue -
+        (pointerRadius || pointerHeight / 2) +
+        10
+      : 0;
+
   useEffect(() => {
     if (initialPointerIndex !== -1) {
       const item = (data0 ?? data)[initialPointerIndex];
@@ -1835,26 +1843,40 @@ export const LineChart = (props: LineChartPropsType) => {
         spacing * initialPointerIndex -
         (pointerRadius || pointerWidth / 2) -
         1;
-      const y =
-        containerHeight -
-        (item.value * containerHeight) / maxValue -
-        (pointerRadius || pointerHeight / 2) +
-        10;
+      const y = getPointerY(item.value);
+      const y2 = getPointerY(data2?.[initialPointerIndex]?.value);
+      const y3 = getPointerY(data3?.[initialPointerIndex]?.value);
+      const y4 = getPointerY(data4?.[initialPointerIndex]?.value);
+      const y5 = getPointerY(data5?.[initialPointerIndex]?.value);
+
       if (initialPointerAppearDelay) {
         setTimeout(() => {
-          setPointerConfig(initialPointerIndex, item, x, y);
+          setPointerConfig(initialPointerIndex, item, x, y, y2, y3, y4, y5);
         }, initialPointerAppearDelay);
       } else {
-        setPointerConfig(initialPointerIndex, item, x, y);
+        setPointerConfig(initialPointerIndex, item, x, y, y2, y3, y4, y5);
       }
     }
   }, []);
 
-  const setPointerConfig = (initialPointerIndex, item, x, y) => {
+  const setPointerConfig = (
+    initialPointerIndex,
+    item,
+    x,
+    y,
+    y2,
+    y3,
+    y4,
+    y5,
+  ) => {
     setPointerIndex(initialPointerIndex);
     setPointerItem(item);
     setPointerX(x);
     setPointerY(y);
+    setPointerY2(y2);
+    setPointerY3(y3);
+    setPointerY4(y4);
+    setPointerY5(y5);
   };
 
   const renderLabel = (
@@ -2112,7 +2134,7 @@ export const LineChart = (props: LineChartPropsType) => {
                       transform: [{scaleX: I18nManager.isRTL ? -1 : 1}],
                     },
                   ]}>
-                  {customDataPoint()}
+                  {customDataPoint(item, index)}
                 </View>
               ) : null}
               {dataPointsShape === 'rectangular' ? (

package/src/utils/constants.ts

@@ -118,6 +118,7 @@ export const BarDefaults = {
   capThickness: 6,
   capColor: 'gray',
   capRadius: 0,
+  barBorderColor: 'gray',
 
   horizontal: false,
   rtl: false,

package/src/utils/index.tsx

@@ -1,3 +1,4 @@
+import {stackItemType} from '../BarChart/types';
 import {
   RANGE_ENTER,
   RANGE_EXIT,
@@ -1026,7 +1027,7 @@ export const getXForLineInBar = (
   yAxisLabelWidth +
   firstBarWidth / 2 +
   lineConfig.initialSpacing +
-  (currentBarWidth + spacing) * index +
+  (currentBarWidth + (lineConfig.spacing ?? spacing)) * index +
   lineConfig.shiftX -
   lineConfig.dataPointsWidth / 2 -
   32;
@@ -1056,6 +1057,7 @@ export const getLineConfigForBarChart = lineConfig => {
   return {
     initialSpacing:
       lineConfig.initialSpacing ?? defaultLineConfig.initialSpacing,
+    spacing: lineConfig.initialSpacing,
     curved: lineConfig.curved || defaultLineConfig.curved,
     curvature: lineConfig.curvature ?? defaultLineConfig.curvature,
     curveType: lineConfig.curveType ?? defaultLineConfig.curveType,
@@ -1116,3 +1118,33 @@ export const getLineConfigForBarChart = lineConfig => {
     isSecondary: lineConfig.isSecondary ?? defaultLineConfig.isSecondary,
   };
 };
+
+export const isValueSumZeroForStackBottom = (
+  item: stackItemType,
+  index: number,
+) => {
+  const {stacks} = item;
+  let isValueSumZero = true;
+  for (let i = 0; i < index; i++) {
+    if (stacks[i].value) {
+      isValueSumZero = false;
+      break;
+    }
+  }
+  return isValueSumZero;
+};
+
+export const isValueSumZeroForStackTop = (
+  item: stackItemType,
+  index: number,
+) => {
+  const {stacks} = item;
+  let isValueSumZero = true;
+  for (let i = stacks.length - 1; i > index; i--) {
+    if (stacks[i].value) {
+      isValueSumZero = false;
+      break;
+    }
+  }
+  return isValueSumZero;
+};

package/src/Components/ThreeDBar/index.tsx

@@ -1,224 +0,0 @@
-import React from 'react';
-import {View, StyleSheet, ColorValue, Text} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import Svg, {Defs, Rect} from 'react-native-svg';
-import {styles} from './styles';
-
-type PropTypes = {
-  style: any;
-  width: number;
-  sideWidth: number;
-  height: number;
-  color: ColorValue;
-  showGradient: boolean;
-  gradientColor: any;
-  frontColor: ColorValue;
-  sideColor: ColorValue;
-  topColor: ColorValue;
-  opacity: number;
-  side: String;
-  horizontal: boolean;
-  intactTopLabel: boolean;
-  showValuesAsTopLabel: boolean;
-  topLabelContainerStyle?: any;
-  topLabelTextStyle?: any;
-  value: number;
-  barBackgroundPattern?: Function;
-  patternId?: String;
-  barStyle?: object;
-  item?: any;
-};
-
-type TriangleProps = {
-  color: ColorValue;
-  width: number;
-  style: any;
-};
-
-const TriangleCorner = (props: TriangleProps) => {
-  return (
-    <View
-      style={[
-        aStyles.triangleCorner,
-        props.style,
-        {
-          borderRightWidth: props.width / 2,
-          borderTopWidth: props.width / 2,
-          borderTopColor: props.color,
-        },
-      ]}
-    />
-  );
-};
-
-const aStyles = StyleSheet.create({
-  triangleCorner: {
-    width: 0,
-    height: 0,
-    backgroundColor: 'transparent',
-    borderStyle: 'solid',
-    borderRightColor: 'transparent',
-    transform: [{rotate: '90deg'}],
-  },
-});
-
-const ThreeDBar = (props: PropTypes) => {
-  const {
-    width,
-    sideWidth,
-    height,
-    value,
-    barBackgroundPattern,
-    patternId,
-    barStyle,
-    item,
-  } = props;
-
-  const showGradient = props.showGradient || false;
-  const gradientColor = props.gradientColor || 'white';
-
-  const frontColor = props.frontColor || '#fe2233';
-  const sideColor = props.sideColor || '#cc2233';
-  const topColor = props.topColor || '#ff4433';
-
-  const {
-    intactTopLabel,
-    showValuesAsTopLabel,
-    topLabelContainerStyle,
-    topLabelTextStyle,
-  } = props;
-
-  const opacity = props.opacity || 1;
-  return (
-    <View style={styles.container}>
-      {props.height ? (
-        <View
-          style={[
-            styles.row,
-            props.side === 'right' && {transform: [{rotateY: '180deg'}]},
-          ]}>
-          {/*******************          Top View             *****************/}
-
-          <View style={{position: 'absolute', top: sideWidth / -2}}>
-            <TriangleCorner
-              color={topColor}
-              width={sideWidth}
-              style={{transform: [{rotate: '90deg'}], opacity: opacity}}
-            />
-          </View>
-          <View style={{position: 'absolute', top: sideWidth / -2}}>
-            <View
-              style={{
-                width: width,
-                height: width * 0.4,
-                // left: width / -8,
-                backgroundColor: topColor,
-                opacity: opacity,
-              }}
-            />
-          </View>
-          <View
-            style={{position: 'absolute', top: sideWidth / -2, left: width}}>
-            <TriangleCorner
-              color={topColor}
-              width={sideWidth}
-              style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
-            />
-          </View>
-
-          {/*******************************************************************/}
-
-          <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,
-                backgroundColor: sideColor,
-                opacity: opacity,
-              }}
-            />
-            <TriangleCorner
-              color={sideColor}
-              width={sideWidth}
-              style={{transform: [{rotate: '90deg'}], opacity: opacity}}
-            />
-          </View>
-
-          <View
-            style={[
-              {
-                width: width,
-                height: height,
-                backgroundColor: frontColor,
-                borderLeftWidth: StyleSheet.hairlineWidth,
-                borderTopWidth: StyleSheet.hairlineWidth,
-                borderColor: 'white',
-                opacity: opacity,
-              },
-              item.barStyle || barStyle,
-            ]}>
-            {showGradient && (
-              <LinearGradient
-                style={{position: 'absolute', width: '100%', height: '100%'}}
-                start={{x: 0, y: 0}}
-                end={{x: 1, y: 1}}
-                colors={[gradientColor, frontColor]}
-              />
-            )}
-            {barBackgroundPattern && (
-              <Svg>
-                <Defs>{barBackgroundPattern()}</Defs>
-                <Rect
-                  stroke="transparent"
-                  x="1"
-                  y="1"
-                  width={width || 30}
-                  height={height}
-                  fill={`url(#${patternId})`}
-                />
-              </Svg>
-            )}
-          </View>
-        </View>
-      ) : null}
-
-      {/*******************          Top Label            *****************/}
-
-      {(item.topLabelComponent || showValuesAsTopLabel) && (
-        <View
-          style={[
-            {
-              position: 'absolute',
-              top: value < 0 ? width * -1 : width * -2,
-              height: (width * 3) / 2,
-              width: width,
-              justifyContent: 'flex-end',
-              alignItems: 'center',
-            },
-            value < 0 && {transform: [{rotate: '180deg'}]},
-            props.horizontal &&
-              !intactTopLabel && {transform: [{rotate: '270deg'}]},
-            props.side === 'right'
-              ? {right: (-1 * width) / 4}
-              : {left: (-1 * width) / 4},
-            topLabelContainerStyle ?? item.topLabelContainerStyle,
-          ]}>
-          {showValuesAsTopLabel ? (
-            <Text style={topLabelTextStyle}>{item.value}</Text>
-          ) : (
-            item.topLabelComponent?.()
-          )}
-        </View>
-      )}
-
-      {/*******************************************************************/}
-    </View>
-  );
-};
-
-export default ThreeDBar;

package/src/Components/ThreeDBar/styles.tsx

@@ -1,14 +0,0 @@
-import {StyleSheet} from 'react-native';
-
-export const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    // width: '100%',
-    // height: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  row: {
-    flexDirection: 'row',
-  },
-});