react-native-gifted-charts 1.3.6 → 1.3.8

package/package.json

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

package/src/BarChart/index.tsx

@@ -149,6 +149,8 @@ export const BarChart = (props: BarChartPropsType) => {
             defaultLineConfig.arrowConfig?.showArrowBase,
         },
         customDataPoint: props.lineConfig.customDataPoint,
+        isSecondary:
+          props.lineConfig.isSecondary ?? defaultLineConfig.isSecondary,
       }
     : defaultLineConfig;
   const noOfSections = props.noOfSections ?? AxesAndRulesDefaults.noOfSections;
@@ -161,6 +163,8 @@ export const BarChart = (props: BarChartPropsType) => {
   const labelWidth = props.labelWidth ?? AxesAndRulesDefaults.labelWidth;
   const scrollToEnd = props.scrollToEnd ?? BarDefaults.scrollToEnd;
   const scrollAnimation = props.scrollAnimation ?? BarDefaults.scrollAnimation;
+  const scrollEventThrottle =
+    props.scrollEventThrottle ?? BarDefaults.scrollEventThrottle;
   const labelsExtraHeight =
     props.labelsExtraHeight ?? AxesAndRulesDefaults.labelsExtraHeight;
 
@@ -198,6 +202,20 @@ export const BarChart = (props: BarChartPropsType) => {
     });
   }
 
+  let secondaryMaxItem = 0,
+    secondaryMinItem = 0;
+
+  if (lineConfig.isSecondary) {
+    lineData.forEach((item: itemType) => {
+      if (item.value > secondaryMaxItem) {
+        secondaryMaxItem = item.value;
+      }
+      if (item.value < secondaryMinItem) {
+        secondaryMinItem = item.value;
+      }
+    });
+  }
+
   const maxAndMin = maxAndMinUtil(
     maxItem,
     minItem,
@@ -205,7 +223,17 @@ export const BarChart = (props: BarChartPropsType) => {
     props.showFractionalValues,
   );
 
+  const secondaryMaxAndMin = maxAndMinUtil(
+    secondaryMaxItem,
+    secondaryMinItem,
+    props.roundToDigits,
+    props.showFractionalValues,
+  );
+
   const maxValue = props.maxValue ?? maxAndMin.maxItem;
+  const secondaryMaxValue = lineConfig.isSecondary
+    ? secondaryMaxAndMin.maxItem
+    : maxValue;
   const mostNegativeValue = props.mostNegativeValue ?? maxAndMin.minItem;
 
   const stepValue = props.stepValue ?? maxValue / noOfSections;
@@ -298,7 +326,7 @@ export const BarChart = (props: BarChartPropsType) => {
               currentValue,
               lineConfig.shiftY,
               containerHeight,
-              maxValue,
+              lineConfig.isSecondary ? secondaryMaxValue : maxValue,
             ) +
             ' ';
         }
@@ -351,7 +379,7 @@ export const BarChart = (props: BarChartPropsType) => {
               currentValue,
               lineConfig.shiftY,
               containerHeight,
-              maxValue,
+              lineConfig.isSecondary ? secondaryMaxValue : maxValue,
             ),
           ]);
           let xx = svgPath(p1Array, lineConfig.curveType, lineConfig.curvature);
