react-native-gifted-charts 1.2.22 → 1.2.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.2.22",
+  "version": "1.2.25",
   "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;
@@ -48,10 +49,6 @@ type Props = {
   capThickness?: number;
   capColor?: ColorValue;
   capRadius?: number;
-  showVerticalLines: Boolean;
-  verticalLinesThickness: number;
-  verticalLinesColor: ColorValue;
-  verticalLinesZIndex: number;
   showXAxisIndices: Boolean;
   xAxisIndicesHeight: number;
   xAxisIndicesWidth: number;
@@ -65,6 +62,10 @@ type Props = {
   barMarginBottom?: number;
   onPress?: Function;
   xAxisTextNumberOfLines: number;
+  renderTooltip: Function;
+  initialSpacing: number;
+  selectedIndex: number;
+  setSelectedIndex: Function;
 };
 type itemType = {
   value?: number;
@@ -100,6 +101,7 @@ const RenderBars = (props: Props) => {
     containerHeight,
     maxValue,
     spacing,
+    propSpacing,
     side,
     data,
     // oldValue,
@@ -114,6 +116,10 @@ const RenderBars = (props: Props) => {
     label,
     labelTextStyle,
     xAxisTextNumberOfLines,
+    renderTooltip,
+    initialSpacing,
+    selectedIndex,
+    setSelectedIndex,
   } = props;
 
   const barMarginBottom =
@@ -318,139 +324,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 +535,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 +553,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,14 +20,11 @@ type Props = {
   containerHeight?: number;
   maxValue: number;
   spacing?: number;
+  propSpacing?: number;
   data?: any;
   barWidth?: number;
 
   rotateLabel?: Boolean;
-  showVerticalLines: Boolean;
-  verticalLinesThickness: number;
-  verticalLinesColor: ColorValue;
-  verticalLinesZIndex: number;
   showXAxisIndices: Boolean;
   xAxisIndicesHeight: number;
   xAxisIndicesWidth: number;
@@ -39,12 +36,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 +67,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 +141,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 +168,8 @@ const RenderStackBars = (props: Props) => {
               <TouchableOpacity
                 key={index}
                 onPress={stackItem.onPress}
-                disabled={disablePress}
+                activeOpacity={activeOpacity}
+                disabled={disablePress || !stackItem.onPress}
                 style={[
                   {
                     position: 'absolute',
@@ -187,7 +214,7 @@ const RenderStackBars = (props: Props) => {
               />
             </Svg>
           )}
-        </View>
+        </TouchableOpacity>
         {item.topLabelComponent && (
           <View
             style={[
@@ -214,45 +241,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

@@ -84,6 +84,8 @@ type PropTypes = {
   verticalLinesThickness?: number;
   verticalLinesColor?: ColorValue;
   verticalLinesZIndex?: number;
+  noOfVerticalLines?: number;
+  verticalLinesSpacing?: number;
 
   showYAxisIndices?: Boolean;
   showXAxisIndices?: Boolean;
@@ -133,6 +135,7 @@ type PropTypes = {
   patternId?: String;
   barMarginBottom?: number;
   onPress?: Function;
+  renderTooltip?: Function;
 };
 type lineConfigType = {
   initialSpacing?: number;
@@ -192,6 +195,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 +266,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;
@@ -346,6 +350,13 @@ export const BarChart = (props: PropTypes) => {
     props.verticalLinesThickness === 0 ? 0 : props.verticalLinesThickness || 1;
   const verticalLinesColor = props.verticalLinesColor || 'lightgray';
   const verticalLinesZIndex = props.verticalLinesZIndex || -1;
+  let verticalLinesAr = [];
+  props.noOfVerticalLines
+    ? (verticalLinesAr = [...Array(props.noOfVerticalLines).keys()])
+    : (verticalLinesAr = [
+        ...Array(props.stackData ? props.stackData.length : data.length).keys(),
+      ]);
+  const verticalLinesSpacing = props.verticalLinesSpacing || 0;
 
   const showYAxisIndices = props.showYAxisIndices || false;
   const showXAxisIndices = props.showXAxisIndices || false;
@@ -1329,6 +1340,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});
@@ -1365,6 +1381,76 @@ export const BarChart = (props: PropTypes) => {
         // data={props.stackData || data}
         keyExtractor={(item, index) => index.toString()}>
         <Fragment>
+          {showVerticalLines &&
+            verticalLinesAr.map((item: itemType, index: number) => {
+              let totalSpacing = initialSpacing;
+              if (verticalLinesSpacing) {
+                totalSpacing = verticalLinesSpacing * (index + 1);
+              } else {
+                if (props.stackData) {
+                  totalSpacing +=
+                    (props.stackData[0].barWidth || props.barWidth || 30) / 2;
+                } else {
+                  totalSpacing +=
+                    (props.data[0].barWidth || props.barWidth || 30) / 2;
+                }
+                for (let i = 0; i < index; i++) {
+                  let actualSpacing = spacing;
+                  if (props.stackData) {
+                    if (i >= props.stackData.length - 1) {
+                      actualSpacing += (props.barWidth || 30) / 2;
+                    } else {
+                      if (
+                        props.stackData[i].spacing ||
+                        props.stackData[i].spacing === 0
+                      ) {
+                        actualSpacing = props.stackData[i].spacing;
+                      }
+                      if (props.stackData[i + 1].barWidth) {
+                        actualSpacing += props.stackData[i + 1].barWidth;
+                      } else {
+                        actualSpacing += props.barWidth || 30;
+                      }
+                    }
+                  } else {
+                    if (i >= props.data.length - 1) {
+                      actualSpacing += (props.barWidth || 30) / 2;
+                    } else {
+                      if (
+                        props.data[i].spacing ||
+                        props.data[i].spacing === 0
+                      ) {
+                        console.log('here for index ' + index + ' and i ' + i);
+                        actualSpacing = props.data[i].spacing;
+                      }
+                      if (props.data[i + 1].barWidth) {
+                        actualSpacing += props.data[i + 1].barWidth;
+                      } else {
+                        actualSpacing += props.barWidth || 30;
+                      }
+                    }
+                  }
+                  console.log('i = ' + i + ' actualSpacing ' + actualSpacing);
+                  totalSpacing += actualSpacing;
+                }
+              }
+
+              return (
+                <View
+                  key={index}
+                  style={{
+                    position: 'absolute',
+                    zIndex: verticalLinesZIndex || -1,
+                    marginBottom: xAxisThickness,
+                    height: containerHeight + 15 - xAxisThickness,
+                    width: verticalLinesThickness,
+                    backgroundColor: verticalLinesColor,
+                    bottom: 60,
+                    left: totalSpacing,
+                  }}
+                />
+              );
+            })}
           {showLine
             ? lineConfig.isAnimated
               ? renderAnimatedLine()
@@ -1375,20 +1461,18 @@ 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}
-                    verticalLinesColor={verticalLinesColor}
-                    verticalLinesZIndex={verticalLinesZIndex}
                     showXAxisIndices={showXAxisIndices}
                     xAxisIndicesHeight={xAxisIndicesHeight}
                     xAxisIndicesWidth={xAxisIndicesWidth}
@@ -1408,6 +1492,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}
                   />
                 );
               })
@@ -1419,6 +1508,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}
@@ -1444,10 +1534,6 @@ export const BarChart = (props: PropTypes) => {
                   capThickness={props.capThickness}
                   capColor={props.capColor}
                   capRadius={props.capRadius}
-                  showVerticalLines={showVerticalLines}
-                  verticalLinesThickness={verticalLinesThickness}
-                  verticalLinesColor={verticalLinesColor}
-                  verticalLinesZIndex={verticalLinesZIndex}
                   showXAxisIndices={showXAxisIndices}
                   xAxisIndicesHeight={xAxisIndicesHeight}
                   xAxisIndicesWidth={xAxisIndicesWidth}
@@ -1470,6 +1556,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

@@ -110,6 +110,8 @@ type propTypes = {
   verticalLinesThickness?: number;
   verticalLinesColor?: ColorValue;
   verticalLinesZIndex?: number;
+  noOfVerticalLines?: number;
+  verticalLinesSpacing?: number;
   hideAxesAndRules?: Boolean;
   areaChart?: Boolean;
 
@@ -1377,6 +1379,12 @@ export const LineChart = (props: propTypes) => {
   const hideRules = props.hideRules || false;
   const showVerticalLines = props.showVerticalLines || false;
   const verticalLinesUptoDataPoint = props.verticalLinesUptoDataPoint || false;
+  let verticalLinesAr = [];
+  props.noOfVerticalLines
+    ? (verticalLinesAr = [...Array(props.noOfVerticalLines).keys()])
+    : (verticalLinesAr = [...Array(data.length).keys()]);
+
+  const verticalLinesSpacing = props.verticalLinesSpacing || 0;
 
   const showYAxisIndices = props.showYAxisIndices || false;
   const showXAxisIndices = props.showXAxisIndices || false;
@@ -3290,7 +3298,7 @@ export const LineChart = (props: propTypes) => {
           props.width && {width: props.width + 10},
         ]}>
         {showVerticalLines &&
-          data.map((item: itemType, index: number) => {
+          verticalLinesAr.map((item: itemType, index: number) => {
             return (
               <View
                 key={index}
@@ -3299,13 +3307,17 @@ export const LineChart = (props: propTypes) => {
                   zIndex: verticalLinesZIndex || -1,
                   marginBottom: xAxisThickness,
                   height: verticalLinesUptoDataPoint
-                    ? (item.value * containerHeight) / maxValue - xAxisThickness
+                    ? index < data.length
+                      ? (data[index].value * containerHeight) / maxValue -
+                        xAxisThickness
+                      : 0
                     : containerHeight + 15 - xAxisThickness,
                   width: verticalLinesThickness,
                   backgroundColor: verticalLinesColor,
                   bottom: 60,
-                  left:
-                    index * spacing + (initialSpacing - dataPointsWidth1 / 2),
+                  left: verticalLinesSpacing
+                    ? verticalLinesSpacing * (index + 1)
+                    : index * spacing + (initialSpacing - dataPointsWidth1 / 2),
                 }}
               />
             );