Added verticalLinesHeight and fixed issue- vertical lines coming down when using labelsExtraHeight

__tests__/BarChart.test.js

@@ -10,6 +10,8 @@ import CappedBars from '../examples/BarChart/CappedBars';
 import RoundStackBar from '../examples/BarChart/RoundStackBar';
 import SimpleBarAnimated from '../examples/BarChart/SimpleBarAnimated';
 import SimpleBlueBars from '../examples/BarChart/SimpleBlueBars';
+import SimpleBlueBarsVerticalLines from '../examples/BarChart/SimpleBlueBarsVerticalLines';
+import BarChartWithGivenNumberOfVerticalLines from '../examples/BarChart/BarChartWithGivenNumberOfVerticalLines';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
@@ -34,8 +36,9 @@ it('renders rounded stack bar chart correctly', () => {
   expect(tree).toMatchSnapshot();
 });
 
-it('renders simple animated bar chart correctly', () => {
+it('renders simple animated bar chart correctly', async () => {
   const tree = renderer.create(<SimpleBarAnimated />).toJSON();
+  await new Promise(r => setTimeout(r, 1000));
   expect(tree).toMatchSnapshot();
 });
 
@@ -43,3 +46,15 @@ it('renders alternate blue and gray bar chart correctly', () => {
   const tree = renderer.create(<SimpleBlueBars />).toJSON();
   expect(tree).toMatchSnapshot();
 });
+
+it('renders a simple bar chart with vertical lines correctly', () => {
+  const tree = renderer.create(<SimpleBlueBarsVerticalLines />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders a simple bar chart with given number of vertical lines correctly', () => {
+  const tree = renderer
+    .create(<BarChartWithGivenNumberOfVerticalLines />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

__tests__/LineChart.test.js

@@ -12,6 +12,7 @@ import ChartWithPointer from '../examples/LineChart/ChartWithPointer';
 import ChartWithAdjustingPointer from '../examples/LineChart/ChartWithAdjustingPointer';
 import ScrollingChartWithPointer from '../examples/LineChart/ScrollingChartWithPointer';
 import CaloriesBurnt from '../examples/LineChart/CaloriesBurnt';
+import SimpleBlueLineWithGivenNumberOfVerticalLines from '../examples/LineChart/SimpleBlueLineWithGivenNumberOfVerticalLines';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
@@ -55,3 +56,10 @@ it('renders CaloriesBurnt Area chart correctly', () => {
   const tree = renderer.create(<CaloriesBurnt />).toJSON();
   expect(tree).toMatchSnapshot();
 });
+
+it('renders blue line chart with given number of vertical lines correctly', () => {
+  const tree = renderer
+    .create(<SimpleBlueLineWithGivenNumberOfVerticalLines />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

docs/BarChart/BarChartProps.md

@@ -146,6 +146,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop
 | showVerticalLines      | Boolean             | To show vertical lines                                                             | false                  |
 | verticalLinesColor     | ColorValue          | Color of the vertical lines                                                        | lightgray              |
 | verticallinesThickness | number              | Thickness of the vertical lines                                                    | 1                      |
+| verticalLinesHeight    | number              | Height of the vertical lines                                                       | chart height           |
 | 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                |

docs/LineChart/LineChartProps.md

@@ -134,6 +134,7 @@ When you are using the `dataPointLabelComponent`, make sure to provide the `data
 | verticalLinesUptoDataPoint | Boolean         | To set the height of the vertical lines upto the corresponding data point          | false                  |
 | verticalLinesColor     | ColorValue          | Color of the vertical lines                                                        | lightgray              |
 | verticallinesThickness | number              | Thickness of the vertical lines                                                    | 1                      |
+| verticalLinesHeight    | number              | Height of the vertical lines                                                       | chart height           |
 | 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                |

examples/BarChart/BarChartWithGivenNumberOfVerticalLines.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {View} from 'react-native';
+import {BarChart} from '../../src/BarChart';
+
+const BarChartWithGivenNumberOfVerticalLines = () => {
+  const data = [
+    {value: 15, label: 'Jan'},
+    {value: 40, label: 'Feb'},
+    {value: 10, label: 'Mar'},
+    {value: 30, label: 'Apr'},
+  ];
+  return (
+    <View>
+      <BarChart
+        data={data}
+        width={300}
+        showVerticalLines
+        noOfVerticalLines={7}
+        verticalLinesSpacing={40}
+        rulesType="solid"
+      />
+    </View>
+  );
+};
+
+export default BarChartWithGivenNumberOfVerticalLines;

examples/BarChart/SimpleBlueBarsVerticalLines.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import {View} from 'react-native';
+import {BarChart} from '../../src/BarChart';
+
+const SimpleBlueBarsVerticalLines = () => {
+  const barData1 = [
+    {value: 250, label: 'M'},
+    {value: 500, label: 'T', frontColor: '#177AD5'},
+    {value: 745, label: 'W', frontColor: '#177AD5'},
+    {value: 320, label: 'T'},
+    {value: 600, label: 'F', frontColor: '#177AD5'},
+    {value: 256, label: 'S'},
+    {value: 300, label: 'S'},
+  ];
+  return (
+    <View>
+      <BarChart
+        barWidth={22}
+        noOfSections={3}
+        barBorderRadius={4}
+        frontColor="lightgray"
+        data={barData1}
+        yAxisThickness={0}
+        xAxisThickness={0}
+        showVerticalLines
+      />
+    </View>
+  );
+};
+
+export default SimpleBlueBarsVerticalLines;

examples/LineChart/SimpleBlueLineWithGivenNumberOfVerticalLines.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import {View} from 'react-native';
+import {LineChart} from '../../src/LineChart';
+
+const SimpleBlueLineWithGivenNumberOfVerticalLines = () => {
+  const lineData = [
+    {value: 0},
+    {value: 20},
+    {value: 18},
+    {value: 40},
+    {value: 36},
+    {value: 60},
+    {value: 54},
+    {value: 85},
+  ];
+  return (
+    <View>
+      <LineChart
+        initialSpacing={0}
+        data={lineData}
+        spacing={25}
+        hideDataPoints
+        thickness={5}
+        hideRules
+        hideYAxisText
+        yAxisColor="#0BA5A4"
+        width={265}
+        showVerticalLines
+        noOfVerticalLines={12}
+        verticalLinesHeight={210}
+        verticalLinesColor="rgba(14,164,164,0.5)"
+        xAxisColor="#0BA5A4"
+        color="#0BA5A4"
+      />
+    </View>
+  );
+};
+
+export default SimpleBlueLineWithGivenNumberOfVerticalLines;

package.json

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

@@ -82,6 +82,7 @@ type PropTypes = {
   referenceLine3Position?: number;
   showVerticalLines?: Boolean;
   verticalLinesThickness?: number;
+  verticalLinesHeight?: number;
   verticalLinesColor?: ColorValue;
   verticalLinesZIndex?: number;
   noOfVerticalLines?: number;
@@ -348,6 +349,7 @@ export const BarChart = (props: PropTypes) => {
   const rulesColor = props.rulesColor || 'lightgray';
   const verticalLinesThickness =
     props.verticalLinesThickness === 0 ? 0 : props.verticalLinesThickness || 1;
+  const verticalLinesHeight = props.verticalLinesHeight;
   const verticalLinesColor = props.verticalLinesColor || 'lightgray';
   const verticalLinesZIndex = props.verticalLinesZIndex || -1;
   let verticalLinesAr = [];
@@ -1442,10 +1444,12 @@ export const BarChart = (props: PropTypes) => {
                     position: 'absolute',
                     zIndex: verticalLinesZIndex || -1,
                     marginBottom: xAxisThickness,
-                    height: containerHeight + 15 - xAxisThickness,
+                    height:
+                      verticalLinesHeight ||
+                      containerHeight + 15 - xAxisThickness,
                     width: verticalLinesThickness,
                     backgroundColor: verticalLinesColor,
-                    bottom: 60,
+                    bottom: 60 + labelsExtraHeight,
                     left: totalSpacing,
                   }}
                 />

src/LineChart/index.tsx

@@ -108,6 +108,7 @@ type propTypes = {
   showVerticalLines?: Boolean;
   verticalLinesUptoDataPoint?: Boolean;
   verticalLinesThickness?: number;
+  verticalLinesHeight?: number;
   verticalLinesColor?: ColorValue;
   verticalLinesZIndex?: number;
   noOfVerticalLines?: number;
@@ -1369,6 +1370,7 @@ export const LineChart = (props: propTypes) => {
   const rulesColor = props.rulesColor || 'lightgray';
   const verticalLinesThickness =
     props.verticalLinesThickness === 0 ? 0 : props.verticalLinesThickness || 1;
+  const verticalLinesHeight = props.verticalLinesHeight;
   const verticalLinesColor = props.verticalLinesColor || 'lightgray';
   const verticalLinesZIndex = props.verticalLinesZIndex || -1;
 
@@ -3310,11 +3312,12 @@ export const LineChart = (props: propTypes) => {
                     ? index < data.length
                       ? (data[index].value * containerHeight) / maxValue -
                         xAxisThickness
-                      : 0
-                    : containerHeight + 15 - xAxisThickness,
+                      : verticalLinesHeight || 0
+                    : verticalLinesHeight ||
+                      containerHeight + 15 - xAxisThickness,
                   width: verticalLinesThickness,
                   backgroundColor: verticalLinesColor,
-                  bottom: 60,
+                  bottom: 60 + labelsExtraHeight,
                   left: verticalLinesSpacing
                     ? verticalLinesSpacing * (index + 1)
                     : index * spacing + (initialSpacing - dataPointsWidth1 / 2),

src/todos.md

@@ -15,7 +15,9 @@
 9. Prepare a doc for labelsPosition in Pie and Donut charts
 8. Prepare a doc for adjustToWidth in Line and Area charts
 9. Prepare a doc for xAxisLabelTexts and xAxisLabelTextStyle in Bar, Line And Area Charts
-10. Prepare a doc for vertical lines to explain noOfVerticalLines and verticalLinesSpacing props.
+10. Prepare a doc for vertical lines to explain noOfVerticalLines and verticalLinesSpacing props. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/205
+11. Prepare a doc for negative marginBottom instead of marginTop for x axis labels. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/190
+
 
 ## Architecture Enhancement