react-native-gifted-charts 1.3.6 → 1.3.7

package/package.json

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

@@ -161,6 +161,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;
 
@@ -529,6 +531,7 @@ export const BarChart = (props: BarChartPropsType) => {
     scrollToEnd,
     scrollToIndex: props.scrollToIndex,
     scrollAnimation,
+    scrollEventThrottle,
     indicatorColor: props.indicatorColor,
     setSelectedIndex,
     spacing,

package/src/BarChart/types.ts

@@ -134,6 +134,7 @@ export type BarChartPropsType = {
   scrollToEnd?: boolean;
   scrollToIndex?: number;
   scrollAnimation?: boolean;
+  scrollEventThrottle?: number;
   labelsExtraHeight?: number;
   barBackgroundPattern?: Function;
   patternId?: String;

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;
@@ -240,6 +242,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     totalWidth,
     barWidth,
     labelsExtraHeight,
+    scrollEventThrottle,
   };
   const extendedContainerHeight = containerHeight + 10;
   const containerHeightIncludingBelowXAxis =
@@ -322,6 +325,9 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
         ? renderHorizSections(horizSectionProps)
         : null}
       <ScrollView
+        scrollEventThrottle={
+          props.scrollEventThrottle ? props.scrollEventThrottle : 16
+        }
         horizontal
         ref={scrollRef}
         style={[
@@ -340,7 +346,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),
@@ -410,9 +416,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}

package/src/LineChart/LineChartBicolor.tsx

@@ -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,

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
@@ -1827,7 +1830,9 @@ export const LineChart = (props: LineChartPropsType) => {
                 ? (item.value * containerHeight) / maxValue - xAxisThickness
                 : extendedContainerHeight - xAxisThickness
             }
-            fill={item.verticalLineColor || props.verticalLinesColor || 'lightgray'}
+            fill={
+              item.verticalLineColor || props.verticalLinesColor || 'lightgray'
+            }
           />
         );
       }
@@ -1841,6 +1846,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 +1876,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 +1929,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 +2042,7 @@ export const LineChart = (props: LineChartPropsType) => {
                 width: pointerLabelWidth,
               },
             ]}>
-            {pointerLabelComponent(pointerItemLocal)}
+            {pointerLabelComponent(pointerItemLocal, secondaryPointerItem)}
           </View>
         )}
       </View>
@@ -2320,6 +2337,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 +2434,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 +2601,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 +2698,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 +2732,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 +3009,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 +3020,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 +3080,7 @@ export const LineChart = (props: LineChartPropsType) => {
     scrollToEnd,
     scrollToIndex: props.scrollToIndex,
     scrollAnimation,
+    scrollEventThrottle,
     indicatorColor: props.indicatorColor,
     setSelectedIndex,
     spacing,

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

@@ -258,6 +258,7 @@ export type LineChartPropsType = {
   scrollToEnd?: boolean;
   scrollToIndex?: number;
   scrollAnimation?: boolean;
+  scrollEventThrottle?: number;
   noOfSectionsBelowXAxis?: number;
   labelsExtraHeight?: number;
   adjustToWidth?: boolean;
@@ -352,6 +353,7 @@ type Pointer = {
   pointer3Color?: ColorValue;
   pointer4Color?: ColorValue;
   pointer5Color?: ColorValue;
+  secondaryPointerColor?: ColorValue;
   pointerComponent?: Function;
   showPointerStrip?: boolean;
   pointerStripWidth?: number;
@@ -373,5 +375,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',
@@ -114,6 +118,7 @@ export const BarDefaults = {
   scrollToEnd: false,
   scrollAnimation: true,
   showScrollIndicator: false,
+  scrollEventThrottle: defaultScrollEventThrottle,
 
   side: '',
   isAnimated: false,
@@ -168,6 +173,7 @@ export const LineDefaults = {
   scrollToEnd: false,
   scrollAnimation: true,
   showScrollIndicator: false,
+  scrollEventThrottle: defaultScrollEventThrottle,
   showValuesAsDataPointsText: false,
 
   dataPointsHeight: 4,
@@ -221,6 +227,7 @@ export const defaultPointerConfig = {
   hidePointer3: false,
   hidePointer4: false,
   hidePointer5: false,
+  hideSecondaryPointer: false,
 };
 
 // Pie chart specific

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,
@@ -205,4 +211,6 @@ export type BarAndLineChartsWrapperTypes = {
   pointerIndex: number;
   pointerX: number;
   pointerY: number;
+
+  scrollEventThrottle: number;
 };