@@ -529,6 +557,7 @@ export const BarChart = (props: BarChartPropsType) => {
     scrollToEnd,
     scrollToIndex: props.scrollToIndex,
     scrollAnimation,
+    scrollEventThrottle,
     indicatorColor: props.indicatorColor,
     setSelectedIndex,
     spacing,
@@ -551,7 +580,11 @@ export const BarChart = (props: BarChartPropsType) => {
     noOfSections,
     showFractionalValues,
 
-    axesAndRulesProps: getAxesAndRulesProps(props, stepValue),
+    axesAndRulesProps: getAxesAndRulesProps(
+      props,
+      stepValue,
+      secondaryMaxValue,
+    ),
 
     yAxisLabelTexts: props.yAxisLabelTexts,
     yAxisOffset: props.yAxisOffset,

package/src/BarChart/types.ts

@@ -74,7 +74,7 @@ export type BarChartPropsType = {
   verticalLinesThickness?: number;
   verticalLinesHeight?: number;
   verticalLinesColor?: ColorValue;
-  verticalLinesType?: RuleType;
+  verticalLinesStrokeDashArray?: Array<number>;
   verticalLinesShift?: number;
   verticalLinesZIndex?: number;
   noOfVerticalLines?: number;
@@ -134,6 +134,7 @@ export type BarChartPropsType = {
   scrollToEnd?: boolean;
   scrollToIndex?: number;
   scrollAnimation?: boolean;
+  scrollEventThrottle?: number;
   labelsExtraHeight?: number;
   barBackgroundPattern?: Function;
   patternId?: String;
@@ -174,6 +175,7 @@ type lineConfigType = {
   showArrow?: boolean;
   arrowConfig?: arrowType;
   customDataPoint?: Function;
+  isSecondary?: boolean;
 };
 export type defaultLineConfigType = {
   initialSpacing: number;
@@ -202,6 +204,7 @@ export type defaultLineConfigType = {
   showArrow: boolean;
   arrowConfig: arrowType;
   customDataPoint?: Function;
+  isSecondary: boolean;
 };
 type arrowType = {
   length?: number;

package/src/Components/BarAndLineChartsWrapper/index.tsx

@@ -76,6 +76,8 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     pointerIndex,
     pointerX,
     pointerY,
+
+    scrollEventThrottle,
   } = props;
 
   let yAxisAtTop = rtl ? !props.yAxisAtTop : props.yAxisAtTop;
@@ -143,9 +145,9 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
   const verticalLinesColor =
     axesAndRulesProps.verticalLinesColor ??
     AxesAndRulesDefaults.verticalLinesColor;
-  const verticalLinesType =
-    axesAndRulesProps.verticalLinesType ??
-    AxesAndRulesDefaults.verticalLinesType;
+  const verticalLinesStrokeDashArray =
+    axesAndRulesProps.verticalLinesStrokeDashArray ??
+    AxesAndRulesDefaults.verticalLinesStrokeDashArray;
   const verticalLinesShift =
     axesAndRulesProps.verticalLinesShift ??
     AxesAndRulesDefaults.verticalLinesShift;
@@ -231,7 +233,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     spacing,
     containerHeight,
     lineConfig,
-    maxValue,
+    maxValue: secondaryYAxis?.maxValue ?? maxValue,
     animatedWidth,
     lineBehindBars,
     points,
@@ -240,6 +242,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     totalWidth,
     barWidth,
     labelsExtraHeight,
+    scrollEventThrottle,
   };
   const extendedContainerHeight = containerHeight + 10;
   const containerHeightIncludingBelowXAxis =
@@ -253,7 +256,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     verticalLinesHeight,
     verticalLinesThickness,
     verticalLinesColor,
-    verticalLinesType,
+    verticalLinesStrokeDashArray,
     verticalLinesShift,
     verticalLinesUptoDataPoint,
     xAxisThickness,
@@ -265,6 +268,8 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     maxValue,
     chartType,
     containerHeightIncludingBelowXAxis,
+    yAxisLabelWidth,
+    totalWidth,
   };
 
   const actualContainerHeight =
@@ -322,6 +327,9 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
         ? renderHorizSections(horizSectionProps)
         : null}
       <ScrollView
+        scrollEventThrottle={
+          props.scrollEventThrottle ? props.scrollEventThrottle : 16
+        }
         horizontal
         ref={scrollRef}
         style={[
@@ -340,7 +348,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
               60 +
               (chartType === chartTypes.LINE_BI_COLOR ? 0 : xAxisThickness),
           },
-          !!props.width && {width: props.width - 11},
+          !!props.width && {width: props.width},
           horizontal && {
             width:
               (props.width ?? totalWidth) + (props.width ? endSpacing : -20),
@@ -378,7 +386,9 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
         }}
         {...remainingScrollViewProps}>
         <Fragment>
-          {showVerticalLines && <RenderVerticalLines {...verticalLinesProps} />}
+          {showVerticalLines ? (
+            <RenderVerticalLines {...verticalLinesProps} />
+          ) : null}
           {
             // Only For Bar Charts-
             showLine ? <RenderLineInBarChart {...lineInBarChartProps} /> : null
@@ -410,9 +420,9 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
       </ScrollView>
       {
         // Only For Line Charts-
-        pointerConfig &&
-          getPointerProps &&
-          getPointerProps({pointerIndex, pointerX, pointerY})
+        pointerConfig && getPointerProps
+          ? getPointerProps({pointerIndex, pointerX, pointerY})
+          : null
       }
     </View>
   );

package/src/Components/BarAndLineChartsWrapper/renderHorizSections.tsx

@@ -125,7 +125,8 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
   );
   secondaryYAxisConfig.maxValue =
     secondaryYAxisConfig.maxValue ?? (maxItem || maxValue);
-  secondaryYAxisConfig.mostNegativeValue = secondaryYAxisConfig.mostNegativeValue ?? minItem;
+  secondaryYAxisConfig.mostNegativeValue =
+    secondaryYAxisConfig.mostNegativeValue ?? minItem;
   secondaryYAxisConfig.stepValue =
     secondaryYAxisConfig.stepValue ??
     secondaryYAxisConfig.maxValue /
@@ -391,6 +392,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
         {
           borderColor: yAxisColor,
           backgroundColor: backgroundColor,
+          width: (props.width || totalWidth - spacing) + endSpacing,
         },
         yAxisSide === yAxisSides.RIGHT
           ? {borderRightWidth: yAxisThickness}
@@ -798,13 +800,11 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
         /***********************************************************************************************/
         /*************************      Render the secondary Y Axis                *********************/
         /***********************************************************************************************/
-        secondaryYAxis && (
+        secondaryYAxis ? (
           <View
             style={{
               width: secondaryYAxisConfig.yAxisLabelWidth,
-              left: width
-                ? yAxisLabelWidth
-                : yAxisLabelWidth - (chartType === chartTypes.BAR ? 4 : 16),
+              left: width ? yAxisLabelWidth : yAxisLabelWidth - spacing,
               borderColor: secondaryYAxisConfig.yAxisColor,
               borderLeftWidth: secondaryYAxisConfig.yAxisThickness,
             }}>
@@ -815,7 +815,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
               ? renderSecondaryYaxisLabels(secondaryHorizSectionsBelow, true)
               : null}
           </View>
-        )
+        ) : null
       }
     </View>
   );

