Added noOfVerticalLines and verticalLinesSpacing to Bar nad Line charts

docs/BarChart/BarChartProps.md

@@ -147,6 +147,8 @@ The properties of this line chart can be controlled using the `lineConfig` prop
 | verticalLinesColor     | ColorValue          | Color of the vertical lines                                                        | lightgray              |
 | verticallinesThickness | number              | Thickness of the vertical lines                                                    | 1                      |
 | verticalLinesZIndex    | number              | Z index of the vertical lines                                                      | -1                     |
+| noOfVerticalLines      | number              | Number of vertical lines displayed                                                 | data.length            |
+| verticalLinesSpacing   | number              | Distance between consecutive vertical lines                                        | spacing                |
 | showXAxisIndices       | Boolean             | To show the pointers on the X axis                                                 | false                  |
 | xAxisIndicesHeight     | number              | Height of the pointers on the X axis                                               | 2                      |
 | xAxisIndicesWidth      | number              | Width of the pointers on the X axis                                                | 4                      |

docs/LineChart/LineChartProps.md

@@ -135,6 +135,8 @@ When you are using the `dataPointLabelComponent`, make sure to provide the `data
 | verticalLinesColor     | ColorValue          | Color of the vertical lines                                                        | lightgray              |
 | verticallinesThickness | number              | Thickness of the vertical lines                                                    | 1                      |
 | verticalLinesZIndex    | number              | Z index of the vertical lines                                                      | -1                     |
+| noOfVerticalLines      | number              | Number of vertical lines displayed                                                 | data.length            |
+| verticalLinesSpacing   | number              | Distance between consecutive vertical lines                                        | spacing                |
 | showXAxisIndices       | Boolean             | To show the pointers on the X axis                                                 | false                  |
 | xAxisIndicesHeight     | number              | Height of the pointers on the X axis                                               | 2                      |
 | xAxisIndicesWidth      | number              | Width of the pointers on the X axis                                                | 4                      |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.2.24",
+  "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": [

src/BarChart/RenderBars.tsx

@@ -49,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;
@@ -379,7 +375,7 @@ const RenderBars = (props: Props) => {
           // { backgroundColor: item.frontColor || props.frontColor || 'black' },
           side !== 'right' && {zIndex: data.length - index},
         ]}>
-        {props.showVerticalLines && (
+        {/* {props.showVerticalLines && (
           <View
             style={{
               zIndex: props.verticalLinesZIndex,
@@ -391,7 +387,7 @@ const RenderBars = (props: Props) => {
               backgroundColor: props.verticalLinesColor,
             }}
           />
-        )}
+        )} */}
         {props.showXAxisIndices && (
           <View
             style={{

src/BarChart/RenderStackBars.tsx

@@ -25,10 +25,6 @@ type Props = {
   barWidth?: number;
 
   rotateLabel?: Boolean;
-  showVerticalLines: Boolean;
-  verticalLinesThickness: number;
-  verticalLinesColor: ColorValue;
-  verticalLinesZIndex: number;
   showXAxisIndices: Boolean;
   xAxisIndicesHeight: number;
   xAxisIndicesWidth: number;
@@ -256,7 +252,7 @@ const RenderStackBars = (props: Props) => {
             marginRight: spacing,
           },
         ]}>
-        {props.showVerticalLines && (
+        {/* {props.showVerticalLines && (
           <View
             style={{
               zIndex: props.verticalLinesZIndex,
@@ -268,7 +264,7 @@ const RenderStackBars = (props: Props) => {
               backgroundColor: props.verticalLinesColor,
             }}
           />
-        )}
+        )} */}
         {props.showXAxisIndices && (
           <View
             style={{

src/BarChart/index.tsx

@@ -84,6 +84,8 @@ type PropTypes = {
   verticalLinesThickness?: number;
   verticalLinesColor?: ColorValue;
   verticalLinesZIndex?: number;
+  noOfVerticalLines?: number;
+  verticalLinesSpacing?: number;
 
   showYAxisIndices?: Boolean;
   showXAxisIndices?: Boolean;
@@ -348,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;
@@ -1372,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()
@@ -1394,10 +1473,6 @@ export const BarChart = (props: PropTypes) => {
                     opacity={opacity}
                     disablePress={item.disablePress || props.disablePress}
                     rotateLabel={rotateLabel}
-                    showVerticalLines={showVerticalLines}
-                    verticalLinesThickness={verticalLinesThickness}
-                    verticalLinesColor={verticalLinesColor}
-                    verticalLinesZIndex={verticalLinesZIndex}
                     showXAxisIndices={showXAxisIndices}
                     xAxisIndicesHeight={xAxisIndicesHeight}
                     xAxisIndicesWidth={xAxisIndicesWidth}
@@ -1459,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}

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:
+                  left: verticalLinesSpacing
-                    index * spacing + (initialSpacing - dataPointsWidth1 / 2),
+                    ? verticalLinesSpacing * (index + 1)
+                    : index * spacing + (initialSpacing - dataPointsWidth1 / 2),
                 }}
               />
             );