react-native-gifted-charts 1.0.5 → 1.0.8

package/README.md

@@ -102,6 +102,10 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
 | **Invariant Violation: requireNativeComponent: "RNCWebView" was not found in the UIManager.**                                | install `react-native-webview`                                                                                                                                              |
 | Setting `height`, `maxValue`, `stepValue`, `stepHeight`, or `noOfSections` breaks the chart                                  | Please make sure that<br/> `maxValue = noOfSections * stepValue;` <br/>is followed. [See this](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/71) |
 
+## To-dos
+
+[To do list](./src/todos.md)
+
 ## License
 
 MIT

package/package.json

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

package/src/BarChart/index.tsx

@@ -52,6 +52,7 @@ type PropTypes = {
   barWidth?: number;
   sideWidth?: number;
   showLine?: Boolean;
+  lineData?: any;
   lineConfig?: lineConfigType;
 
   cappedBars?: Boolean;
@@ -124,6 +125,7 @@ type PropTypes = {
   labelsExtraHeight?: number;
 };
 type lineConfigType = {
+  initialSpacing?: number;
   curved?: Boolean;
   isAnimated?: Boolean;
   delay?: number;
@@ -140,6 +142,8 @@ type lineConfigType = {
   textShiftX?: number;
   textShiftY?: number;
   shiftY?: number;
+  startIndex?: number;
+  endIndex?: number;
 };
 type referenceConfigType = {
   thickness: number;
@@ -175,7 +179,12 @@ export const BarChart = (props: PropTypes) => {
   const scrollRef = useRef();
   const [points, setPoints] = useState('');
   const showLine = props.showLine || false;
+  const initialSpacing =
+    props.initialSpacing === 0 ? 0 : props.initialSpacing || 40;
+  const data = useMemo(() => props.data || [], [props.data]);
+  const lineData = props.lineData || data;
   const defaultLineConfig = {
+    initialSpacing: initialSpacing,
     curved: false,
     isAnimated: false,
     thickness: 1,
@@ -192,9 +201,16 @@ export const BarChart = (props: PropTypes) => {
     textShiftY: 0,
     shiftY: 0,
     delay: 0,
+    startIndex: 0,
+    endIndex: lineData.length - 1,
   };
   const lineConfig = props.lineConfig
     ? {
+        initialSpacing:
+          props.lineConfig.initialSpacing === 0
+            ? 0
+            : props.lineConfig.initialSpacing ||
+              defaultLineConfig.initialSpacing,
         curved: props.lineConfig.curved || defaultLineConfig.curved,
         isAnimated: props.lineConfig.isAnimated || defaultLineConfig.isAnimated,
         thickness: props.lineConfig.thickness || defaultLineConfig.thickness,
@@ -220,6 +236,11 @@ export const BarChart = (props: PropTypes) => {
         textShiftY: props.lineConfig.textShiftY || defaultLineConfig.textShiftY,
         shiftY: props.lineConfig.shiftY || defaultLineConfig.shiftY,
         delay: props.lineConfig.delay || defaultLineConfig.delay,
+        startIndex: props.lineConfig.startIndex || defaultLineConfig.startIndex,
+        endIndex:
+          props.lineConfig.endIndex === 0
+            ? 0
+            : props.lineConfig.endIndex || defaultLineConfig.endIndex,
       }
     : defaultLineConfig;
   const containerHeight = props.height || 200;
@@ -227,7 +248,6 @@ export const BarChart = (props: PropTypes) => {
   const horizSections = [{value: '0'}];
   const horizSectionsBelow = [];
   const stepHeight = props.stepHeight || containerHeight / noOfSections;
-  const data = useMemo(() => props.data || [], [props.data]);
   const spacing = props.spacing === 0 ? 0 : props.spacing ? props.spacing : 20;
   const labelWidth = props.labelWidth || 0;
   const scrollToEnd = props.scrollToEnd || false;
@@ -235,7 +255,8 @@ export const BarChart = (props: PropTypes) => {
   const labelsExtraHeight = props.labelsExtraHeight || 0;
 
   let totalWidth = spacing;
-  let maxItem = 0, minItem = 0;
+  let maxItem = 0,
+    minItem = 0;
   if (props.stackData) {
     props.stackData.forEach(stackItem => {
       // console.log('stackItem', stackItem);
@@ -247,7 +268,7 @@ export const BarChart = (props: PropTypes) => {
       if (stackSum > maxItem) {
         maxItem = stackSum;
       }
-      if(stackSum < minItem){
+      if (stackSum < minItem) {
         minItem = stackSum;
       }
       totalWidth +=
@@ -259,7 +280,7 @@ export const BarChart = (props: PropTypes) => {
       if (item.value > maxItem) {
         maxItem = item.value;
       }
-      if(item.value < minItem){
+      if (item.value < minItem) {
         minItem = item.value;
       }
       totalWidth +=
@@ -273,7 +294,7 @@ export const BarChart = (props: PropTypes) => {
     maxItem = maxItem + (10 - (maxItem % 10));
     maxItem /= 10 * (props.roundToDigits || 1);
     maxItem = parseFloat(maxItem.toFixed(props.roundToDigits || 1));
-    if(minItem !== 0){
+    if (minItem !== 0) {
       minItem *= 10 * (props.roundToDigits || 1);
       minItem = minItem - (10 + (minItem % 10));
       minItem /= 10 * (props.roundToDigits || 1);
@@ -281,8 +302,8 @@ export const BarChart = (props: PropTypes) => {
     }
   } else {
     maxItem = maxItem + (10 - (maxItem % 10));
-    if(minItem !== 0){
-      minItem = minItem - (10 + (minItem % 10))
+    if (minItem !== 0) {
+      minItem = minItem - (10 + (minItem % 10));
     }
   }
 
@@ -290,11 +311,10 @@ export const BarChart = (props: PropTypes) => {
   const minValue = props.minValue || minItem;
 
   const stepValue = props.stepValue || maxValue / noOfSections;
-  const noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis || (-minValue / stepValue);
+  const noOfSectionsBelowXAxis =
+    props.noOfSectionsBelowXAxis || -minValue / stepValue;
   const disableScroll = props.disableScroll || false;
   const showScrollIndicator = props.showScrollIndicator || false;
-  const initialSpacing =
-    props.initialSpacing === 0 ? 0 : props.initialSpacing || 40;
   // const oldData = props.oldData || [];
   const side = props.side || '';
   const rotateLabel = props.rotateLabel || false;
@@ -393,39 +413,41 @@ export const BarChart = (props: PropTypes) => {
     if (showLine) {
       let pp = '';
       if (!lineConfig.curved) {
-        for (let i = 0; i < data.length; i++) {
+        for (let i = 0; i < lineData.length; i++) {
+          if (i < lineConfig.startIndex || i > lineConfig.endIndex) continue;
           const currentBarWidth =
             (data && data[i] && data[i].barWidth) || props.barWidth || 30;
           pp +=
             'L' +
             (yAxisLabelWidth +
+              lineConfig.initialSpacing +
               6 -
               (initialSpacing - currentBarWidth / 2) -
               lineConfig.dataPointsWidth / 2 +
               (currentBarWidth + spacing) * i) +
             ' ' +
             (containerHeight -
-              lineConfig.shiftY +
-              10 -
-              (data[i].value * containerHeight) / maxValue) +
+              lineConfig.shiftY -
+              (lineData[i].value * containerHeight) / maxValue) +
             ' ';
         }
         setPoints(pp.replace('L', 'M'));
       } else {
         let p1Array = [];
-        for (let i = 0; i < data.length; i++) {
+        for (let i = 0; i < lineData.length; i++) {
+          if (i < lineConfig.startIndex || i > lineConfig.endIndex) continue;
           const currentBarWidth =
             (data && data[i] && data[i].barWidth) || props.barWidth || 30;
           p1Array.push([
             yAxisLabelWidth +
+              lineConfig.initialSpacing +
               6 -
               (initialSpacing - currentBarWidth / 2) -
               lineConfig.dataPointsWidth / 2 +
               (currentBarWidth + spacing) * i,
             containerHeight -
-              lineConfig.shiftY +
-              10 -
-              (data[i].value * containerHeight) / maxValue,
+              lineConfig.shiftY -
+              (lineData[i].value * containerHeight) / maxValue,
           ]);
           let xx = svgPath(p1Array, bezierCommand);
           setPoints(xx);
@@ -441,14 +463,18 @@ export const BarChart = (props: PropTypes) => {
     animationDuration,
     containerHeight,
     data,
+    lineData,
     decreaseWidth,
     initialSpacing,
     labelsAppear,
+    lineConfig.initialSpacing,
     lineConfig.curved,
     lineConfig.dataPointsWidth,
     lineConfig.shiftY,
     lineConfig.isAnimated,
     lineConfig.delay,
+    lineConfig.startIndex,
+    lineConfig.endIndex,
     maxValue,
     // moveBar,
     props.barWidth,
@@ -537,7 +563,7 @@ export const BarChart = (props: PropTypes) => {
         : value.toString(),
     });
   }
-  if(noOfSectionsBelowXAxis){
+  if (noOfSectionsBelowXAxis) {
     for (let i = 1; i <= noOfSectionsBelowXAxis; i++) {
       let value = stepValue * -i;
       if (props.showFractionalValues || props.roundToDigits) {
@@ -545,9 +571,10 @@ export const BarChart = (props: PropTypes) => {
       }
       horizSectionsBelow.push({
         value: props.yAxisLabelTexts
-        ? props.yAxisLabelTexts[noOfSectionsBelowXAxis - i] ?? value.toString()
-        : value.toString(),
-      })
+          ? props.yAxisLabelTexts[noOfSectionsBelowXAxis - i] ??
+            value.toString()
+          : value.toString(),
+      });
     }
   }
 
@@ -602,7 +629,7 @@ export const BarChart = (props: PropTypes) => {
                     ? props.width || totalWidth
                     : props.width || totalWidth + 11,
                 },
-                yAxisSide === 'right' && {transform:[{rotateY:'180deg'}]}
+                yAxisSide === 'right' && {transform: [{rotateY: '180deg'}]},
               ]}>
               <View
                 style={[
@@ -628,13 +655,16 @@ export const BarChart = (props: PropTypes) => {
                     style={[
                       yAxisTextStyle,
                       index === noOfSections && {marginBottom: stepHeight / -2},
-                      horizontal ? {
-                        transform: [
-                          {rotate: '270deg'},
-                          {translateY: yAxisAtTop ? 0 : 50},
-                        ],
-                      }:
-                      yAxisSide === 'right' && {transform:[{rotateY:'180deg'}]}
+                      horizontal
+                        ? {
+                            transform: [
+                              {rotate: '270deg'},
+                              {translateY: yAxisAtTop ? 0 : 50},
+                            ],
+                          }
+                        : yAxisSide === 'right' && {
+                            transform: [{rotateY: '180deg'}],
+                          },
                     ]}>
                     {label}
                   </Text>
@@ -745,7 +775,8 @@ export const BarChart = (props: PropTypes) => {
                     ? props.width || totalWidth
                     : props.width || totalWidth + 11,
                 },
-                index===0&&{marginTop:stepHeight/2}
+                yAxisSide === 'right' && {transform: [{rotateY: '180deg'}]},
+                index === 0 && {marginTop: stepHeight / 2},
               ]}>
               <View
                 style={[
@@ -759,10 +790,10 @@ export const BarChart = (props: PropTypes) => {
                       transform: [{translateX: totalWidth + yAxisThickness}],
                     },
                   {
-                    height: index===0?stepHeight*1.5:stepHeight,
+                    height: index === 0 ? stepHeight * 1.5 : stepHeight,
                     width: yAxisLabelWidth,
                   },
-                  index===0&&{marginTop:-stepHeight/2}
+                  index === 0 && {marginTop: -stepHeight / 2},
                 ]}>
                 {!hideYAxisText ? (
                   <Text
@@ -777,16 +808,16 @@ export const BarChart = (props: PropTypes) => {
                           {translateY: yAxisAtTop ? 0 : 50},
                         ],
                       },
+                      yAxisSide === 'right' && {
+                        transform: [{rotateY: '180deg'}],
+                      },
                     ]}>
                     {label}
                   </Text>
                 ) : null}
               </View>
               <View
-                style={[
-                   styles.leftPart,
-                   {backgroundColor: backgroundColor},
-                ]}>
+                style={[styles.leftPart, {backgroundColor: backgroundColor}]}>
                 {hideRules ? null : (
                   <Rule
                     config={{
@@ -803,7 +834,7 @@ export const BarChart = (props: PropTypes) => {
                 )}
               </View>
             </View>
-          )
+          );
         })}
       </>
     );
@@ -842,7 +873,10 @@ export const BarChart = (props: PropTypes) => {
   };
 
   const renderDataPoints = () => {
-    return data.map((item: any, index: number) => {
+    return lineData.map((item: any, index: number) => {
+      if (index < lineConfig.startIndex || index > lineConfig.endIndex){
+        return null;
+      }
       // console.log('comes in');
       const currentBarWidth = item.barWidth || props.barWidth || 30;
       if (lineConfig.dataPointsShape === 'rectangular') {
@@ -851,6 +885,7 @@ export const BarChart = (props: PropTypes) => {
             <Rect
               x={
                 yAxisLabelWidth +
+                lineConfig.initialSpacing +
                 6 -
                 (initialSpacing - currentBarWidth / 2) -
                 lineConfig.dataPointsWidth +
@@ -859,8 +894,7 @@ export const BarChart = (props: PropTypes) => {
               y={
                 containerHeight -
                 lineConfig.shiftY -
-                lineConfig.dataPointsHeight / 2 +
-                10 -
+                lineConfig.dataPointsHeight / 2 -
                 (item.value * containerHeight) / maxValue
               }
               width={lineConfig.dataPointsWidth}
@@ -873,6 +907,7 @@ export const BarChart = (props: PropTypes) => {
                 fontSize={item.textFontSize || lineConfig.textFontSize}
                 x={
                   yAxisLabelWidth +
+                  lineConfig.initialSpacing +
                   6 -
                   (initialSpacing - currentBarWidth / 2) -
                   lineConfig.dataPointsWidth +
@@ -882,8 +917,7 @@ export const BarChart = (props: PropTypes) => {
                 y={
                   containerHeight -
                   lineConfig.shiftY -
-                  lineConfig.dataPointsHeight / 2 +
-                  10 -
+                  lineConfig.dataPointsHeight / 2 -
                   (item.value * containerHeight) / maxValue +
                   (item.textShiftY || lineConfig.textShiftY || 0)
                 }>
@@ -898,6 +932,7 @@ export const BarChart = (props: PropTypes) => {
           <Circle
             cx={
               yAxisLabelWidth +
+              lineConfig.initialSpacing +
               6 -
               (initialSpacing - currentBarWidth / 2) -
               lineConfig.dataPointsWidth / 2 +
@@ -905,8 +940,7 @@ export const BarChart = (props: PropTypes) => {
             }
             cy={
               containerHeight -
-              lineConfig.shiftY +
-              10 -
+              lineConfig.shiftY -
               (item.value * containerHeight) / maxValue
             }
             r={lineConfig.dataPointsRadius}
@@ -918,6 +952,7 @@ export const BarChart = (props: PropTypes) => {
               fontSize={item.textFontSize || lineConfig.textFontSize}
               x={
                 yAxisLabelWidth +
+                lineConfig.initialSpacing +
                 6 -
                 (initialSpacing - currentBarWidth / 2) -
                 lineConfig.dataPointsWidth +
@@ -927,8 +962,7 @@ export const BarChart = (props: PropTypes) => {
               y={
                 containerHeight -
                 lineConfig.shiftY -
-                lineConfig.dataPointsHeight / 2 +
-                10 -
+                lineConfig.dataPointsHeight / 2 -
                 (item.value * containerHeight) / maxValue +
                 (item.textShiftY || lineConfig.textShiftY || 0)
               }>
@@ -1109,14 +1143,15 @@ export const BarChart = (props: PropTypes) => {
       {props.hideAxesAndRules !== true && renderHorizSections()}
       <ScrollView
         ref={scrollRef}
-        onContentSizeChange={()=>{
-          if(scrollRef.current && scrollToEnd){        
+        onContentSizeChange={() => {
+          if (scrollRef.current && scrollToEnd) {
             scrollRef.current.scrollToEnd({animated: scrollAnimation});
           }
         }}
         style={[
           {
-            marginLeft: yAxisSide === 'right' ? -yAxisLabelWidth+10 : yAxisLabelWidth,
+            marginLeft:
+              yAxisSide === 'right' ? -yAxisLabelWidth + 10 : yAxisLabelWidth,
             position: 'absolute',
             bottom: stepHeight * -0.5 - 60 + xAxisThickness,
           },
@@ -1127,9 +1162,11 @@ export const BarChart = (props: PropTypes) => {
         contentContainerStyle={[
           {
             // backgroundColor: 'yellow',
-            height: containerHeight + 130 + horizSectionsBelow.length * stepHeight,
+            height:
+              containerHeight + 130 + horizSectionsBelow.length * stepHeight,
             paddingLeft: initialSpacing,
-            paddingBottom:horizSectionsBelow.length * stepHeight + labelsExtraHeight,
+            paddingBottom:
+              horizSectionsBelow.length * stepHeight + labelsExtraHeight,
             alignItems: 'flex-end',
           },
           !props.width && {width: totalWidth},
@@ -1224,4 +1261,4 @@ export const BarChart = (props: PropTypes) => {
       </ScrollView>
     </View>
   );
-};
+};

package/src/LineChart/index.tsx

@@ -33,6 +33,7 @@ type propTypes = {
   height?: number;
   noOfSections?: number;
   maxValue?: number;
+  minValue?: number;
   stepHeight?: number;
   stepValue?: number;
   spacing?: number;
@@ -103,6 +104,15 @@ type propTypes = {
   yAxisIndicesColor?: ColorValue;
   yAxisSide?: string;
 
+  startIndex?: number;
+  startIndex1?: number;
+  startIndex2?: number;
+  startIndex3?: number;
+  endIndex?: number;
+  endIndex1?: number;
+  endIndex2?: number;
+  endIndex3?: number;
+
   color?: string;
   color1?: string;
   color2?: string;
@@ -192,6 +202,7 @@ type propTypes = {
   yAxisLabelSuffix?: String;
   scrollToEnd?: Boolean;
   scrollAnimation?: Boolean;
+  noOfSectionsBelowXAxis?: number;
 };
 type referenceConfigType = {
   thickness: number;
@@ -280,6 +291,27 @@ export const LineChart = (props: propTypes) => {
   const yAxisLabelSuffix = props.yAxisLabelSuffix || '';
   const yAxisSide = props.yAxisSide || 'left';
 
+  const startIndex1 =
+    props.startIndex1 === 0 ? 0 : props.startIndex1 || props.startIndex || 0;
+
+  let endIndex1;
+  if (props.endIndex1 === undefined || props.endIndex1 === null) {
+    if (props.endIndex === undefined || props.endIndex === null) {
+      endIndex1 = data.length - 1;
+    } else {
+      endIndex1 = props.endIndex;
+    }
+  } else {
+    endIndex1 = props.endIndex1;
+  }
+
+  const startIndex2 = props.startIndex2 || 0;
+  const endIndex2 =
+    props.endIndex2 === 0 ? 0 : props.endIndex2 || data2.length - 1;
+
+  const startIndex3 = props.startIndex3 || 0;
+  const endIndex3 =
+    props.endIndex3 === 0 ? 0 : props.endIndex3 || data3.length - 1;
 
   if (!initialData) {
     initialData = [...data];
@@ -456,15 +488,39 @@ export const LineChart = (props: propTypes) => {
   const xAxisColor = props.xAxisColor || 'black';
 
   let totalWidth = initialSpacing;
-  let maxItem = 0;
+  let maxItem = 0,
+    minItem = 0;
   data.forEach((item: itemType) => {
     if (item.value > maxItem) {
       maxItem = item.value;
     }
+    if (item.value < minItem) {
+      minItem = item.value;
+    }
     totalWidth += spacing;
   });
 
-  const maxValue = props.maxValue || maxItem || 10;
+  if (props.showFractionalValues || props.roundToDigits) {
+    maxItem *= 10 * (props.roundToDigits || 1);
+    maxItem = maxItem + (10 - (maxItem % 10));
+    maxItem /= 10 * (props.roundToDigits || 1);
+    maxItem = parseFloat(maxItem.toFixed(props.roundToDigits || 1));
+
+    if (minItem !== 0) {
+      minItem *= 10 * (props.roundToDigits || 1);
+      minItem = minItem - (10 + (minItem % 10));
+      minItem /= 10 * (props.roundToDigits || 1);
+      minItem = parseFloat(minItem.toFixed(props.roundToDigits || 1));
+    }
+  } else {
+    maxItem = maxItem + (10 - (maxItem % 10));
+    if (minItem !== 0) {
+      minItem = minItem - (10 + (minItem % 10));
+    }
+  }
+
+  const maxValue = props.maxValue || maxItem;
+  const minValue = props.minValue || minItem;
 
   useEffect(() => {
     // console.log('comes here............')
@@ -497,7 +553,7 @@ export const LineChart = (props: propTypes) => {
       pp3 = '';
     if (!props.curved) {
       for (let i = 0; i < data.length; i++) {
-        if (!animateOnDataChange) {
+        if (i >= startIndex1 && i <= endIndex1 && !animateOnDataChange) {
           pp +=
             'L' +
             (initialSpacing - dataPointsWidth1 / 2 + spacing * i) +
@@ -508,7 +564,7 @@ export const LineChart = (props: propTypes) => {
             ' ';
           setPoints(pp.replace('L', 'M'));
         }
-        if (data2.length) {
+        if (data2.length && i >= startIndex2 && i <= endIndex2) {
           pp2 +=
             'L' +
             (initialSpacing - dataPointsWidth2 / 2 + spacing * i) +
@@ -518,7 +574,7 @@ export const LineChart = (props: propTypes) => {
               (data2[i].value * containerHeight) / maxValue) +
             ' ';
         }
-        if (data3.length) {
+        if (data3.length && i >= startIndex3 && i <= endIndex3) {
           pp3 +=
             'L' +
             (initialSpacing - dataPointsWidth3 / 2 + spacing * i) +
@@ -622,11 +678,13 @@ export const LineChart = (props: propTypes) => {
         p2Array = [],
         p3Array = [];
       for (let i = 0; i < data.length; i++) {
-        p1Array.push([
-          initialSpacing - dataPointsWidth1 / 2 + spacing * i,
-          containerHeight + 10 - (data[i].value * containerHeight) / maxValue,
-        ]);
-        if (data2.length) {
+        if (i >= startIndex1 && i <= endIndex1) {
+          p1Array.push([
+            initialSpacing - dataPointsWidth1 / 2 + spacing * i,
+            containerHeight + 10 - (data[i].value * containerHeight) / maxValue,
+          ]);
+        }
+        if (data2.length && i >= startIndex2 && i <= endIndex2) {
           p2Array.push([
             initialSpacing - dataPointsWidth2 / 2 + spacing * i,
             containerHeight +
@@ -634,7 +692,7 @@ export const LineChart = (props: propTypes) => {
               (data2[i].value * containerHeight) / maxValue,
           ]);
         }
-        if (data3.length) {
+        if (data3.length && i >= startIndex3 && i <= endIndex3) {
           p3Array.push([
             initialSpacing - dataPointsWidth3 / 2 + spacing * i,
             containerHeight +
@@ -765,20 +823,20 @@ export const LineChart = (props: propTypes) => {
     props.curved,
     spacing,
     xAxisThickness,
+    startIndex1,
+    endIndex1,
+    startIndex2,
+    endIndex2,
+    startIndex3,
+    endIndex3,
   ]);
 
-  if (props.showFractionalValues || props.roundToDigits) {
-    maxItem *= 10 * (props.roundToDigits || 1);
-    maxItem = maxItem + (10 - (maxItem % 10));
-    maxItem /= 10 * (props.roundToDigits || 1);
-    maxItem = parseFloat(maxItem.toFixed(props.roundToDigits || 1));
-  } else {
-    maxItem = maxItem + (10 - (maxItem % 10));
-  }
-
   const horizSections = [{value: '0'}];
+  const horizSectionsBelow = [];
   const stepHeight = props.stepHeight || containerHeight / noOfSections;
   const stepValue = props.stepValue || maxValue / noOfSections;
+  const noOfSectionsBelowXAxis =
+    props.noOfSectionsBelowXAxis || -minValue / stepValue;
   const thickness1 = props.thickness1;
   const thickness2 = props.thickness2;
   const thickness3 = props.thickness3;
@@ -939,6 +997,20 @@ export const LineChart = (props: propTypes) => {
         : value.toString(),
     });
   }
+  if (noOfSectionsBelowXAxis) {
+    for (let i = 1; i <= noOfSectionsBelowXAxis; i++) {
+      let value = stepValue * -i;
+      if (props.showFractionalValues || props.roundToDigits) {
+        value = parseFloat(value.toFixed(props.roundToDigits || 1));
+      }
+      horizSectionsBelow.push({
+        value: props.yAxisLabelTexts
+          ? props.yAxisLabelTexts[noOfSectionsBelowXAxis - i] ??
+            value.toString()
+          : value.toString(),
+      });
+    }
+  }
 
   const renderLabel = (
     index: number,
@@ -1078,7 +1150,7 @@ export const LineChart = (props: propTypes) => {
                   {
                     width: (props.width ? props.width : totalWidth) + 15,
                   },
-                  yAxisSide === 'right' && {transform:[{rotateY:'180deg'}]}
+                  yAxisSide === 'right' && {transform: [{rotateY: '180deg'}]},
                 ]}>
                 <View
                   style={[
@@ -1095,7 +1167,9 @@ export const LineChart = (props: propTypes) => {
                       ellipsizeMode={'clip'}
                       style={[
                         yAxisTextStyle,
-                        yAxisSide === 'right' && {transform:[{rotateY:'180deg'}]},
+                        yAxisSide === 'right' && {
+                          transform: [{rotateY: '180deg'}],
+                        },
                         index === noOfSections && {
                           marginBottom: stepHeight / -2,
                         },
@@ -1190,6 +1264,70 @@ export const LineChart = (props: propTypes) => {
               </View>
             );
           })}
+
+        {horizSectionsBelow.map((sectionItems, index) => {
+          let label = getLabel(sectionItems.value);
+          if (hideOrigin && index === horizSections.length - 1) {
+            label = '';
+          }
+          return (
+            <View
+              key={index}
+              style={[
+                styles.horizBar,
+                {
+                  width: (props.width ? props.width : totalWidth) + 15,
+                },
+                index === 0 && {marginTop: stepHeight / 2},
+                yAxisSide === 'right' && {transform: [{rotateY: '180deg'}]},
+              ]}>
+              <View
+                style={[
+                  styles.leftLabel,
+                  {
+                    borderRightWidth: yAxisThickness,
+                    borderColor: yAxisColor,
+                    marginLeft: 1,
+                  },
+                  {
+                    height: index === 0 ? stepHeight * 1.5 : stepHeight,
+                    width: yAxisLabelWidth,
+                  },
+                  index === 0 && {marginTop: -stepHeight / 2},
+                ]}>
+                {!hideYAxisText ? (
+                  <Text
+                    numberOfLines={1}
+                    ellipsizeMode={'clip'}
+                    style={[
+                      yAxisTextStyle,
+                      index === 0 && {marginBottom: stepHeight / -2},
+                      yAxisSide === 'right' && {
+                        transform: [{rotateY: '180deg'}],
+                      },
+                    ]}>
+                    {label}
+                  </Text>
+                ) : null}
+              </View>
+              <View
+                style={[styles.leftPart, {backgroundColor: backgroundColor}]}>
+                {hideRules ? null : (
+                  <Rule
+                    config={{
+                      thickness: rulesThickness,
+                      color: rulesColor,
+                      width: (props.width || totalWidth) + 11,
+                      dashWidth: dashWidth,
+                      dashGap: dashGap,
+                      type: rulesType,
+                    }}
+                  />
+                )}
+              </View>
+            </View>
+          );
+        })}
       </>
     );
   };
@@ -1210,8 +1348,11 @@ export const LineChart = (props: propTypes) => {
     dataPtsRadius,
     textColor,
     textFontSize,
+    startIndex,
+    endIndex,
   ) => {
     return dataForRender.map((item: itemType, index: number) => {
+      if (index < startIndex || index > endIndex) return null;
       if (item.hideDataPoint) {
         return null;
       }
@@ -1418,7 +1559,7 @@ export const LineChart = (props: propTypes) => {
                 {dataPointLabelComponent()}
               </View>
             ) : null
-          ) : text ? (
+          ) : text || item.dataPointText ? (
             !showTextOnPress || index === selectedIndex ? (
               <CanvasText
                 fill={item.textColor || textColor}
@@ -1436,7 +1577,7 @@ export const LineChart = (props: propTypes) => {
                   (item.value * containerHeight) / maxValue +
                   (item.textShiftY || props.textShiftY || 0)
                 }>
-                {text}
+                {!showTextOnPress ? item.dataPointText : text}
               </CanvasText>
             ) : null
           ) : null}
@@ -1481,11 +1622,11 @@ export const LineChart = (props: propTypes) => {
       <View
         style={{
           position: 'absolute',
-          height: containerHeight + 10,
+          height: containerHeight + 10 + horizSectionsBelow.length * stepHeight,
           bottom: 60, //stepHeight * -0.5 + xAxisThickness,
           width: totalWidth,
           zIndex: -1,
-          // backgroundColor: 'rgba(200,150,150,0.1)'
+          // backgroundColor: 'rgba(200,150,150,0.6)'
         }}>
         <Svg>
           <Path
@@ -1530,6 +1671,7 @@ export const LineChart = (props: propTypes) => {
           {renderSpecificVerticalLines(data)}
           {renderSpecificVerticalLines(data2)}
 
+          {/***  !!! Here it's done thrice intentionally, trying to make it to only 1 breaks things !!!  ***/}
           {!hideDataPoints1
             ? renderDataPoints(
                 data,
@@ -1540,6 +1682,8 @@ export const LineChart = (props: propTypes) => {
                 dataPointsRadius1,
                 textColor1,
                 textFontSize1,
+                startIndex1,
+                endIndex1,
               )
             : null}
           {!hideDataPoints2
@@ -1552,6 +1696,8 @@ export const LineChart = (props: propTypes) => {
                 dataPointsRadius2,
                 textColor2,
                 textFontSize2,
+                startIndex2,
+                endIndex2,
               )
             : null}
           {!hideDataPoints3
@@ -1564,6 +1710,8 @@ export const LineChart = (props: propTypes) => {
                 dataPointsRadius3,
                 textColor3,
                 textFontSize3,
+                startIndex3,
+                endIndex3,
               )
             : null}
         </Svg>
@@ -1587,7 +1735,7 @@ export const LineChart = (props: propTypes) => {
       <Animated.View
         style={{
           position: 'absolute',
-          height: containerHeight + 10,
+          height: containerHeight + 10 + horizSectionsBelow.length * stepHeight,
           bottom: 60, //stepHeight * -0.5 + xAxisThickness,
           width: animatedWidth,
           zIndex: -1,
@@ -1637,6 +1785,7 @@ export const LineChart = (props: propTypes) => {
           {renderSpecificVerticalLines(data2)}
           {renderSpecificVerticalLines(data3)}
 
+          {/***  !!! Here it's done thrice intentionally, trying to make it to only 1 breaks things !!!  ***/}
           {!hideDataPoints1
             ? renderDataPoints(
                 data,
@@ -1647,6 +1796,8 @@ export const LineChart = (props: propTypes) => {
                 dataPointsRadius1,
                 textColor1,
                 textFontSize1,
+                startIndex1,
+                endIndex1,
               )
             : null}
           {!hideDataPoints2
@@ -1659,6 +1810,8 @@ export const LineChart = (props: propTypes) => {
                 dataPointsRadius2,
                 textColor2,
                 textFontSize2,
+                startIndex2,
+                endIndex2,
               )
             : null}
           {!hideDataPoints3
@@ -1671,6 +1824,8 @@ export const LineChart = (props: propTypes) => {
                 dataPointsRadius3,
                 textColor3,
                 textFontSize3,
+                startIndex3,
+                endIndex3,
               )
             : null}
         </Svg>
@@ -1679,30 +1834,40 @@ export const LineChart = (props: propTypes) => {
   };
 
   return (
-    <View style={[styles.container, {height: containerHeight}, yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness }]}>
+    <View
+      style={[
+        styles.container,
+        {height: containerHeight + horizSectionsBelow.length * stepHeight},
+        yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness},
+      ]}>
       {props.hideAxesAndRules !== true && renderHorizSections()}
       {/* {sectionsOverlay()} */}
       <ScrollView
         horizontal
         contentContainerStyle={[
           {
-            height: containerHeight + 130,
-            width: totalWidth -20,
+            height:
+              containerHeight + 130 + horizSectionsBelow.length * stepHeight,
+            width: totalWidth - 20,
+            paddingBottom: horizSectionsBelow.length * stepHeight,
             // backgroundColor: 'yellow'
           },
-          !props.width && {width: totalWidth -20},
+          !props.width && {width: totalWidth - 20},
         ]}
         scrollEnabled={!disableScroll}
         ref={scrollRef}
-        onContentSizeChange={()=>{
-          if(scrollRef.current && scrollToEnd){        
+        onContentSizeChange={() => {
+          if (scrollRef.current && scrollToEnd) {
             scrollRef.current.scrollToEnd({animated: scrollAnimation});
           }
         }}
         showsHorizontalScrollIndicator={showScrollIndicator}
         style={[
           {
-            marginLeft: yAxisSide === 'right' ? -yAxisLabelWidth - yAxisThickness + 6 : yAxisLabelWidth + yAxisThickness,
+            marginLeft:
+              yAxisSide === 'right'
+                ? -yAxisLabelWidth - yAxisThickness + 6
+                : yAxisLabelWidth + yAxisThickness,
             position: 'absolute',
             bottom: stepHeight * -0.5 - 60, //stepHeight * -0.5 + xAxisThickness,
             paddingRight: 100,

package/src/todos.md

@@ -0,0 +1,7 @@
+## To-dos in documentation-
+
+1. Prepare a doc for Bar chart with negative values
+2. Prepare a doc for Line chart with negative values
+3. Prepare a doc for Bar chart with y axis on right side
+4. Prepare a doc for Line chart with y axis on right side
+5. Prepare a doc for Bar chart combined with Line chart having a separate data for the Line chart