npm - react-native-gifted-charts - Versions diffs - 1.0.4 → 1.0.7 - Mend

react-native-gifted-charts 1.0.4 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +4 -0
package/package.json +1 -1
package/src/BarChart/Animated2DWithGradient.tsx +27 -7
package/src/BarChart/RenderBars.tsx +71 -21
package/src/BarChart/RenderStackBars.tsx +3 -1
package/src/BarChart/index.tsx +97 -55
package/src/LineChart/index.tsx +285 -98
package/src/todos.md +8 -0

package/README.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "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/Animated2DWithGradient.tsx CHANGED Viewed

@@ -32,6 +32,8 @@ type propTypes = {
   horizontal: Boolean;
   intactTopLabel: Boolean;
   barBorderRadius?: number;
+  containerHeight?: number;
+  maxValue?: number;
 };
 type itemType = {
   value?: number;
@@ -54,12 +56,19 @@ type itemType = {
 };
 const Animated2DWithGradient = (props: propTypes) => {
-  const {item, opacity, animationDuration, noGradient, noAnimation} = props;
+  const {
+    item,
+    opacity,
+    animationDuration,
+    noGradient,
+    noAnimation,
+    containerHeight,
+    maxValue,
+  } = props;
   const [height, setHeight] = useState(noAnimation ? props.height : 2);
   const [initialRender, setInitialRender] = useState(
     noAnimation ? false : true,
   );
-  // console.log('comes to animated2DWithGradient', item);
   useEffect(() => {
     if (!noAnimation) {
@@ -97,9 +106,19 @@ const Animated2DWithGradient = (props: propTypes) => {
             position: 'absolute',
             bottom: 0,
             width: '100%',
-            height: height,
+            height: noAnimation
+              ? (Math.abs(item.value) * (containerHeight || 200)) /
+                (maxValue || 200)
+              : height,
           }}>
-          <View style={{width: '100%', height: height}}>
+          <View
+            style={{
+              width: '100%',
+              height: noAnimation
+                ? (Math.abs(item.value) * (containerHeight || 200)) /
+                  (maxValue || 200)
+                : height,
+            }}>
             {noGradient ? (
               <View
                 style={[
@@ -223,13 +242,14 @@ const Animated2DWithGradient = (props: propTypes) => {
                   height: item.barWidth || 30,
                   width: item.barWidth || 30,
                   justifyContent:
-                    (props.horizontal && !props.intactTopLabel) || item.value < 0
+                    (props.horizontal && !props.intactTopLabel) ||
+                    item.value < 0
                       ? 'center'
                       : 'flex-end',
                   alignItems: 'center',
                   opacity: opacity,
                 },
-                item.value < 0 && {transform:[{rotate:'180deg'}]},
+                item.value < 0 && {transform: [{rotate: '180deg'}]},
                 props.horizontal &&
                   !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
                 item.topLabelContainerStyle,
@@ -243,4 +263,4 @@ const Animated2DWithGradient = (props: propTypes) => {
   );
 };
-export default Animated2DWithGradient;
+export default Animated2DWithGradient;

package/src/BarChart/RenderBars.tsx CHANGED Viewed

@@ -121,18 +121,29 @@ const RenderBars = (props: Props) => {
           rotateLabel
             ? props.horizontal
               ? {transform: [{rotate: '330deg'}]}
-              : {transform: [{rotate: value < 0 ? '240deg' : '60deg'}, {translateX: value < 0 ? 56 : 0}, {translateY: value < 0 ? 32 : 0}]}
+              : {
+                  transform: [
+                    {rotate: value < 0 ? '240deg' : '60deg'},
+                    {translateX: value < 0 ? 56 : 0},
+                    {translateY: value < 0 ? 32 : 0},
+                  ],
+                }
             : props.horizontal
             ? {transform: [{rotate: '-90deg'}]}
             : value < 0
-            ?{transform:[{rotate:'180deg'},{translateY:autoShiftLabels?0:32}]}
-            :{},
+            ? {
+                transform: [
+                  {rotate: '180deg'},
+                  {translateY: autoShiftLabels ? 0 : 32},
+                ],
+              }
+            : {},
         ]}>
         {item.labelComponent ? (
           item.labelComponent()
         ) : (
           <Text
-            style={[labelTextStyle, {textAlign: 'center'}]}
+            style={labelTextStyle || {textAlign: 'center'}}
             numberOfLines={1}>
             {label || ''}
           </Text>
@@ -141,7 +152,11 @@ const RenderBars = (props: Props) => {
     );
   };
-  const renderAnimatedLabel = (label: String, labelTextStyle: any, value: number) => {
+  const renderAnimatedLabel = (
+    label: String,
+    labelTextStyle: any,
+    value: number,
+  ) => {
     return (
       <Animated.View
         style={[
@@ -158,7 +173,7 @@ const RenderBars = (props: Props) => {
             bottom: rotateLabel ? -40 : -25,
             opacity: appearingOpacity,
           },
-          value < 0 && {transform:[{rotate:'180deg'}]},
+          value < 0 && {transform: [{rotate: '180deg'}]},
           rotateLabel
             ? props.horizontal
               ? {transform: [{rotate: '330deg'}]}
@@ -171,7 +186,7 @@ const RenderBars = (props: Props) => {
           item.labelComponent()
         ) : (
           <Text
-            style={[labelTextStyle, {textAlign: 'center'}]}
+            style={labelTextStyle || {textAlign: 'center'}}
             numberOfLines={1}>
             {label || ''}
           </Text>
@@ -255,7 +270,7 @@ const RenderBars = (props: Props) => {
                     : 'flex-end',
                 alignItems: 'center',
               },
-              item.value < 0 && {transform:[{rotate:'180deg'}]},
+              item.value < 0 && {transform: [{rotate: '180deg'}]},
               props.horizontal &&
                 !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
               item.topLabelContainerStyle,
@@ -277,13 +292,27 @@ const RenderBars = (props: Props) => {
           // overflow: 'visible',
           marginBottom: 60,
           width: item.barWidth || props.barWidth || 30,
-          height: 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),
+          height:
+            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),
           marginRight: spacing,
         },
-        item.value < 0 && {transform:[{translateY:(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)},{rotateZ:'180deg'}]},
+        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},
@@ -333,7 +362,10 @@ const RenderBars = (props: Props) => {
             topLabelComponent={item.topLabelComponent}
             opacity={opacity || 1}
             animationDuration={animationDuration || 800}
-            height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
+            height={
+              (Math.abs(item.value) * (containerHeight || 200)) /
+              (maxValue || 200)
+            }
             intactTopLabel={props.intactTopLabel}
             horizontal={props.horizontal}
           />
@@ -358,7 +390,10 @@ const RenderBars = (props: Props) => {
             opacity={opacity || 1}
             horizontal={props.horizontal}
             intactTopLabel={props.intactTopLabel}
-            height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
+            height={
+              (Math.abs(item.value) * (containerHeight || 200)) /
+              (maxValue || 200)
+            }
             value={item.value}
           />
         )
@@ -373,7 +408,12 @@ const RenderBars = (props: Props) => {
             roundedTop={props.roundedTop || false}
             gradientColor={props.gradientColor}
             frontColor={props.frontColor || 'black'}
-            height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
+            containerHeight={containerHeight}
+            maxValue={maxValue}
+            height={
+              (Math.abs(item.value) * (containerHeight || 200)) /
+              (maxValue || 200)
+            }
             cappedBars={props.cappedBars}
             capThickness={props.capThickness}
             capColor={props.capColor}
@@ -396,7 +436,12 @@ const RenderBars = (props: Props) => {
           gradientColor={props.gradientColor}
           noGradient
           frontColor={props.frontColor || 'black'}
-          height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
+          containerHeight={containerHeight}
+          maxValue={maxValue}
+          height={
+            (Math.abs(item.value) * (containerHeight || 200)) /
+            (maxValue || 200)
+          }
           cappedBars={props.cappedBars}
           capThickness={props.capThickness}
           capColor={props.capColor}
@@ -417,7 +462,12 @@ const RenderBars = (props: Props) => {
           noGradient
           noAnimation
           frontColor={props.frontColor || 'black'}
-          height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
+          containerHeight={containerHeight}
+          maxValue={maxValue}
+          height={
+            (Math.abs(item.value) * (containerHeight || 200)) /
+            (maxValue || 200)
+          }
           cappedBars={props.cappedBars}
           capThickness={props.capThickness}
           capColor={props.capColor}
@@ -428,10 +478,10 @@ const RenderBars = (props: Props) => {
         />
       )}
       {isAnimated
-        ? renderAnimatedLabel(item.label || '', item.labelTextStyle,item.value)
-        : renderLabel(item.label || '', item.labelTextStyle,item.value)}
+        ? renderAnimatedLabel(item.label || '', item.labelTextStyle, item.value)
+        : renderLabel(item.label || '', item.labelTextStyle, item.value)}
     </TouchableOpacity>
   );
 };
-export default RenderBars;
+export default RenderBars;

package/src/BarChart/RenderStackBars.tsx CHANGED Viewed

@@ -141,7 +141,9 @@ const RenderStackBars = (props: Props) => {
                         stackItem.borderBottomRightRadius || 0,
                     },
                 ]}
-              />
+              >
+                {stackItem.innerBarComponent && stackItem.innerBarComponent()}
+              </TouchableOpacity>
             );
           })}
         </View>

package/src/BarChart/index.tsx CHANGED Viewed

@@ -52,6 +52,7 @@ type PropTypes = {
   barWidth?: number;
   sideWidth?: number;
   showLine?: Boolean;
+  lineData?: any;
   lineConfig?: lineConfigType;
   cappedBars?: Boolean;
@@ -121,8 +122,10 @@ type PropTypes = {
   autoShiftLabels?: Boolean;
   scrollToEnd?: Boolean;
   scrollAnimation?: Boolean;
+  labelsExtraHeight?: number;
 };
 type lineConfigType = {
+  initialSpacing?: number;
   curved?: Boolean;
   isAnimated?: Boolean;
   delay?: number;
@@ -139,6 +142,8 @@ type lineConfigType = {
   textShiftX?: number;
   textShiftY?: number;
   shiftY?: number;
+  startIndex?: number;
+  endIndex?: number;
 };
 type referenceConfigType = {
   thickness: number;
@@ -174,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,
@@ -191,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,
@@ -219,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;
@@ -226,14 +248,15 @@ 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;
   const scrollAnimation = props.scrollAnimation === false ? false : true;
+  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);
@@ -245,7 +268,7 @@ export const BarChart = (props: PropTypes) => {
       if (stackSum > maxItem) {
         maxItem = stackSum;
       }
-      if(stackSum < minItem){
+      if (stackSum < minItem) {
         minItem = stackSum;
       }
       totalWidth +=
@@ -257,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 +=
@@ -271,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);
@@ -279,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));
     }
   }
@@ -288,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;
@@ -391,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);
@@ -439,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,
@@ -535,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) {
@@ -543,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(),
+      });
     }
   }
