react-native-gifted-charts 1.2.21 → 1.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.2.21",
+  "version": "1.2.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/RenderBars.tsx

@@ -29,6 +29,7 @@ type Props = {
   containerHeight?: number;
   maxValue: number;
   spacing?: number;
+  propSpacing?: number;
   data?: any;
   barWidth?: number;
   sideWidth?: number;
@@ -65,6 +66,10 @@ type Props = {
   barMarginBottom?: number;
   onPress?: Function;
   xAxisTextNumberOfLines: number;
+  renderTooltip: Function;
+  initialSpacing: number;
+  selectedIndex: number;
+  setSelectedIndex: Function;
 };
 type itemType = {
   value?: number;
@@ -100,6 +105,7 @@ const RenderBars = (props: Props) => {
     containerHeight,
     maxValue,
     spacing,
+    propSpacing,
     side,
     data,
     // oldValue,
@@ -114,6 +120,10 @@ const RenderBars = (props: Props) => {
     label,
     labelTextStyle,
     xAxisTextNumberOfLines,
+    renderTooltip,
+    initialSpacing,
+    selectedIndex,
+    setSelectedIndex,
   } = props;
 
   const barMarginBottom =
@@ -318,139 +328,207 @@ const RenderBars = (props: Props) => {
     );
   };
 
+  const barHeight =
+    (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)) -
+    barMarginBottom;
+
+  let leftSpacing = initialSpacing;
+  for (let i = 0; i < index; i++) {
+    leftSpacing +=
+      (data[i].spacing === 0 ? 0 : data[i].spacing || propSpacing) +
+      (data[i].barWidth || props.barWidth || 30);
+  }
+
   return (
-    <TouchableOpacity
-      disabled={item.disablePress || props.disablePress}
-      activeOpacity={props.activeOpacity || 0.2}
-      onPress={() => {
-        item.onPress
-          ? item.onPress()
-          : props.onPress
-          ? props.onPress(item, index)
-          : null;
-      }}
-      style={[
-        {
-          // overflow: 'visible',
-          marginBottom: 60 + barMarginBottom,
-          width: item.barWidth || props.barWidth || 30,
-          height:
-            (item.value >= 0 &&
-            (!isThreeD || isAnimated) &&
-            item.topLabelComponent
-              ? (item.topLabelComponentHeight || 30) +
+    <>
+      <TouchableOpacity
+        disabled={item.disablePress || props.disablePress}
+        activeOpacity={props.activeOpacity || 0.2}
+        onPress={() => {
+          if (renderTooltip) {
+            setSelectedIndex(index);
+          }
+          item.onPress
+            ? item.onPress()
+            : props.onPress
+            ? props.onPress(item, index)
+            : null;
+        }}
+        style={[
+          {
+            // overflow: 'visible',
+            marginBottom: 60 + barMarginBottom,
+            width: item.barWidth || props.barWidth || 30,
+            height: barHeight,
+            marginRight: spacing,
+          },
+          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},
+        ]}>
+        {props.showVerticalLines && (
+          <View
+            style={{
+              zIndex: props.verticalLinesZIndex,
+              position: 'absolute',
+              height: (containerHeight || 200) + 15,
+              width: props.verticalLinesThickness,
+              bottom: 0,
+              left: (item.barWidth || props.barWidth || 30) / 2,
+              backgroundColor: props.verticalLinesColor,
+            }}
+          />
+        )}
+        {props.showXAxisIndices && (
+          <View
+            style={{
+              zIndex: 2,
+              position: 'absolute',
+              height: props.xAxisIndicesHeight,
+              width: props.xAxisIndicesWidth,
+              bottom: 0,
+              left: (item.barWidth || props.barWidth || 30) / 2,
+              backgroundColor: props.xAxisIndicesColor,
+            }}
+          />
+        )}
+        {isThreeD ? (
+          isAnimated ? (
+            <AnimatedBar
+              barBackgroundPattern={
+                item.barBackgroundPattern || props.barBackgroundPattern
+              }
+              patternId={item.patternId || props.patternId}
+              topLabelContainerStyle={item.topLabelContainerStyle}
+              width={item.barWidth || props.barWidth || 30}
+              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}
+              topLabelComponent={item.topLabelComponent}
+              opacity={opacity || 1}
+              animationDuration={animationDuration || 800}
+              height={
                 (Math.abs(item.value) * (containerHeight || 200)) /
-                  (maxValue || 200)
-              : (Math.abs(item.value) * (containerHeight || 200)) /
-                (maxValue || 200)) - barMarginBottom,
-          marginRight: spacing,
-        },
-        item.value < 0 && {
-          transform: [
-            {
-              translateY:
+                  (maxValue || 200) -
+                barMarginBottom
+              }
+              intactTopLabel={props.intactTopLabel}
+              horizontal={props.horizontal}
+            />
+          ) : (
+            <ThreeDBar
+              barBackgroundPattern={
+                item.barBackgroundPattern || props.barBackgroundPattern
+              }
+              patternId={item.patternId || props.patternId}
+              style={{}}
+              color={''}
+              topLabelContainerStyle={item.topLabelContainerStyle}
+              width={item.barWidth || props.barWidth || 30}
+              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}
+              topLabelComponent={item.topLabelComponent || Function}
+              opacity={opacity || 1}
+              horizontal={props.horizontal}
+              intactTopLabel={props.intactTopLabel}
+              height={
                 (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},
-      ]}>
-      {props.showVerticalLines && (
-        <View
-          style={{
-            zIndex: props.verticalLinesZIndex,
-            position: 'absolute',
-            height: (containerHeight || 200) + 15,
-            width: props.verticalLinesThickness,
-            bottom: 0,
-            left: (item.barWidth || props.barWidth || 30) / 2,
-            backgroundColor: props.verticalLinesColor,
-          }}
-        />
-      )}
-      {props.showXAxisIndices && (
-        <View
-          style={{
-            zIndex: 2,
-            position: 'absolute',
-            height: props.xAxisIndicesHeight,
-            width: props.xAxisIndicesWidth,
-            bottom: 0,
-            left: (item.barWidth || props.barWidth || 30) / 2,
-            backgroundColor: props.xAxisIndicesColor,
-          }}
-        />
-      )}
-      {isThreeD ? (
-        isAnimated ? (
-          <AnimatedBar
-            barBackgroundPattern={
-              item.barBackgroundPattern || props.barBackgroundPattern
-            }
-            patternId={item.patternId || props.patternId}
-            topLabelContainerStyle={item.topLabelContainerStyle}
-            width={item.barWidth || props.barWidth || 30}
-            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}
-            topLabelComponent={item.topLabelComponent}
-            opacity={opacity || 1}
+                  (maxValue || 200) -
+                barMarginBottom
+              }
+              value={item.value}
+            />
+          )
+        ) : item.showGradient || props.showGradient ? (
+          isAnimated ? (
+            <Animated2DWithGradient
+              barBackgroundPattern={props.barBackgroundPattern}
+              patternId={props.patternId}
+              barWidth={props.barWidth}
+              item={item}
+              opacity={opacity}
+              animationDuration={animationDuration || 800}
+              roundedBottom={props.roundedBottom || false}
+              roundedTop={props.roundedTop || false}
+              gradientColor={props.gradientColor}
+              frontColor={props.frontColor || 'black'}
+              containerHeight={containerHeight}
+              maxValue={maxValue}
+              height={
+                (Math.abs(item.value) * (containerHeight || 200)) /
+                (maxValue || 200)
+              }
+              barMarginBottom={barMarginBottom}
+              cappedBars={props.cappedBars}
+              capThickness={props.capThickness}
+              capColor={props.capColor}
+              capRadius={props.capRadius}
+              horizontal={props.horizontal}
+              intactTopLabel={props.intactTopLabel}
+              barBorderRadius={props.barBorderRadius || 0}
+            />
+          ) : (
+            static2DWithGradient(item)
+          )
+        ) : isAnimated ? (
+          <Animated2DWithGradient
+            barBackgroundPattern={props.barBackgroundPattern}
+            patternId={props.patternId}
+            barWidth={props.barWidth}
+            item={item}
+            opacity={opacity}
             animationDuration={animationDuration || 800}
+            roundedBottom={props.roundedBottom || false}
+            roundedTop={props.roundedTop || false}
+            gradientColor={props.gradientColor}
+            noGradient
+            frontColor={props.frontColor || 'black'}
+            containerHeight={containerHeight}
+            maxValue={maxValue}
             height={
               (Math.abs(item.value) * (containerHeight || 200)) /
-                (maxValue || 200) -
-              barMarginBottom
-            }
-            intactTopLabel={props.intactTopLabel}
-            horizontal={props.horizontal}
-          />
-        ) : (
-          <ThreeDBar
-            barBackgroundPattern={
-              item.barBackgroundPattern || props.barBackgroundPattern
-            }
-            patternId={item.patternId || props.patternId}
-            style={{}}
-            color={''}
-            topLabelContainerStyle={item.topLabelContainerStyle}
-            width={item.barWidth || props.barWidth || 30}
-            sideWidth={
-              item.sideWidth ||
-              props.sideWidth ||
-              (item.barWidth || props.barWidth || 30) / 2
+              (maxValue || 200)
             }
-            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}
-            topLabelComponent={item.topLabelComponent || Function}
-            opacity={opacity || 1}
+            barMarginBottom={barMarginBottom}
+            cappedBars={props.cappedBars}
+            capThickness={props.capThickness}
+            capColor={props.capColor}
+            capRadius={props.capRadius}
             horizontal={props.horizontal}
             intactTopLabel={props.intactTopLabel}
-            height={
-              (Math.abs(item.value) * (containerHeight || 200)) /
-                (maxValue || 200) -
-              barMarginBottom
-            }
-            value={item.value}
+            barBorderRadius={props.barBorderRadius || 0}
           />
-        )
-      ) : item.showGradient || props.showGradient ? (
-        isAnimated ? (
+        ) : (
           <Animated2DWithGradient
             barBackgroundPattern={props.barBackgroundPattern}
             patternId={props.patternId}
@@ -461,6 +539,8 @@ const RenderBars = (props: Props) => {
             roundedBottom={props.roundedBottom || false}
             roundedTop={props.roundedTop || false}
             gradientColor={props.gradientColor}
+            noGradient
+            noAnimation
             frontColor={props.frontColor || 'black'}
             containerHeight={containerHeight}
             maxValue={maxValue}
@@ -477,71 +557,23 @@ const RenderBars = (props: Props) => {
             intactTopLabel={props.intactTopLabel}
             barBorderRadius={props.barBorderRadius || 0}
           />
-        ) : (
-          static2DWithGradient(item)
-        )
-      ) : isAnimated ? (
-        <Animated2DWithGradient
-          barBackgroundPattern={props.barBackgroundPattern}
-          patternId={props.patternId}
-          barWidth={props.barWidth}
-          item={item}
-          opacity={opacity}
-          animationDuration={animationDuration || 800}
-          roundedBottom={props.roundedBottom || false}
-          roundedTop={props.roundedTop || false}
-          gradientColor={props.gradientColor}
-          noGradient
-          frontColor={props.frontColor || 'black'}
-          containerHeight={containerHeight}
-          maxValue={maxValue}
-          height={
-            (Math.abs(item.value) * (containerHeight || 200)) /
-            (maxValue || 200)
-          }
-          barMarginBottom={barMarginBottom}
-          cappedBars={props.cappedBars}
-          capThickness={props.capThickness}
-          capColor={props.capColor}
-          capRadius={props.capRadius}
-          horizontal={props.horizontal}
-          intactTopLabel={props.intactTopLabel}
-          barBorderRadius={props.barBorderRadius || 0}
-        />
-      ) : (
-        <Animated2DWithGradient
-          barBackgroundPattern={props.barBackgroundPattern}
-          patternId={props.patternId}
-          barWidth={props.barWidth}
-          item={item}
-          opacity={opacity}
-          animationDuration={animationDuration || 800}
-          roundedBottom={props.roundedBottom || false}
-          roundedTop={props.roundedTop || false}
-          gradientColor={props.gradientColor}
-          noGradient
-          noAnimation
-          frontColor={props.frontColor || 'black'}
-          containerHeight={containerHeight}
-          maxValue={maxValue}
-          height={
-            (Math.abs(item.value) * (containerHeight || 200)) /
-            (maxValue || 200)
-          }
-          barMarginBottom={barMarginBottom}
-          cappedBars={props.cappedBars}
-          capThickness={props.capThickness}
-          capColor={props.capColor}
-          capRadius={props.capRadius}
-          horizontal={props.horizontal}
-          intactTopLabel={props.intactTopLabel}
-          barBorderRadius={props.barBorderRadius || 0}
-        />
+        )}
+        {isAnimated
+          ? renderAnimatedLabel(label, labelTextStyle, item.value)
+          : renderLabel(label, labelTextStyle, item.value)}
+      </TouchableOpacity>
+      {renderTooltip && selectedIndex === index && (
+        <View
+          style={{
+            position: 'absolute',
+            bottom: barHeight + 60,
+            left: leftSpacing,
+            zIndex: 1000,
+          }}>
+          {renderTooltip(item, index)}
+        </View>
       )}
-      {isAnimated
-        ? renderAnimatedLabel(label, labelTextStyle, item.value)
-        : renderLabel(label, labelTextStyle, item.value)}
-    </TouchableOpacity>
+    </>
   );
 };
 

package/src/BarChart/RenderStackBars.tsx

@@ -20,6 +20,7 @@ type Props = {
   containerHeight?: number;
   maxValue: number;
   spacing?: number;
+  propSpacing?: number;
   data?: any;
   barWidth?: number;
 
@@ -39,12 +40,19 @@ type Props = {
   barBackgroundPattern?: Function;
   patternId?: String;
   xAxisTextNumberOfLines: number;
+  renderTooltip: Function;
+  initialSpacing: number;
+  selectedIndex: number;
+  setSelectedIndex: Function;
+  activeOpacity: number;
+  stackData: Array<itemType>;
 };
 type itemType = {
   value?: number;
   onPress?: any;
   label?: String;
   barWidth?: number;
+  spacing?: number;
   labelTextStyle?: any;
   topLabelComponent?: Function;
   topLabelContainerStyle?: any;
@@ -63,15 +71,29 @@ const RenderStackBars = (props: Props) => {
     barBackgroundPattern,
     patternId,
     item,
+    index,
     containerHeight,
     maxValue,
     spacing,
+    propSpacing,
     rotateLabel,
     xAxisThickness,
     label,
     labelTextStyle,
     xAxisTextNumberOfLines,
+    renderTooltip,
+    initialSpacing,
+    selectedIndex,
+    setSelectedIndex,
+    activeOpacity,
+    stackData,
   } = props;
+  let leftSpacing = initialSpacing;
+  for (let i = 0; i < index; i++) {
+    leftSpacing +=
+      (stackData[i].spacing === 0 ? 0 : stackData[i].spacing || propSpacing) +
+      (stackData[i].stacks[0].barWidth || props.barWidth || 30);
+  }
   const disablePress = props.disablePress || false;
   const renderLabel = (label: String, labelTextStyle: any) => {
     return (
@@ -123,7 +145,15 @@ const RenderStackBars = (props: Props) => {
     const cotainsNegative = item.stacks.some(item => item.value < 0);
     return (
       <>
-        <View
+        <TouchableOpacity
+          disabled={disablePress}
+          activeOpacity={activeOpacity}
+          onPress={() => {
+            setSelectedIndex(index);
+            if (item.onPress) {
+              item.onPress();
+            }
+          }}
           style={[
             {
               position: 'absolute',
@@ -142,7 +172,8 @@ const RenderStackBars = (props: Props) => {
               <TouchableOpacity
                 key={index}
                 onPress={stackItem.onPress}
-                disabled={disablePress}
+                activeOpacity={activeOpacity}
+                disabled={disablePress || !stackItem.onPress}
                 style={[
                   {
                     position: 'absolute',
@@ -187,7 +218,7 @@ const RenderStackBars = (props: Props) => {
               />
             </Svg>
           )}
-        </View>
+        </TouchableOpacity>
         {item.topLabelComponent && (
           <View
             style={[
@@ -214,45 +245,58 @@ const RenderStackBars = (props: Props) => {
   };
 
   return (
-    <View
-      style={[
-        {
-          // overflow: 'visible',
-          marginBottom: 60,
-          width: item.stacks[0].barWidth || props.barWidth || 30,
-          height: totalHeight,
-          marginRight: spacing,
-        },
-      ]}>
-      {props.showVerticalLines && (
-        <View
-          style={{
-            zIndex: props.verticalLinesZIndex,
-            position: 'absolute',
-            height: (containerHeight || 200) + 15,
-            width: props.verticalLinesThickness,
-            bottom: 0,
-            left: (item.barWidth || props.barWidth || 30) / 2,
-            backgroundColor: props.verticalLinesColor,
-          }}
-        />
-      )}
-      {props.showXAxisIndices && (
+    <>
+      <View
+        style={[
+          {
+            // overflow: 'visible',
+            marginBottom: 60,
+            width: item.stacks[0].barWidth || props.barWidth || 30,
+            height: totalHeight,
+            marginRight: spacing,
+          },
+        ]}>
+        {props.showVerticalLines && (
+          <View
+            style={{
+              zIndex: props.verticalLinesZIndex,
+              position: 'absolute',
+              height: (containerHeight || 200) + 15,
+              width: props.verticalLinesThickness,
+              bottom: 0,
+              left: (item.barWidth || props.barWidth || 30) / 2,
+              backgroundColor: props.verticalLinesColor,
+            }}
+          />
+        )}
+        {props.showXAxisIndices && (
+          <View
+            style={{
+              zIndex: 2,
+              position: 'absolute',
+              height: props.xAxisIndicesHeight,
+              width: props.xAxisIndicesWidth,
+              bottom: 0,
+              left: (item.barWidth || props.barWidth || 30) / 2,
+              backgroundColor: props.xAxisIndicesColor,
+            }}
+          />
+        )}
+        {static2DSimple(item)}
+        {renderLabel(label || '', labelTextStyle)}
+      </View>
+      {renderTooltip && selectedIndex === index && (
         <View
           style={{
-            zIndex: 2,
             position: 'absolute',
-            height: props.xAxisIndicesHeight,
-            width: props.xAxisIndicesWidth,
-            bottom: 0,
-            left: (item.barWidth || props.barWidth || 30) / 2,
-            backgroundColor: props.xAxisIndicesColor,
-          }}
-        />
+            bottom: totalHeight + 60,
+            left: leftSpacing,
+            zIndex: 1000,
+          }}>
+          {renderTooltip(item, index)}
+        </View>
       )}
-      {static2DSimple(item)}
-      {renderLabel(label || '', labelTextStyle)}
-    </View>
+    </>
   );
 };
 

package/src/BarChart/index.tsx

@@ -133,6 +133,7 @@ type PropTypes = {
   patternId?: String;
   barMarginBottom?: number;
   onPress?: Function;
+  renderTooltip?: Function;
 };
 type lineConfigType = {
   initialSpacing?: number;
@@ -192,6 +193,7 @@ type itemType = {
 export const BarChart = (props: PropTypes) => {
   const scrollRef = useRef();
   const [points, setPoints] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(-1);
   const showLine = props.showLine || false;
   const initialSpacing =
     props.initialSpacing === 0 ? 0 : props.initialSpacing || 40;
@@ -262,7 +264,7 @@ export const BarChart = (props: PropTypes) => {
   const horizSections = [{value: '0'}];
   const horizSectionsBelow = [];
   const stepHeight = props.stepHeight || containerHeight / noOfSections;
-  const spacing = props.spacing === 0 ? 0 : props.spacing ? props.spacing : 20;
+  const spacing = props.spacing === 0 ? 0 : props.spacing || 20;
   const labelWidth = props.labelWidth || 0;
   const scrollToEnd = props.scrollToEnd || false;
   const scrollAnimation = props.scrollAnimation === false ? false : true;
@@ -630,9 +632,12 @@ export const BarChart = (props: PropTypes) => {
     outputRange: [0, totalWidth],
   });
 
-  const getLabel = val => {
+  const getLabel = (val, index) => {
     let label = '';
-    if (showFractionalValues) {
+    if (
+      showFractionalValues ||
+      (props.yAxisLabelTexts && props.yAxisLabelTexts[index] !== undefined)
+    ) {
       if (val) {
         label = val;
       } else {
@@ -731,7 +736,7 @@ export const BarChart = (props: PropTypes) => {
           props.hideAxesAndRules !== true &&
             !hideYAxisText &&
             horizSections.map((sectionItems, index) => {
-              let label = getLabel(sectionItems.value);
+              let label = getLabel(sectionItems.value, index);
               if (hideOrigin && index === horizSections.length - 1) {
                 label = '';
               }
@@ -852,6 +857,7 @@ export const BarChart = (props: PropTypes) => {
             horizSectionsBelow.map((sectionItems, index) => {
               let label = getLabel(
                 horizSectionsBelow[horizSectionsBelow.length - 1 - index].value,
+                index,
               );
               return (
                 <View
@@ -906,7 +912,7 @@ export const BarChart = (props: PropTypes) => {
           props.hideAxesAndRules !== true &&
             !hideYAxisText &&
             horizSections.map((sectionItems, index) => {
-              let label = getLabel(sectionItems.value);
+              let label = getLabel(sectionItems.value, index);
               if (hideOrigin && index === horizSections.length - 1) {
                 label = '';
               }
@@ -1325,6 +1331,11 @@ export const BarChart = (props: PropTypes) => {
       {props.hideAxesAndRules !== true && renderHorizSections()}
       <ScrollView
         ref={scrollRef}
+        onTouchStart={evt => {
+          if (props.renderTooltip) {
+            setSelectedIndex(-1);
+          }
+        }}
         onContentSizeChange={() => {
           if (scrollRef.current && scrollToEnd) {
             scrollRef.current.scrollToEnd({animated: scrollAnimation});
@@ -1371,15 +1382,17 @@ export const BarChart = (props: PropTypes) => {
                 return (
                   <RenderStackBars
                     key={index}
+                    stackData={props.stackData}
                     item={item}
                     index={index}
                     containerHeight={containerHeight}
                     maxValue={maxValue}
                     spacing={item.spacing === 0 ? 0 : item.spacing || spacing}
+                    propSpacing={spacing}
                     xAxisThickness={xAxisThickness}
                     barWidth={props.barWidth}
                     opacity={opacity}
-                    disablePress={props.disablePress}
+                    disablePress={item.disablePress || props.disablePress}
                     rotateLabel={rotateLabel}
                     showVerticalLines={showVerticalLines}
                     verticalLinesThickness={verticalLinesThickness}
@@ -1404,6 +1417,11 @@ export const BarChart = (props: PropTypes) => {
                       item.labelTextStyle || props.xAxisLabelTextStyle
                     }
                     xAxisTextNumberOfLines={xAxisTextNumberOfLines}
+                    renderTooltip={props.renderTooltip}
+                    initialSpacing={initialSpacing}
+                    selectedIndex={selectedIndex}
+                    setSelectedIndex={setSelectedIndex}
+                    activeOpacity={props.activeOpacity || 0.2}
                   />
                 );
               })
@@ -1415,6 +1433,7 @@ export const BarChart = (props: PropTypes) => {
                   containerHeight={containerHeight}
                   maxValue={maxValue}
                   spacing={item.spacing === 0 ? 0 : item.spacing || spacing}
+                  propSpacing={spacing}
                   side={side}
                   data={data}
                   barWidth={props.barWidth}
@@ -1466,6 +1485,10 @@ export const BarChart = (props: PropTypes) => {
                   }
                   onPress={props.onPress}
                   xAxisTextNumberOfLines={xAxisTextNumberOfLines}
+                  renderTooltip={props.renderTooltip}
+                  initialSpacing={initialSpacing}
+                  selectedIndex={selectedIndex}
+                  setSelectedIndex={setSelectedIndex}
                 />
               ))}
         </Fragment>

package/src/LineChart/index.tsx

@@ -1452,8 +1452,8 @@ export const LineChart = (props: propTypes) => {
       : defaultPointerConfig.pointerComponent;
 
   const showPointerStrip =
-    pointerConfig && pointerConfig.showPointerStrip
-      ? pointerConfig.showPointerStrip
+    pointerConfig && pointerConfig.showPointerStrip === false
+      ? false
       : defaultPointerConfig.showPointerStrip;
   const pointerStripHeight =
     pointerConfig && pointerConfig.pointerStripHeight
@@ -1779,9 +1779,12 @@ export const LineChart = (props: propTypes) => {
   //     )
   // }
 
-  const getLabel = val => {
+  const getLabel = (val, index) => {
     let label = '';
-    if (showFractionalValues) {
+    if (
+      showFractionalValues ||
+      (props.yAxisLabelTexts && props.yAxisLabelTexts[index] !== undefined)
+    ) {
       if (val) {
         label = props.yAxisOffset
           ? (Number(val) + props.yAxisOffset).toString()
@@ -1882,7 +1885,7 @@ export const LineChart = (props: propTypes) => {
           props.hideAxesAndRules !== true &&
             !hideYAxisText &&
             horizSections.map((sectionItems, index) => {
-              let label = getLabel(sectionItems.value);
+              let label = getLabel(sectionItems.value, index);
               if (hideOrigin && index === horizSections.length - 1) {
                 label = '';
               }
@@ -1987,6 +1990,7 @@ export const LineChart = (props: propTypes) => {
             horizSectionsBelow.map((sectionItems, index) => {
               let label = getLabel(
                 horizSectionsBelow[horizSectionsBelow.length - 1 - index].value,
+                index,
               );
               return (
                 <View
@@ -2041,7 +2045,7 @@ export const LineChart = (props: propTypes) => {
           props.hideAxesAndRules !== true &&
             !hideYAxisText &&
             horizSections.map((sectionItems, index) => {
-              let label = getLabel(sectionItems.value);
+              let label = getLabel(sectionItems.value, index);
               if (hideOrigin && index === horizSections.length - 1) {
                 label = '';
               }