package/src/Components/BarAndLineChartsWrapper/renderVerticalLines.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
-import {chartTypes, ruleTypes} from '../../utils/constants';
+import {chartTypes} from '../../utils/constants';
+import {Line, Svg} from 'react-native-svg';
 
 const RenderVerticalLines = props => {
   const {
@@ -12,7 +13,7 @@ const RenderVerticalLines = props => {
     verticalLinesHeight,
     verticalLinesThickness,
     verticalLinesColor,
-    verticalLinesType,
+    verticalLinesStrokeDashArray,
     verticalLinesShift,
     verticalLinesUptoDataPoint,
     xAxisThickness,
@@ -24,6 +25,8 @@ const RenderVerticalLines = props => {
     maxValue,
     chartType,
     containerHeightIncludingBelowXAxis,
+    yAxisLabelWidth,
+    totalWidth,
   } = props;
 
   const getHeightOfVerticalLine = index => {
@@ -43,82 +46,86 @@ const RenderVerticalLines = props => {
     }
   };
 
-  return verticalLinesAr.map((item: any, index: number) => {
-    let totalSpacing = initialSpacing;
-    if (verticalLinesSpacing) {
-      totalSpacing = verticalLinesSpacing * (index + 1);
-    } else {
-      if (stackData) {
-        totalSpacing += (stackData[0].barWidth || barWidth || 30) / 2;
-      } else {
-        totalSpacing += (data[0].barWidth || barWidth || 30) / 2;
-      }
-      for (let i = 0; i < index; i++) {
-        let actualSpacing = spacing;
-        if (stackData) {
-          if (i >= stackData.length - 1) {
-            actualSpacing += (barWidth || 30) / 2;
+  const extendedContainerHeight = containerHeight + 10 + labelsExtraHeight;
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        height: extendedContainerHeight,
+        left: 36 - yAxisLabelWidth,
+        bottom: 60, //stepHeight * -0.5 + xAxisThickness,
+        width: totalWidth,
+        zIndex: verticalLinesZIndex || -1,
+      }}>
+      <Svg>
+        {verticalLinesAr.map((item: any, index: number) => {
+          let totalSpacing = initialSpacing;
+          if (verticalLinesSpacing) {
+            totalSpacing = verticalLinesSpacing * (index + 1);
           } else {
-            if (stackData[i].spacing || stackData[i].spacing === 0) {
-              actualSpacing = stackData[i].spacing;
-            }
-            if (stackData[i + 1].barWidth) {
-              actualSpacing += stackData[i + 1].barWidth;
+            if (stackData) {
+              totalSpacing += (stackData[0].barWidth || barWidth || 30) / 2;
             } else {
-              actualSpacing += barWidth || 30;
-            }
-          }
-        } else {
-          if (i >= data.length - 1) {
-            actualSpacing += (barWidth || 30) / 2;
-          } else {
-            if (data[i].spacing || data[i].spacing === 0) {
-              actualSpacing = data[i].spacing;
+              totalSpacing += (data[0].barWidth || barWidth || 30) / 2;
             }
-            if (data[i + 1].barWidth) {
-              actualSpacing += data[i + 1].barWidth;
-            } else {
-              actualSpacing += barWidth || 30;
+            for (let i = 0; i < index; i++) {
+              let actualSpacing = spacing;
+              if (stackData) {
+                if (i >= stackData.length - 1) {
+                  actualSpacing += (barWidth || 30) / 2;
+                } else {
+                  if (stackData[i].spacing || stackData[i].spacing === 0) {
+                    actualSpacing = stackData[i].spacing;
+                  }
+                  if (stackData[i + 1].barWidth) {
+                    actualSpacing += stackData[i + 1].barWidth;
+                  } else {
+                    actualSpacing += barWidth || 30;
+                  }
+                }
+              } else {
+                if (i >= data.length - 1) {
+                  actualSpacing += (barWidth || 30) / 2;
+                } else {
+                  if (data[i].spacing || data[i].spacing === 0) {
+                    actualSpacing = data[i].spacing;
+                  }
+                  if (data[i + 1].barWidth) {
+                    actualSpacing += data[i + 1].barWidth;
+                  } else {
+                    actualSpacing += barWidth || 30;
+                  }
+                }
+              }
+              totalSpacing += actualSpacing;
             }
           }
-        }
-        totalSpacing += actualSpacing;
-      }
-    }
 
-    return (
-      <View
-        key={index}
-        style={[
-          {
-            position: 'absolute',
-            zIndex: verticalLinesZIndex || -1,
-            height: getHeightOfVerticalLine(index),
-            width: verticalLinesThickness,
-            bottom: 60 + labelsExtraHeight,
-            left:
-              verticalLinesShift +
-              (chartType === chartTypes.BAR
-                ? totalSpacing
-                : verticalLinesSpacing
-                ? verticalLinesSpacing * (index + 1)
-                : index * spacing + (initialSpacing - 4 / 2)) -
-              verticalLinesThickness / 2,
-          },
-          verticalLinesType === ruleTypes.DASHED ||
-          verticalLinesType === ruleTypes.DOTTED
-            ? {
-                borderWidth: verticalLinesThickness,
-                borderStyle: verticalLinesType,
-                borderColor: verticalLinesColor,
-              }
-            : {
-                backgroundColor: verticalLinesColor,
-              },
-        ]}
-      />
-    );
-  });
+          const x =
+            verticalLinesShift +
+            (chartType === chartTypes.BAR
+              ? totalSpacing - 1
+              : verticalLinesSpacing
+              ? verticalLinesSpacing * (index + 1)
+              : index * spacing + (initialSpacing - 2));
+
+          return (
+            <Line
+              key={index}
+              x1={x}
+              y1={extendedContainerHeight - getHeightOfVerticalLine(index)}
+              x2={x}
+              y2={extendedContainerHeight}
+              stroke={verticalLinesColor || 'lightgray'}
+              strokeWidth={verticalLinesThickness || 2}
+              strokeDasharray={verticalLinesStrokeDashArray ?? ''}
+            />
+          );
+        })}
+      </Svg>
+    </View>
+  );
 };
 
 export default RenderVerticalLines;

package/src/LineChart/LineChartBicolor.tsx

@@ -90,7 +90,7 @@ type propTypes = {
   verticalLinesThickness?: number;
   verticalLinesHeight?: number;
   verticalLinesColor?: ColorValue;
-  verticalLinesType?: string;
+  verticalLinesStrokeDashArray?: Array<number>;
   verticalLinesShift?: number;
   verticalLinesZIndex?: number;
   noOfVerticalLines?: number;
@@ -180,6 +180,7 @@ type propTypes = {
   scrollToEnd?: boolean;
   scrollToIndex?: number;
   scrollAnimation?: boolean;
+  scrollEventThrottle?: number;
   noOfSectionsBelowXAxis?: number;
   labelsExtraHeight?: number;
   adjustToWidth?: boolean;
@@ -197,8 +198,8 @@ type referenceConfigType = {
 };
 type itemType = {
   value: number;
-  label: String;
-  labelComponent: Function;
+  label?: String;
+  labelComponent?: Function;
   labelTextStyle?: any;
   dataPointText?: string;
   textShiftX?: number;
@@ -274,6 +275,8 @@ export const LineChartBicolor = (props: propTypes) => {
 
   const scrollToEnd = props.scrollToEnd ?? LineDefaults.scrollToEnd;
   const scrollAnimation = props.scrollAnimation ?? LineDefaults.scrollAnimation;
+  const scrollEventThrottle =
+    props.scrollEventThrottle ?? LineDefaults.scrollEventThrottle;
 
   const opacValue = useMemo(() => new Animated.Value(0), []);
   const widthValue = useMemo(() => new Animated.Value(0), []);
@@ -700,7 +703,7 @@ export const LineChartBicolor = (props: propTypes) => {
     index: number,
     label: String,
     labelTextStyle: any,
-    labelComponent: Function,
+    labelComponent?: Function,
   ) => {
     return (
       <View
@@ -735,7 +738,7 @@ export const LineChartBicolor = (props: propTypes) => {
     index: number,
     label: String,
     labelTextStyle: any,
-    labelComponent: Function,
+    labelComponent?: Function,
   ) => {
     return (
       <Animated.View
@@ -1335,6 +1338,7 @@ export const LineChartBicolor = (props: propTypes) => {
     scrollToEnd,
     scrollToIndex: props.scrollToIndex,
     scrollAnimation,
+    scrollEventThrottle,
     indicatorColor: props.indicatorColor,
     setSelectedIndex,
     spacing,
@@ -1357,7 +1361,7 @@ export const LineChartBicolor = (props: propTypes) => {
     noOfSections,
     showFractionalValues,
 
-    axesAndRulesProps: getAxesAndRulesProps(props, stepValue),
+    axesAndRulesProps: getAxesAndRulesProps(props, stepValue, undefined),
 
     yAxisLabelTexts: props.yAxisLabelTexts,
     yAxisOffset: props.yAxisOffset,

package/src/LineChart/index.tsx

@@ -6,7 +6,15 @@ import React, {
   useState,
   useRef,
 } from 'react';
-import {View, Animated, Easing, Text, Dimensions, Platform, ColorValue} from 'react-native';
+import {
+  View,
+  Animated,
+  Easing,
+  Text,
+  Dimensions,
+  Platform,
+  ColorValue,
+} from 'react-native';
 import {styles} from './styles';
 import Svg, {
   Path,
@@ -32,6 +40,7 @@ import {
   chartTypes,
   defaultArrowConfig,
   defaultPointerConfig,
+  screenWidth,
 } from '../utils/constants';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
 import {LineChartPropsType, itemType} from './types';
@@ -78,6 +87,11 @@ export const LineChart = (props: LineChartPropsType) => {
     pointerShiftX: 0,
     pointerShiftY: 0,
   });
+  const [secondaryPointerY, setSecondaryPointerY] = useState(0);
+  const [secondaryPointerItem, setSecondaryPointerItem] = useState({
+    pointerShiftX: 0,
+    pointerShiftY: 0,
+  });
   const [responderStartTime, setResponderStartTime] = useState(0);
   const [responderActive, setResponderActive] = useState(false);
   const [points, setPoints] = useState('');
@@ -167,6 +181,8 @@ export const LineChart = (props: LineChartPropsType) => {
 
   const scrollToEnd = props.scrollToEnd || LineDefaults.scrollToEnd;
   const scrollAnimation = props.scrollAnimation ?? LineDefaults.scrollAnimation;
+  const scrollEventThrottle =
+    props.scrollEventThrottle ?? LineDefaults.scrollEventThrottle;
 
   const opacValue = useMemo(() => new Animated.Value(0), []);
   const widthValue = useMemo(() => new Animated.Value(0), []);
@@ -225,10 +241,16 @@ export const LineChart = (props: LineChartPropsType) => {
 
   const thickness = props.thickness || LineDefaults.thickness;
 
+  const yAxisLabelWidth =
+    props.yAxisLabelWidth ??
+    (props.hideYAxisText
+      ? AxesAndRulesDefaults.yAxisEmptyLabelWidth
+      : AxesAndRulesDefaults.yAxisLabelWidth);
+
   const spacing =
     props.spacing ??
     (adjustToWidth
-      ? ((props.width ?? AxesAndRulesDefaults.width) - initialSpacing) /
+      ? ((props.width ?? screenWidth - yAxisLabelWidth) - initialSpacing) /
         (data.length - 1)
       : LineDefaults.spacing);
 
@@ -1323,11 +1345,6 @@ export const LineChart = (props: LineChartPropsType) => {
   const horizontalRulesStyle = props.horizontalRulesStyle;
   const showFractionalValues =
     props.showFractionalValues ?? AxesAndRulesDefaults.showFractionalValues;
-  const yAxisLabelWidth =
-    props.yAxisLabelWidth ??
-    (props.hideYAxisText
-      ? AxesAndRulesDefaults.yAxisEmptyLabelWidth
-      : AxesAndRulesDefaults.yAxisLabelWidth);
 
   const horizontal = false;
   const yAxisAtTop = false;
@@ -1336,83 +1353,69 @@ export const LineChart = (props: LineChartPropsType) => {
 
   const pointerConfig = props.pointerConfig || null;
   const getPointerProps = props.getPointerProps || null;
-  const pointerHeight = pointerConfig?.height
-    ? pointerConfig.height
-    : defaultPointerConfig.height;
-  const pointerWidth = pointerConfig?.width
-    ? pointerConfig.width
-    : defaultPointerConfig.width;
-  const pointerRadius = pointerConfig?.radius
-    ? pointerConfig.radius
-    : defaultPointerConfig.radius;
-  const pointerColor = pointerConfig?.pointerColor
-    ? pointerConfig.pointerColor
-    : defaultPointerConfig.pointerColor;
-  const pointerComponent = pointerConfig?.pointerComponent
-    ? pointerConfig.pointerComponent
-    : defaultPointerConfig.pointerComponent;
+  const pointerHeight = pointerConfig?.height ?? defaultPointerConfig.height;
+  const pointerWidth = pointerConfig?.width ?? defaultPointerConfig.width;
+  const pointerRadius = pointerConfig?.radius ?? defaultPointerConfig.radius;
+  const pointerColor =
+    pointerConfig?.pointerColor ?? defaultPointerConfig.pointerColor;
+  const pointerComponent =
+    pointerConfig?.pointerComponent ?? defaultPointerConfig.pointerComponent;
 
   const showPointerStrip =
     pointerConfig?.showPointerStrip === false
       ? false
       : defaultPointerConfig.showPointerStrip;
-  const pointerStripHeight = pointerConfig?.pointerStripHeight
-    ? pointerConfig.pointerStripHeight
-    : defaultPointerConfig.pointerStripHeight;
-  const pointerStripWidth = pointerConfig?.pointerStripWidth
-    ? pointerConfig.pointerStripWidth
-    : defaultPointerConfig.pointerStripWidth;
-  const pointerStripColor = pointerConfig?.pointerStripColor
-    ? pointerConfig.pointerStripColor
-    : defaultPointerConfig.pointerStripColor;
-  const pointerStripUptoDataPoint = pointerConfig?.pointerStripUptoDataPoint
-    ? pointerConfig.pointerStripUptoDataPoint
-    : defaultPointerConfig.pointerStripUptoDataPoint;
-  const pointerLabelComponent = pointerConfig?.pointerLabelComponent
-    ? pointerConfig.pointerLabelComponent
-    : defaultPointerConfig.pointerLabelComponent;
-  const stripOverPointer = pointerConfig?.stripOverPointer
-    ? pointerConfig.stripOverPointer
-    : defaultPointerConfig.stripOverPointer;
-  const shiftPointerLabelX = pointerConfig?.shiftPointerLabelX
-    ? pointerConfig.shiftPointerLabelX
-    : defaultPointerConfig.shiftPointerLabelX;
-  const shiftPointerLabelY = pointerConfig?.shiftPointerLabelY
-    ? pointerConfig.shiftPointerLabelY
-    : defaultPointerConfig.shiftPointerLabelY;
-  const pointerLabelWidth = pointerConfig?.pointerLabelWidth
-    ? pointerConfig.pointerLabelWidth
-    : defaultPointerConfig.pointerLabelWidth;
-  const pointerLabelHeight = pointerConfig?.pointerLabelHeight
-    ? pointerConfig.pointerLabelHeight
-    : defaultPointerConfig.pointerLabelHeight;
+  const pointerStripHeight =
+    pointerConfig?.pointerStripHeight ??
+    defaultPointerConfig.pointerStripHeight;
+  const pointerStripWidth =
+    pointerConfig?.pointerStripWidth ?? defaultPointerConfig.pointerStripWidth;
+  const pointerStripColor =
+    pointerConfig?.pointerStripColor ?? defaultPointerConfig.pointerStripColor;
+  const pointerStripUptoDataPoint =
+    pointerConfig?.pointerStripUptoDataPoint ??
+    defaultPointerConfig.pointerStripUptoDataPoint;
+  const pointerLabelComponent =
+    pointerConfig?.pointerLabelComponent ??
+    defaultPointerConfig.pointerLabelComponent;
+  const stripOverPointer =
+    pointerConfig?.stripOverPointer ?? defaultPointerConfig.stripOverPointer;
+  const shiftPointerLabelX =
+    pointerConfig?.shiftPointerLabelX ??
+    defaultPointerConfig.shiftPointerLabelX;
+  const shiftPointerLabelY =
+    pointerConfig?.shiftPointerLabelY ??
+    defaultPointerConfig.shiftPointerLabelY;
+  const pointerLabelWidth =
+    pointerConfig?.pointerLabelWidth ?? defaultPointerConfig.pointerLabelWidth;
+  const pointerLabelHeight =
+    pointerConfig?.pointerLabelHeight ??
+    defaultPointerConfig.pointerLabelHeight;
   const autoAdjustPointerLabelPosition =
     pointerConfig?.autoAdjustPointerLabelPosition ??
     defaultPointerConfig.autoAdjustPointerLabelPosition;
-  const pointerVanishDelay = pointerConfig?.pointerVanishDelay
-    ? pointerConfig.pointerVanishDelay
-    : defaultPointerConfig.pointerVanishDelay;
-  const activatePointersOnLongPress = pointerConfig?.activatePointersOnLongPress
-    ? pointerConfig.activatePointersOnLongPress
-    : defaultPointerConfig.activatePointersOnLongPress;
-  const activatePointersDelay = pointerConfig?.activatePointersDelay
-    ? pointerConfig.activatePointersDelay
-    : defaultPointerConfig.activatePointersDelay;
-  const hidePointer1 = pointerConfig?.hidePointer1
-    ? pointerConfig.hidePointer1
-    : defaultPointerConfig.hidePointer1;
-  const hidePointer2 = pointerConfig?.hidePointer2
-    ? pointerConfig.hidePointer2
-    : defaultPointerConfig.hidePointer2;
-  const hidePointer3 = pointerConfig?.hidePointer3
-    ? pointerConfig.hidePointer3
-    : defaultPointerConfig.hidePointer3;
-  const hidePointer4 = pointerConfig?.hidePointer4
-    ? pointerConfig.hidePointer4
-    : defaultPointerConfig.hidePointer4;
-  const hidePointer5 = pointerConfig?.hidePointer5
-    ? pointerConfig.hidePointer5
-    : defaultPointerConfig.hidePointer5;
+  const pointerVanishDelay =
+    pointerConfig?.pointerVanishDelay ??
+    defaultPointerConfig.pointerVanishDelay;
+  const activatePointersOnLongPress =
+    pointerConfig?.activatePointersOnLongPress ??
+    defaultPointerConfig.activatePointersOnLongPress;
+  const activatePointersDelay =
+    pointerConfig?.activatePointersDelay ??
+    defaultPointerConfig.activatePointersDelay;
+  const hidePointer1 =
+    pointerConfig?.hidePointer1 ?? defaultPointerConfig.hidePointer1;
+  const hidePointer2 =
+    pointerConfig?.hidePointer2 ?? defaultPointerConfig.hidePointer2;
+  const hidePointer3 =
+    pointerConfig?.hidePointer3 ?? defaultPointerConfig.hidePointer3;
+  const hidePointer4 =
+    pointerConfig?.hidePointer4 ?? defaultPointerConfig.hidePointer4;
+  const hidePointer5 =
+    pointerConfig?.hidePointer5 ?? defaultPointerConfig.hidePointer5;
+  const hideSecondaryPointer =
+    pointerConfig?.hideSecondaryPointer ??
+    defaultPointerConfig.hideSecondaryPointer;
   const disableScroll =
     props.disableScroll ||
     (pointerConfig
@@ -1806,6 +1809,31 @@ export const LineChart = (props: LineChartPropsType) => {
   const renderSpecificVerticalLines = (dataForRender: any) => {
     return dataForRender.map((item: itemType, index: number) => {
       if (item.showVerticalLine) {
+        const x = getX(index);
+        return (
+          <Line
+            key={index}
+            x1={x}
+            y1={extendedContainerHeight}
+            x2={x}
+            y2={
+              item.verticalLineUptoDataPoint ?? props.verticalLinesUptoDataPoint
+                ? getY(item.value)
+                : -xAxisThickness
+            }
+            stroke={
+              item.verticalLineColor || props.verticalLinesColor || 'lightgray'
+            }
+            strokeWidth={
+              item.verticalLineThickness || props.verticalLinesThickness || 2
+            }
+            strokeDasharray={
+              item.verticalLineStrokeDashArray ??
+              props.verticalLinesStrokeDashArray ??
+              ''
+            }
+          />
+        );
         return (
           <Rect
             key={index}
@@ -1821,13 +1849,15 @@ export const LineChart = (props: LineChartPropsType) => {
                 ? getY(item.value)
                 : -xAxisThickness
             }
-            width={item.verticalLineThickness || 1}
+            width={item.verticalLineThickness || 10}
             height={
               item.verticalLineUptoDataPoint
                 ? (item.value * containerHeight) / maxValue - xAxisThickness
                 : extendedContainerHeight - xAxisThickness
             }
-            fill={item.verticalLineColor || props.verticalLinesColor || 'lightgray'}
+            fill={
+              item.verticalLineColor || props.verticalLinesColor || 'lightgray'
+            }
           />
         );
       }
@@ -1841,6 +1871,9 @@ export const LineChart = (props: LineChartPropsType) => {
     if (lineNumber === 3 && hidePointer3) return;
     if (lineNumber === 4 && hidePointer4) return;
     if (lineNumber === 5 && hidePointer5) return;
+    // 6 is for secondaryData
+    if (lineNumber === 6 && hideSecondaryPointer) return;
+
     let pointerItemLocal, pointerYLocal, pointerColorLocal;
     switch (lineNumber) {
       case 1:
@@ -1868,6 +1901,12 @@ export const LineChart = (props: LineChartPropsType) => {
         pointerYLocal = pointerY5;
         pointerColorLocal = pointerConfig?.pointer5Color || pointerColor;
         break;
+      case 6:
+        pointerItemLocal = secondaryPointerItem;
+        pointerYLocal = secondaryPointerY;
+        pointerColorLocal =
+          pointerConfig?.secondaryPointerColor || pointerColor;
+        break;
     }
 
     return (
@@ -1915,6 +1954,9 @@ export const LineChart = (props: LineChartPropsType) => {
       arr.push(pointerY5);
       pointerItemLocal.push(pointerItem5);
     }
+    if (secondaryPointerY !== 0) {
+      pointerItemLocal.push(secondaryPointerItem);
+    }
     pointerYLocal = Math.min(...arr);
 
     let left = 0,
@@ -2025,7 +2067,7 @@ export const LineChart = (props: LineChartPropsType) => {
                 width: pointerLabelWidth,
               },
             ]}>
-            {pointerLabelComponent(pointerItemLocal)}
+            {pointerLabelComponent(pointerItemLocal, secondaryPointerItem)}
           </View>
         )}
       </View>
@@ -2320,6 +2362,18 @@ export const LineChart = (props: LineChartPropsType) => {
               setPointerItem5(item);
             }
           }
+          if (secondaryData?.length) {
+            item = secondaryData[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setSecondaryPointerY(y);
+              setSecondaryPointerItem(item);
+            }
+          }
         }}
         onResponderMove={evt => {
           if (!pointerConfig) return;
@@ -2405,6 +2459,18 @@ export const LineChart = (props: LineChartPropsType) => {
               setPointerItem5(item);
             }
           }
+          if (secondaryData?.length) {
+            item = secondaryData[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setSecondaryPointerY(y);
+              setSecondaryPointerItem(item);
+            }
+          }
         }}
         // onResponderReject={evt => {
         //   console.log('evt...reject.......',evt);
@@ -2560,6 +2626,18 @@ export const LineChart = (props: LineChartPropsType) => {
               setPointerItem5(item);
             }
           }
+          if (secondaryData?.length) {
+            item = secondaryData[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setSecondaryPointerY(y);
+              setSecondaryPointerItem(item);
+            }
+          }
         }}
         onResponderMove={evt => {
           if (!pointerConfig) return;
@@ -2645,6 +2723,18 @@ export const LineChart = (props: LineChartPropsType) => {
               setPointerItem5(item);
             }
           }
+          if (secondaryData?.length) {
+            item = secondaryData[factor];
+            if (item) {
+              y =
+                containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+              setSecondaryPointerY(y);
+              setSecondaryPointerItem(item);
+            }
+          }
         }}
         // onResponderReject={evt => {
         //   console.log('evt...reject.......',evt);
@@ -2667,8 +2757,13 @@ export const LineChart = (props: LineChartPropsType) => {
         // }}
         style={{
           position: 'absolute',
-          height: containerHeightIncludingBelowXAxis,
-          bottom: 60, //stepHeight * -0.5 + xAxisThickness,
+          height:
+            containerHeightIncludingBelowXAxis +
+            (props.overflowBottom ?? dataPointsRadius1),
+          bottom:
+            60 +
+            labelsExtraHeight -
+            (props.overflowBottom ?? dataPointsRadius1),
           width: animatedWidth,
           zIndex: zIndex,
           // backgroundColor: 'wheat',
@@ -2939,8 +3034,7 @@ export const LineChart = (props: LineChartPropsType) => {
             style={{
               position: 'absolute',
               height:
-                extendedContainerHeight +
-                noOfSectionsBelowXAxis * stepHeight,
+                extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
               bottom: 60 + labelsExtraHeight,
               width: totalWidth,
               zIndex: 20,
@@ -2951,6 +3045,7 @@ export const LineChart = (props: LineChartPropsType) => {
             {points3 ? renderPointer(3) : null}
             {points4 ? renderPointer(4) : null}
             {points5 ? renderPointer(5) : null}
+            {secondaryPoints ? renderPointer(6) : null}
             {stripOverPointer && renderStripAndLabel()}
           </View>
         ) : null}
@@ -3010,6 +3105,7 @@ export const LineChart = (props: LineChartPropsType) => {
     scrollToEnd,
     scrollToIndex: props.scrollToIndex,
     scrollAnimation,
+    scrollEventThrottle,
     indicatorColor: props.indicatorColor,
     setSelectedIndex,
     spacing,
@@ -3032,7 +3128,7 @@ export const LineChart = (props: LineChartPropsType) => {
     noOfSections,
     showFractionalValues,
 
-    axesAndRulesProps: getAxesAndRulesProps(props, stepValue),
+    axesAndRulesProps: getAxesAndRulesProps(props, stepValue, undefined),
 
     yAxisLabelTexts: props.yAxisLabelTexts,
     yAxisOffset: props.yAxisOffset,

package/src/LineChart/styles.tsx

@@ -19,11 +19,11 @@ export const styles = StyleSheet.create({
   },
   leftPart: {
     justifyContent: 'center',
-    width: '100%',
+    // width: '100%',
   },
   lastLeftPart: {
     justifyContent: 'flex-end',
-    width: '100%',
+    // width: '100%',
   },
   line: {
     width: '100%',

package/src/LineChart/types.ts

@@ -89,7 +89,7 @@ export type LineChartPropsType = {
   verticalLinesThickness?: number;
   verticalLinesHeight?: number;
   verticalLinesColor?: ColorValue;
-  verticalLinesType?: string;
+  verticalLinesStrokeDashArray?: Array<number>;
   verticalLinesShift?: number;
   verticalLinesZIndex?: number;
   noOfVerticalLines?: number;
@@ -258,6 +258,7 @@ export type LineChartPropsType = {
   scrollToEnd?: boolean;
   scrollToIndex?: number;
   scrollAnimation?: boolean;
+  scrollEventThrottle?: number;
   noOfSectionsBelowXAxis?: number;
   labelsExtraHeight?: number;
   adjustToWidth?: boolean;
@@ -332,6 +333,7 @@ export type itemType = {
   verticalLineUptoDataPoint?: boolean;
   verticalLineColor?: string;
   verticalLineThickness?: number;
+  verticalLineStrokeDashArray?: Array<number>;
   pointerShiftX?: number;
   pointerShiftY?: number;
   onPress?: Function;
@@ -352,6 +354,7 @@ type Pointer = {
   pointer3Color?: ColorValue;
   pointer4Color?: ColorValue;
   pointer5Color?: ColorValue;
+  secondaryPointerColor?: ColorValue;
   pointerComponent?: Function;
   showPointerStrip?: boolean;
   pointerStripWidth?: number;
@@ -373,5 +376,6 @@ type Pointer = {
   hidePointer3?: boolean;
   hidePointer4?: boolean;
   hidePointer5?: boolean;
+  hideSecondaryPointer?: boolean;
   strokeDashArray?: Array<number>;
 };

package/src/utils/constants.ts

@@ -1,5 +1,6 @@
 import {defaultLineConfigType} from '../BarChart/types';
-import {CurveType} from './types';
+import {CurveType, RuleTypes} from './types';
+import {Dimensions} from 'react-native';
 
 // Global
 
@@ -9,9 +10,12 @@ export enum chartTypes {
   LINE_BI_COLOR,
 }
 
+export const screenWidth = Dimensions.get('window').width;
+
 const defaultCurvature = 0.2;
 const defaultCurveType = CurveType.CUBIC;
 const defaultAnimationDuration = 800;
+const defaultScrollEventThrottle = 0;
 
 // Bar and Line chart Specific
 
@@ -20,7 +24,7 @@ export enum yAxisSides {
   RIGHT,
 }
 
-export const ruleTypes = {
+export const ruleTypes: RuleTypes = {
   SOLID: 'solid',
   DASHED: 'dashed',
   DOTTED: 'dotted',
@@ -62,7 +66,7 @@ export const AxesAndRulesDefaults = {
   showVerticalLines: false,
   verticalLinesThickness: 1,
   verticalLinesColor: 'lightgray',
-  verticalLinesType: 'solid',
+  verticalLinesStrokeDashArray: '',
   verticalLinesShift: 0,
   verticalLinesZIndex: -1,
   verticalLinesSpacing: 0,
@@ -114,6 +118,7 @@ export const BarDefaults = {
   scrollToEnd: false,
   scrollAnimation: true,
   showScrollIndicator: false,
+  scrollEventThrottle: defaultScrollEventThrottle,
 
   side: '',
   isAnimated: false,
@@ -148,6 +153,7 @@ export const defaultLineConfig: defaultLineConfigType = {
   endIndex: 0, // gets updated to lineData.length - 1
   showArrow: false,
   arrowConfig: defaultArrowConfig,
+  isSecondary: false,
 };
 
 // Line chart specific
@@ -168,6 +174,7 @@ export const LineDefaults = {
   scrollToEnd: false,
   scrollAnimation: true,
   showScrollIndicator: false,
+  scrollEventThrottle: defaultScrollEventThrottle,
   showValuesAsDataPointsText: false,
 
   dataPointsHeight: 4,
@@ -221,6 +228,7 @@ export const defaultPointerConfig = {
   hidePointer3: false,
   hidePointer4: false,
   hidePointer5: false,
+  hideSecondaryPointer: false,
 };
 
 // Pie chart specific

package/src/utils/index.tsx

@@ -211,8 +211,8 @@ export const getArrowPoints = (
   return arrowPoints;
 };
 
-export const getAxesAndRulesProps = (props, stepValue) => {
-  return {
+export const getAxesAndRulesProps = (props, stepValue, maxValue) => {
+  const axesAndRulesProps = {
     yAxisSide: props.yAxisSide,
     yAxisLabelContainerStyle: props.yAxisLabelContainerStyle,
     yAxisColor: props.yAxisColor,
@@ -255,7 +255,6 @@ export const getAxesAndRulesProps = (props, stepValue) => {
     verticalLinesThickness: props.verticalLinesThickness,
     verticalLinesHeight: props.verticalLinesHeight,
     verticalLinesColor: props.verticalLinesColor,
-    verticalLinesType: props.verticalLinesType,
     verticalLinesShift: props.verticalLinesShift,
     verticalLinesZIndex: props.verticalLinesZIndex,
     verticalLinesSpacing: props.verticalLinesSpacing,
@@ -269,6 +268,11 @@ export const getAxesAndRulesProps = (props, stepValue) => {
 
     secondaryYAxis: props.secondaryYAxis,
   };
+  if (props.secondaryYAxis && maxValue !== undefined) {
+    axesAndRulesProps.secondaryYAxis = {...props.secondaryYAxis, maxValue};
+  }
+
+  return axesAndRulesProps;
 };
 
 export const getExtendedContainerHeightWithPadding = (

package/src/utils/types.ts

@@ -1,7 +1,13 @@
 import {ColorValue} from 'react-native';
 import {chartTypes, yAxisSides} from './constants';
 
-export type RuleType = 'solid' | 'dashed' | 'dotted';
+export type RuleType = 'solid' | 'dashed' | 'dotted' | string;
+
+export type RuleTypes = {
+  SOLID: RuleType;
+  DASHED: RuleType;
+  DOTTED: RuleType;
+};
 
 export enum CurveType {
   CUBIC,
@@ -65,6 +71,7 @@ export type secondaryLineConfigType = {
   textColor?: string;
   showArrow?: boolean;
   arrowConfig?: arrowConfigType;
+  isSecondary?: boolean;
 };
 
 export type arrowConfigType = {
@@ -205,4 +212,6 @@ export type BarAndLineChartsWrapperTypes = {
   pointerIndex: number;
   pointerX: number;
   pointerY: number;
+
+  scrollEventThrottle: number;
 };