@@ -600,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={[
@@ -626,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>
@@ -743,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={[
@@ -757,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
@@ -775,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={{
@@ -801,7 +834,7 @@ export const BarChart = (props: PropTypes) => {
                 )}
               </View>
             </View>
-          )
+          );
         })}
       </>
     );
@@ -840,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') {
@@ -849,6 +885,7 @@ export const BarChart = (props: PropTypes) => {
             <Rect
               x={
                 yAxisLabelWidth +
+                lineConfig.initialSpacing +
                 6 -
                 (initialSpacing - currentBarWidth / 2) -
                 lineConfig.dataPointsWidth +
@@ -857,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}
@@ -871,6 +907,7 @@ export const BarChart = (props: PropTypes) => {
                 fontSize={item.textFontSize || lineConfig.textFontSize}
                 x={
                   yAxisLabelWidth +
+                  lineConfig.initialSpacing +
                   6 -
                   (initialSpacing - currentBarWidth / 2) -
                   lineConfig.dataPointsWidth +
@@ -880,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)
                 }>
@@ -896,6 +932,7 @@ export const BarChart = (props: PropTypes) => {
           <Circle
             cx={
               yAxisLabelWidth +
+              lineConfig.initialSpacing +
               6 -
               (initialSpacing - currentBarWidth / 2) -
               lineConfig.dataPointsWidth / 2 +
@@ -903,8 +940,7 @@ export const BarChart = (props: PropTypes) => {
             }
             cy={
               containerHeight -
-              lineConfig.shiftY +
-              10 -
+              lineConfig.shiftY -
               (item.value * containerHeight) / maxValue
             }
             r={lineConfig.dataPointsRadius}
@@ -916,6 +952,7 @@ export const BarChart = (props: PropTypes) => {
               fontSize={item.textFontSize || lineConfig.textFontSize}
               x={
                 yAxisLabelWidth +
+                lineConfig.initialSpacing +
                 6 -
                 (initialSpacing - currentBarWidth / 2) -
                 lineConfig.dataPointsWidth +
@@ -925,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)
               }>
@@ -1095,23 +1131,27 @@ export const BarChart = (props: PropTypes) => {
       style={[
         styles.container,
         {
-          height: containerHeight + horizSectionsBelow.length * stepHeight,
+          height:
+            containerHeight +
+            horizSectionsBelow.length * stepHeight +
+            labelsExtraHeight,
         },
-        yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness },
+        yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness},
         props.width && {width: props.width},
         horizontal && {transform: [{rotate: '90deg'}, {translateY: -15}]},
       ]}>
       {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,
           },
@@ -1122,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,
+            paddingBottom:
+              horizSectionsBelow.length * stepHeight + labelsExtraHeight,
             alignItems: 'flex-end',
           },
           !props.width && {width: totalWidth},
@@ -1219,4 +1261,4 @@ export const BarChart = (props: PropTypes) => {
       </ScrollView>
     </View>
   );
-};
+};

package/src/LineChart/index.tsx CHANGED Viewed

@@ -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,
@@ -966,7 +1038,7 @@ export const LineChart = (props: propTypes) => {
           labelComponent()
         ) : (
           <Text
-            style={[labelTextStyle, {textAlign: 'center'}]}
+            style={labelTextStyle || {textAlign: 'center'}}
             numberOfLines={1}>
             {label || ''}
           </Text>
@@ -1004,7 +1076,7 @@ export const LineChart = (props: propTypes) => {
           labelComponent()
         ) : (
           <Text
-            style={[labelTextStyle, {textAlign: 'center'}]}
+            style={labelTextStyle || {textAlign: 'center'}}
             numberOfLines={1}>
             {label || ''}
           </Text>
@@ -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;
       }
@@ -1476,16 +1617,26 @@ export const LineChart = (props: propTypes) => {
     endFillColor: string,
     startOpacity: number,
     endOpacity: number,
+    hideDataPoints: Boolean,
+    dataPointsShape,
+    dataPointsWidth,
+    dataPointsHeight,
+    dataPointsColor,
+    dataPointsRadius,
+    textColor,
+    textFontSize,
+    startIndex,
+    endIndex,
   ) => {
     return (
       <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,40 +1681,18 @@ export const LineChart = (props: propTypes) => {
           {renderSpecificVerticalLines(data)}
           {renderSpecificVerticalLines(data2)}
-          {!hideDataPoints1
+          {!hideDataPoints
             ? renderDataPoints(
                 data,
-                dataPointsShape1,
-                dataPointsWidth1,
-                dataPointsHeight1,
-                dataPointsColor1,
-                dataPointsRadius1,
-                textColor1,
-                textFontSize1,
-              )
-            : null}
-          {!hideDataPoints2
-            ? renderDataPoints(
-                data2,
-                dataPointsShape2,
-                dataPointsWidth2,
-                dataPointsHeight2,
-                dataPointsColor2,
-                dataPointsRadius2,
-                textColor2,
-                textFontSize2,
-              )
-            : null}
-          {!hideDataPoints3
-            ? renderDataPoints(
-                data3,
-                dataPointsShape3,
-                dataPointsWidth3,
-                dataPointsHeight3,
-                dataPointsColor3,
-                dataPointsRadius3,
-                textColor3,
-                textFontSize3,
+                dataPointsShape,
+                dataPointsWidth,
+                dataPointsHeight,
+                dataPointsColor,
+                dataPointsRadius,
+                textColor,
+                textFontSize,
+                startIndex,
+                endIndex,
               )
             : null}
         </Svg>
@@ -1581,13 +1710,23 @@ export const LineChart = (props: propTypes) => {
     endFillColor: string,
     startOpacity: number,
     endOpacity: number,
+    hideDataPoints: Boolean,
+    dataPointsShape,
+    dataPointsWidth,
+    dataPointsHeight,
+    dataPointsColor,
+    dataPointsRadius,
+    textColor,
+    textFontSize,
+    startIndex,
+    endIndex,
   ) => {
     // console.log('animatedWidth is-------->', animatedWidth);
     return (
       <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,40 +1776,18 @@ export const LineChart = (props: propTypes) => {
           {renderSpecificVerticalLines(data2)}
           {renderSpecificVerticalLines(data3)}
-          {!hideDataPoints1
+          {!hideDataPoints
             ? renderDataPoints(
                 data,
-                dataPointsShape1,
-                dataPointsWidth1,
-                dataPointsHeight1,
-                dataPointsColor1,
-                dataPointsRadius1,
-                textColor1,
-                textFontSize1,
-              )
-            : null}
-          {!hideDataPoints2
-            ? renderDataPoints(
-                data2,
-                dataPointsShape2,
-                dataPointsWidth2,
-                dataPointsHeight2,
-                dataPointsColor2,
-                dataPointsRadius2,
-                textColor2,
-                textFontSize2,
-              )
-            : null}
-          {!hideDataPoints3
-            ? renderDataPoints(
-                data3,
-                dataPointsShape3,
-                dataPointsWidth3,
-                dataPointsHeight3,
-                dataPointsColor3,
-                dataPointsRadius3,
-                textColor3,
-                textFontSize3,
+                dataPointsShape,
+                dataPointsWidth,
+                dataPointsHeight,
+                dataPointsColor,
+                dataPointsRadius,
+                textColor,
+                textFontSize,
+                startIndex,
+                endIndex,
               )
             : null}
         </Svg>
@@ -1679,30 +1796,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,
@@ -1759,6 +1886,16 @@ export const LineChart = (props: propTypes) => {
               endFillColor1,
               startOpacity1,
               endOpacity1,
+              hideDataPoints1,
+              dataPointsShape1,
+              dataPointsWidth1,
+              dataPointsHeight1,
+              dataPointsColor1,
+              dataPointsRadius1,
+              textColor1,
+              textFontSize1,
+              startIndex1,
+              endIndex1,
             )
           : renderLine(
               points,
@@ -1769,6 +1906,16 @@ export const LineChart = (props: propTypes) => {
               endFillColor1,
               startOpacity1,
               endOpacity1,
+              hideDataPoints1,
+              dataPointsShape1,
+              dataPointsWidth1,
+              dataPointsHeight1,
+              dataPointsColor1,
+              dataPointsRadius1,
+              textColor1,
+              textFontSize1,
+              startIndex1,
+              endIndex1,
             )}
         {points2
           ? isAnimated
@@ -1782,6 +1929,16 @@ export const LineChart = (props: propTypes) => {
                 endFillColor2,
                 startOpacity2,
                 endOpacity2,
+                hideDataPoints2,
+                dataPointsShape2,
+                dataPointsWidth2,
+                dataPointsHeight2,
+                dataPointsColor2,
+                dataPointsRadius2,
+                textColor2,
+                textFontSize2,
+                startIndex2,
+                endIndex2,
               )
             : renderLine(
                 points2,
@@ -1792,6 +1949,16 @@ export const LineChart = (props: propTypes) => {
                 endFillColor2,
                 startOpacity2,
                 endOpacity2,
+                hideDataPoints2,
+                dataPointsShape2,
+                dataPointsWidth2,
+                dataPointsHeight2,
+                dataPointsColor2,
+                dataPointsRadius2,
+                textColor2,
+                textFontSize2,
+                startIndex2,
+                endIndex2,
               )
           : null}
         {points3
@@ -1806,6 +1973,16 @@ export const LineChart = (props: propTypes) => {
                 endFillColor3,
                 startOpacity3,
                 endOpacity3,
+                hideDataPoints3,
+                dataPointsShape3,
+                dataPointsWidth3,
+                dataPointsHeight3,
+                dataPointsColor3,
+                dataPointsRadius3,
+                textColor3,
+                textFontSize3,
+                startIndex3,
+                endIndex3,
               )
             : renderLine(
                 points3,
@@ -1816,6 +1993,16 @@ export const LineChart = (props: propTypes) => {
                 endFillColor3,
                 startOpacity3,
                 endOpacity3,
+                hideDataPoints3,
+                dataPointsShape3,
+                dataPointsWidth3,
+                dataPointsHeight3,
+                dataPointsColor3,
+                dataPointsRadius3,
+                textColor3,
+                textFontSize3,
+                startIndex3,
+                endIndex3,
               )
           : null}
         {data.map((item: itemType, index: number) => {

package/src/todos.md ADDED Viewed

@@ -0,0 +1,8 @@
+## 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
+6. Prepare a doc for Line chart with breaks