gifted-charts-core 0.0.21 → 0.0.22

package/src/BarChart/index.ts

@@ -1,5 +1,10 @@
-import { useEffect, useMemo, useState } from "react";
-import { BarChartPropsType, barDataItem } from "./types";
+import { useEffect, useMemo, useState } from 'react'
+import {
+  type lineConfigType,
+  type BarChartPropsType,
+  type barDataItem,
+  type stackDataItem
+} from './types'
 import {
   getArrowPoints,
   getAxesAndRulesProps,
@@ -11,164 +16,170 @@ import {
   getXForLineInBar,
   getYForLineInBar,
   maxAndMinUtil,
-  svgPath,
-} from "../utils";
+  svgPath
+} from '../utils'
 import {
   AxesAndRulesDefaults,
   BarDefaults,
   chartTypes,
   defaultLineConfig,
-  defaultPointerConfig,
-} from "../utils/constants";
-import { BarAndLineChartsWrapperTypes } from "../utils/types";
-
-interface extendedBarChartPropsType extends BarChartPropsType {
-  heightValue;
-  widthValue;
-  opacValue;
+  defaultPointerConfig
+} from '../utils/constants'
+import {
+  type BarAndLineChartsWrapperTypes,
+  type secondaryYAxisType
+} from '../utils/types'
+import { type Animated } from 'react-native'
+
+export interface extendedBarChartPropsType extends BarChartPropsType {
+  heightValue: Animated.Value
+  widthValue: Animated.Value
+  opacValue: Animated.Value
+  verticalLinesUptoDataPoint?: boolean
+  secondaryYAxis?: secondaryYAxisType
 }
 
 export const useBarChart = (props: extendedBarChartPropsType) => {
-  const { heightValue, widthValue, opacValue } = props;
-  const [points, setPoints] = useState("");
-  const [points2, setPoints2] = useState("");
-  const [arrowPoints, setArrowPoints] = useState("");
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-  const showLine = props.showLine || BarDefaults.showLine;
-  const spacing = props.spacing ?? BarDefaults.spacing;
-  const initialSpacing = props.initialSpacing ?? spacing;
-  const endSpacing = props.endSpacing ?? spacing;
+  const { heightValue, widthValue, opacValue } = props
+  const [points, setPoints] = useState('')
+  const [points2, setPoints2] = useState('')
+  const [arrowPoints, setArrowPoints] = useState('')
+  const [selectedIndex, setSelectedIndex] = useState(-1)
+  const showLine = props.showLine ?? BarDefaults.showLine
+  const spacing = props.spacing ?? BarDefaults.spacing
+  const initialSpacing = props.initialSpacing ?? spacing
+  const endSpacing = props.endSpacing ?? spacing
   const showFractionalValues =
-    props.showFractionalValues || AxesAndRulesDefaults.showFractionalValues;
+    props.showFractionalValues ?? AxesAndRulesDefaults.showFractionalValues
 
-  const horizontal = props.horizontal ?? BarDefaults.horizontal;
-  const rtl = props.rtl ?? BarDefaults.rtl;
-  const yAxisAtTop = props.yAxisAtTop ?? BarDefaults.yAxisAtTop;
-  const intactTopLabel = props.intactTopLabel ?? BarDefaults.intactTopLabel;
+  const horizontal = props.horizontal ?? BarDefaults.horizontal
+  const rtl = props.rtl ?? BarDefaults.rtl
+  const yAxisAtTop = props.yAxisAtTop ?? BarDefaults.yAxisAtTop
+  const intactTopLabel = props.intactTopLabel ?? BarDefaults.intactTopLabel
 
-  const heightFromProps = horizontal ? props.width : props.height;
-  const widthFromProps = horizontal ? props.height : props.width;
+  const heightFromProps = horizontal ? props.width : props.height
+  const widthFromProps = horizontal ? props.height : props.width
 
-  const isAnimated = props.isAnimated ?? BarDefaults.isAnimated;
+  const isAnimated = props.isAnimated ?? BarDefaults.isAnimated
   const animationDuration =
-    props.animationDuration ?? BarDefaults.animationDuration;
+    props.animationDuration ?? BarDefaults.animationDuration
 
   const data = useMemo(() => {
     if (!props.data) {
-      return [];
+      return []
     }
     if (props.yAxisOffset) {
       return props.data.map((item) => {
-        item.value = item.value - (props.yAxisOffset ?? 0);
-        return item;
-      });
+        item.value = (item.value ?? 0) - (props.yAxisOffset ?? 0)
+        return item
+      })
     }
-    return props.data;
-  }, [props.yAxisOffset, props.data]);
+    return props.data
+  }, [props.yAxisOffset, props.data])
 
   const secondaryData = getSecondaryDataWithOffsetIncluded(
     props.secondaryData,
     props.secondaryYAxis
-  );
+  )
 
   const lineData = useMemo(() => {
     if (!props.lineData) {
-      return props.stackData ?? data;
+      return props.stackData ?? data
     }
     if (props.yAxisOffset) {
-      return props.lineData.map((item) => {
-        item.value = item.value - (props.yAxisOffset ?? 0);
-        return item;
-      });
+      return props.lineData.map((item) => ({
+        ...item,
+        value: (item.value ?? 0) - (props.yAxisOffset ?? 0)
+      }))
     }
-    return props.lineData;
-  }, [props.yAxisOffset, props.lineData, data, props.stackData]);
+    return props.lineData
+  }, [props.yAxisOffset, props.lineData, data, props.stackData])
 
-  const lineData2 = props.lineData2;
+  const lineData2 = props.lineData2
 
-  const lineBehindBars = props.lineBehindBars || BarDefaults.lineBehindBars;
+  const lineBehindBars = props.lineBehindBars ?? BarDefaults.lineBehindBars
 
-  defaultLineConfig.initialSpacing = initialSpacing;
-  defaultLineConfig.endIndex = lineData.length - 1;
-  defaultLineConfig.animationDuration = animationDuration;
+  defaultLineConfig.initialSpacing = initialSpacing
+  defaultLineConfig.endIndex = lineData.length - 1
+  defaultLineConfig.animationDuration = animationDuration
 
-  const lineConfig = props.lineConfig
+  const lineConfig: lineConfigType = props.lineConfig
     ? getLineConfigForBarChart(props.lineConfig, initialSpacing)
-    : defaultLineConfig;
-  const lineConfig2 = props.lineConfig2
+    : defaultLineConfig
+  const lineConfig2: lineConfigType = props.lineConfig2
     ? getLineConfigForBarChart(props.lineConfig2, initialSpacing)
-    : defaultLineConfig;
+    : defaultLineConfig
   const noOfSections = getNoOfSections(
     props.noOfSections,
     props.maxValue,
     props.stepValue
-  );
+  )
   const containerHeight =
     heightFromProps ??
-    ((props.stepHeight ?? 0) * noOfSections ||
-      AxesAndRulesDefaults.containerHeight);
-  const horizSections = [{ value: "0" }];
-  const stepHeight = props.stepHeight ?? containerHeight / noOfSections;
-  const labelWidth = props.labelWidth ?? AxesAndRulesDefaults.labelWidth;
-  const scrollToEnd = props.scrollToEnd ?? BarDefaults.scrollToEnd;
-  const scrollAnimation = props.scrollAnimation ?? BarDefaults.scrollAnimation;
+    (props.stepHeight ?? 0) * noOfSections ??
+    AxesAndRulesDefaults.containerHeight
+  const horizSections = [{ value: '0' }]
+  const stepHeight = props.stepHeight ?? containerHeight / noOfSections
+  const labelWidth = props.labelWidth ?? AxesAndRulesDefaults.labelWidth
+  const scrollToEnd = props.scrollToEnd ?? BarDefaults.scrollToEnd
+  const scrollAnimation = props.scrollAnimation ?? BarDefaults.scrollAnimation
   const scrollEventThrottle =
-    props.scrollEventThrottle ?? BarDefaults.scrollEventThrottle;
+    props.scrollEventThrottle ?? BarDefaults.scrollEventThrottle
   const labelsExtraHeight =
-    props.labelsExtraHeight ?? AxesAndRulesDefaults.labelsExtraHeight;
+    props.labelsExtraHeight ?? AxesAndRulesDefaults.labelsExtraHeight
 
-  let totalWidth = initialSpacing;
-  let maxItem = 0,
-    minItem = 0;
+  let totalWidth = initialSpacing
+  let maxItem = 0
+  let minItem = 0
   if (props.stackData) {
     props.stackData.forEach((stackItem) => {
       const stackSumMax = stackItem.stacks.reduce(
         (acc, stack) => acc + (stack.value >= 0 ? stack.value : 0),
         0
-      );
+      )
       const stackSumMin = stackItem.stacks.reduce(
         (acc, stack) => acc + (stack.value < 0 ? stack.value : 0),
         0
-      );
+      )
 
       if (stackSumMax > maxItem) {
-        maxItem = stackSumMax;
+        maxItem = stackSumMax
       }
 
       if (stackSumMin < minItem) {
-        minItem = stackSumMin;
+        minItem = stackSumMin
       }
       totalWidth +=
         (stackItem.stacks[0].barWidth ??
           props.barWidth ??
-          BarDefaults.barWidth) + spacing;
-    });
+          BarDefaults.barWidth) + spacing
+    })
   } else {
     data.forEach((item: barDataItem) => {
       if (item.value > maxItem) {
-        maxItem = item.value;
+        maxItem = item.value
       }
       if (item.value < minItem) {
-        minItem = item.value;
+        minItem = item.value
       }
       totalWidth +=
         (item.barWidth ?? props.barWidth ?? BarDefaults.barWidth) +
-        (item.spacing ?? spacing);
-    });
+        (item.spacing ?? spacing)
+    })
   }
 
-  let secondaryMaxItem = 0,
-    secondaryMinItem = 0;
+  let secondaryMaxItem = 0
+  let secondaryMinItem = 0
 
   if (lineConfig.isSecondary) {
-    lineData.forEach((item: barDataItem) => {
-      if (item.value > secondaryMaxItem) {
-        secondaryMaxItem = item.value;
+    lineData.forEach((item) => {
+      if ((item.value ?? 0) > secondaryMaxItem) {
+        secondaryMaxItem = item.value ?? 0
       }
-      if (item.value < secondaryMinItem) {
-        secondaryMinItem = item.value;
+      if ((item.value ?? 0) < secondaryMinItem) {
+        secondaryMinItem = item.value ?? 0
       }
-    });
+    })
   }
 
   const maxAndMin = maxAndMinUtil(
@@ -176,184 +187,179 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
     minItem,
     props.roundToDigits,
     props.showFractionalValues
-  );
+  )
 
   const secondaryMaxAndMin = maxAndMinUtil(
     secondaryMaxItem,
     secondaryMinItem,
     props.roundToDigits,
     props.showFractionalValues
-  );
+  )
 
   const maxValue = getMaxValue(
     props.maxValue,
     props.stepValue,
     noOfSections,
     maxAndMin.maxItem
-  );
+  )
   const secondaryMaxValue = lineConfig.isSecondary
     ? secondaryMaxAndMin.maxItem
-    : maxValue;
-  const mostNegativeValue = props.mostNegativeValue ?? maxAndMin.minItem;
+    : maxValue
+  const mostNegativeValue = props.mostNegativeValue ?? maxAndMin.minItem
 
-  const stepValue = props.stepValue ?? maxValue / noOfSections;
+  const stepValue = props.stepValue ?? maxValue / noOfSections
   const noOfSectionsBelowXAxis =
-    props.noOfSectionsBelowXAxis ?? -mostNegativeValue / stepValue;
+    props.noOfSectionsBelowXAxis ?? -mostNegativeValue / stepValue
   const showScrollIndicator =
-    props.showScrollIndicator ?? BarDefaults.showScrollIndicator;
-  const side = props.side ?? BarDefaults.side;
-  const rotateLabel = props.rotateLabel ?? AxesAndRulesDefaults.rotateLabel;
-  const opacity = props.opacity ?? BarDefaults.opacity;
-  const isThreeD = props.isThreeD ?? BarDefaults.isThreeD;
+    props.showScrollIndicator ?? BarDefaults.showScrollIndicator
+  const side = props.side ?? BarDefaults.side
+  const rotateLabel = props.rotateLabel ?? AxesAndRulesDefaults.rotateLabel
+  const opacity = props.opacity ?? BarDefaults.opacity
+  const isThreeD = props.isThreeD ?? BarDefaults.isThreeD
 
   const showXAxisIndices =
-    props.showXAxisIndices ?? AxesAndRulesDefaults.showXAxisIndices;
+    props.showXAxisIndices ?? AxesAndRulesDefaults.showXAxisIndices
   const xAxisIndicesHeight =
-    props.xAxisIndicesHeight ?? AxesAndRulesDefaults.xAxisIndicesHeight;
+    props.xAxisIndicesHeight ?? AxesAndRulesDefaults.xAxisIndicesHeight
   const xAxisIndicesWidth =
-    props.xAxisIndicesWidth ?? AxesAndRulesDefaults.xAxisIndicesWidth;
+    props.xAxisIndicesWidth ?? AxesAndRulesDefaults.xAxisIndicesWidth
   const xAxisIndicesColor =
-    props.xAxisIndicesColor ?? AxesAndRulesDefaults.xAxisIndicesColor;
+    props.xAxisIndicesColor ?? AxesAndRulesDefaults.xAxisIndicesColor
 
   const xAxisThickness =
-    props.xAxisThickness ?? AxesAndRulesDefaults.xAxisThickness;
+    props.xAxisThickness ?? AxesAndRulesDefaults.xAxisThickness
 
   const xAxisTextNumberOfLines =
-    props.xAxisTextNumberOfLines ?? AxesAndRulesDefaults.xAxisTextNumberOfLines;
+    props.xAxisTextNumberOfLines ?? AxesAndRulesDefaults.xAxisTextNumberOfLines
   const xAxisLabelsVerticalShift =
     props.xAxisLabelsVerticalShift ??
-    AxesAndRulesDefaults.xAxisLabelsVerticalShift;
-  const horizontalRulesStyle = props.horizontalRulesStyle;
+    AxesAndRulesDefaults.xAxisLabelsVerticalShift
+  const horizontalRulesStyle = props.horizontalRulesStyle
   const yAxisLabelWidth =
     props.yAxisLabelWidth ??
     (props.hideYAxisText
       ? AxesAndRulesDefaults.yAxisEmptyLabelWidth
-      : AxesAndRulesDefaults.yAxisLabelWidth);
+      : AxesAndRulesDefaults.yAxisLabelWidth)
 
-  const autoShiftLabels = props.autoShiftLabels ?? false;
+  const autoShiftLabels = props.autoShiftLabels ?? false
 
-  const barWidth = props.barWidth || BarDefaults.barWidth;
-  const barBorderColor = props.barBorderColor ?? BarDefaults.barBorderColor;
+  const barWidth = props.barWidth ?? BarDefaults.barWidth
+  const barBorderColor = props.barBorderColor ?? BarDefaults.barBorderColor
 
   const extendedContainerHeight = getExtendedContainerHeightWithPadding(
     containerHeight,
     0
-  );
+  )
 
   const containerHeightIncludingBelowXAxis =
-    extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight;
-
-  const [pointerIndex, setPointerIndex] = useState(-1);
-  const [pointerX, setPointerX] = useState(0);
-  const [pointerY, setPointerY] = useState(0);
-  const [pointerItem, setPointerItem] = useState({
-    pointerShiftX: 0,
-    pointerShiftY: 0,
-  });
-  const [responderStartTime, setResponderStartTime] = useState(0);
-  const [responderActive, setResponderActive] = useState(false);
-
-  const pointerConfig = props.pointerConfig;
-  const getPointerProps = props.getPointerProps || null;
-  const pointerHeight = pointerConfig?.height ?? defaultPointerConfig.height;
-  const pointerWidth = pointerConfig?.width ?? defaultPointerConfig.width;
-  const pointerRadius = pointerConfig?.radius ?? defaultPointerConfig.radius;
+    extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight
+
+  const [pointerIndex, setPointerIndex] = useState(-1)
+  const [pointerX, setPointerX] = useState(0)
+  const [pointerY, setPointerY] = useState(0)
+  const [pointerItem, setPointerItem] = useState<barDataItem | stackDataItem>()
+  const [responderStartTime, setResponderStartTime] = useState(0)
+  const [responderActive, setResponderActive] = useState(false)
+
+  const pointerConfig = props.pointerConfig
+  const getPointerProps = props.getPointerProps ?? null
+  const pointerHeight = pointerConfig?.height ?? defaultPointerConfig.height
+  const pointerWidth = pointerConfig?.width ?? defaultPointerConfig.width
+  const pointerRadius = pointerConfig?.radius ?? defaultPointerConfig.radius
   const pointerColor =
-    pointerConfig?.pointerColor ?? defaultPointerConfig.pointerColor;
+    pointerConfig?.pointerColor ?? defaultPointerConfig.pointerColor
   const pointerComponent =
-    pointerConfig?.pointerComponent ?? defaultPointerConfig.pointerComponent;
+    pointerConfig?.pointerComponent ?? defaultPointerConfig.pointerComponent
 
   const showPointerStrip =
     pointerConfig?.showPointerStrip === false
       ? false
-      : defaultPointerConfig.showPointerStrip;
+      : defaultPointerConfig.showPointerStrip
   const pointerStripHeight =
     pointerConfig?.pointerStripHeight ??
-    defaultPointerConfig.pointerStripHeight;
+    defaultPointerConfig.pointerStripHeight
   const pointerStripWidth =
-    pointerConfig?.pointerStripWidth ?? defaultPointerConfig.pointerStripWidth;
+    pointerConfig?.pointerStripWidth ?? defaultPointerConfig.pointerStripWidth
   const pointerStripColor =
-    pointerConfig?.pointerStripColor ?? defaultPointerConfig.pointerStripColor;
+    pointerConfig?.pointerStripColor ?? defaultPointerConfig.pointerStripColor
   const pointerStripUptoDataPoint =
     pointerConfig?.pointerStripUptoDataPoint ??
-    defaultPointerConfig.pointerStripUptoDataPoint;
+    defaultPointerConfig.pointerStripUptoDataPoint
   const pointerLabelComponent =
     pointerConfig?.pointerLabelComponent ??
-    defaultPointerConfig.pointerLabelComponent;
+    defaultPointerConfig.pointerLabelComponent
   const stripOverPointer =
-    pointerConfig?.stripOverPointer ?? defaultPointerConfig.stripOverPointer;
+    pointerConfig?.stripOverPointer ?? defaultPointerConfig.stripOverPointer
   const shiftPointerLabelX =
     pointerConfig?.shiftPointerLabelX ??
-    defaultPointerConfig.shiftPointerLabelX;
+    defaultPointerConfig.shiftPointerLabelX
   const shiftPointerLabelY =
     pointerConfig?.shiftPointerLabelY ??
-    defaultPointerConfig.shiftPointerLabelY;
+    defaultPointerConfig.shiftPointerLabelY
   const pointerLabelWidth =
-    pointerConfig?.pointerLabelWidth ?? defaultPointerConfig.pointerLabelWidth;
+    pointerConfig?.pointerLabelWidth ?? defaultPointerConfig.pointerLabelWidth
   const pointerLabelHeight =
     pointerConfig?.pointerLabelHeight ??
-    defaultPointerConfig.pointerLabelHeight;
+    defaultPointerConfig.pointerLabelHeight
   const autoAdjustPointerLabelPosition =
     pointerConfig?.autoAdjustPointerLabelPosition ??
-    defaultPointerConfig.autoAdjustPointerLabelPosition;
+    defaultPointerConfig.autoAdjustPointerLabelPosition
   const pointerVanishDelay =
     pointerConfig?.pointerVanishDelay ??
-    defaultPointerConfig.pointerVanishDelay;
+    defaultPointerConfig.pointerVanishDelay
   const activatePointersOnLongPress =
     pointerConfig?.activatePointersOnLongPress ??
-    defaultPointerConfig.activatePointersOnLongPress;
+    defaultPointerConfig.activatePointersOnLongPress
   const activatePointersDelay =
     pointerConfig?.activatePointersDelay ??
-    defaultPointerConfig.activatePointersDelay;
+    defaultPointerConfig.activatePointersDelay
   const initialPointerIndex =
     pointerConfig?.initialPointerIndex ??
-    defaultPointerConfig.initialPointerIndex;
+    defaultPointerConfig.initialPointerIndex
   const initialPointerAppearDelay =
     pointerConfig?.initialPointerAppearDelay ??
     (isAnimated
       ? animationDuration
-      : defaultPointerConfig.initialPointerAppearDelay);
+      : defaultPointerConfig.initialPointerAppearDelay)
   const persistPointer =
-    pointerConfig?.persistPointer ?? defaultPointerConfig.persistPointer;
+    pointerConfig?.persistPointer ?? defaultPointerConfig.persistPointer
   const hidePointer1 =
-    pointerConfig?.hidePointer1 ?? defaultPointerConfig.hidePointer1;
-  const pointerEvents = pointerConfig?.pointerEvents;
+    pointerConfig?.hidePointer1 ?? defaultPointerConfig.hidePointer1
+  const pointerEvents = pointerConfig?.pointerEvents
   const stripBehindBars =
-    pointerConfig?.stripBehindBars ?? defaultPointerConfig.stripBehindBars;
+    pointerConfig?.stripBehindBars ?? defaultPointerConfig.stripBehindBars
 
   const disableScroll =
-    props.disableScroll ||
+    props.disableScroll ??
     (pointerConfig
       ? activatePointersOnLongPress
-        ? responderActive
-          ? true
-          : false
+        ? !!responderActive
         : true
-      : false);
+      : false)
 
-  const barInnerComponent = props.barInnerComponent;
+  const barInnerComponent = props.barInnerComponent
 
   useEffect(() => {
     if (showLine) {
-      let pp = "",
-        pp2 = "";
+      let pp = ''
+      let pp2 = ''
       const firstBarWidth =
-        (props.stackData ?? data)?.[0].barWidth ?? props.barWidth ?? 30;
+        (props.stackData ?? data)?.[0].barWidth ?? props.barWidth ?? 30
       if (!lineConfig.curved) {
         for (let i = 0; i < lineData.length; i++) {
-          if (i < lineConfig.startIndex || i > lineConfig.endIndex) continue;
+          if (i < (lineConfig.startIndex ?? 0) || i > (lineConfig.endIndex ?? 0)) continue
           const currentBarWidth =
-            data?.[i]?.barWidth ?? props.barWidth ?? BarDefaults.barWidth;
+            data?.[i]?.barWidth ?? props.barWidth ?? BarDefaults.barWidth
           const currentValue = props.lineData
             ? props.lineData[i].value
             : props.stackData
-            ? props.stackData[i].stacks.reduce(
+              ? props.stackData[i].stacks.reduce(
                 (total, item) => total + item.value,
                 0
               )
-            : data[i].value;
+              : data[i].value
           pp +=
-            "L" +
+            'L' +
             getXForLineInBar(
               i,
               firstBarWidth,
@@ -362,51 +368,51 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
               lineConfig,
               spacing
             ) +
-            " " +
+            ' ' +
             getYForLineInBar(
               currentValue,
               lineConfig.shiftY,
               containerHeight,
               lineConfig.isSecondary ? secondaryMaxValue : maxValue
             ) +
-            " ";
+            ' '
         }
-        setPoints(pp.replace("L", "M"));
+        setPoints(pp.replace('L', 'M'))
         if (lineData.length > 1 && lineConfig.showArrow) {
-          let ppArray = pp.trim().split(" ");
-          let arrowTipY = parseInt(ppArray[ppArray.length - 1]);
-          let arrowTipX = parseInt(
-            ppArray[ppArray.length - 2].replace("L", "")
-          );
-          let y1 = parseInt(ppArray[ppArray.length - 3]);
-          let x1 = parseInt(ppArray[ppArray.length - 4].replace("L", ""));
-
-          let arrowPoints = getArrowPoints(
+          const ppArray = pp.trim().split(' ')
+          const arrowTipY = parseInt(ppArray[ppArray.length - 1])
+          const arrowTipX = parseInt(
+            ppArray[ppArray.length - 2].replace('L', '')
+          )
+          const y1 = parseInt(ppArray[ppArray.length - 3])
+          const x1 = parseInt(ppArray[ppArray.length - 4].replace('L', ''))
+
+          const arrowPoints = getArrowPoints(
             arrowTipX,
             arrowTipY,
             x1,
             y1,
-            lineConfig.arrowConfig.length,
-            lineConfig.arrowConfig.width,
-            lineConfig.arrowConfig.showArrowBase
-          );
+            lineConfig.arrowConfig?.length,
+            lineConfig.arrowConfig?.width,
+            lineConfig.arrowConfig?.showArrowBase
+          )
 
-          setArrowPoints(arrowPoints);
+          setArrowPoints(arrowPoints)
         }
       } else {
-        let p1Array: Array<Array<number>> = [];
+        const p1Array: number[][] = []
         for (let i = 0; i < lineData.length; i++) {
-          if (i < lineConfig.startIndex || i > lineConfig.endIndex) continue;
+          if (i < (lineConfig.startIndex ?? 0) || i > (lineConfig.endIndex ?? 0)) continue
           const currentBarWidth =
-            data?.[i]?.barWidth ?? props.barWidth ?? BarDefaults.barWidth;
+            data?.[i]?.barWidth ?? props.barWidth ?? BarDefaults.barWidth
           const currentValue = props.lineData
             ? props.lineData[i].value
             : props.stackData
-            ? props.stackData[i].stacks.reduce(
+              ? props.stackData[i].stacks.reduce(
                 (total, item) => total + item.value,
                 0
               )
-            : data[i].value;
+              : data[i].value
           p1Array.push([
             getXForLineInBar(
               i,
@@ -421,22 +427,27 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
               lineConfig.shiftY,
               containerHeight,
               lineConfig.isSecondary ? secondaryMaxValue : maxValue
-            ),
-          ]);
-          let xx = svgPath(p1Array, lineConfig.curveType, lineConfig.curvature);
-          setPoints(xx);
+            )
+          ])
+          const xx = svgPath(
+            p1Array,
+            lineConfig.curveType,
+            lineConfig.curvature
+          )
+          setPoints(xx)
         }
       }
       if (lineData2?.length) {
         if (!lineConfig2?.curved) {
           for (let i = 0; i < lineData2.length; i++) {
-            if (i < lineConfig2.startIndex || i > lineConfig2.endIndex)
-              continue;
+            if (i < (lineConfig2.startIndex ?? 0) || i > (lineConfig2.endIndex ?? 0)) {
+              continue
+            }
             const currentBarWidth =
-              data?.[i]?.barWidth ?? props.barWidth ?? BarDefaults.barWidth;
-            const currentValue = lineData2[i].value;
+              data?.[i]?.barWidth ?? props.barWidth ?? BarDefaults.barWidth
+            const currentValue = lineData2[i].value
             pp2 +=
-              "L" +
+              'L' +
               getXForLineInBar(
                 i,
                 firstBarWidth,
@@ -445,24 +456,25 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
                 lineConfig2,
                 spacing
               ) +
-              " " +
+              ' ' +
               getYForLineInBar(
                 currentValue,
                 lineConfig2.shiftY,
                 containerHeight,
                 lineConfig2.isSecondary ? secondaryMaxValue : maxValue
               ) +
-              " ";
+              ' '
           }
-          setPoints2(pp2.replace("L", "M"));
+          setPoints2(pp2.replace('L', 'M'))
         } else {
-          let p2Array: Array<Array<number>> = [];
+          const p2Array: number[][] = []
           for (let i = 0; i < lineData2.length; i++) {
-            if (i < lineConfig2.startIndex || i > lineConfig2.endIndex)
-              continue;
+            if (i < (lineConfig2.startIndex ?? 0) || i > (lineConfig2.endIndex ?? 0)) {
+              continue
+            }
             const currentBarWidth =
-              data?.[i]?.barWidth ?? props.barWidth ?? BarDefaults.barWidth;
-            const currentValue = lineData2[i].value;
+              data?.[i]?.barWidth ?? props.barWidth ?? BarDefaults.barWidth
+            const currentValue = lineData2[i].value
             p2Array.push([
               getXForLineInBar(
                 i,
@@ -477,14 +489,14 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
                 lineConfig2.shiftY,
                 containerHeight,
                 lineConfig2.isSecondary ? secondaryMaxValue : maxValue
-              ),
-            ]);
-            let xx = svgPath(
+              )
+            ])
+            const xx = svgPath(
               p2Array,
               lineConfig2.curveType,
               lineConfig2.curvature
-            );
-            setPoints2(xx);
+            )
+            setPoints2(xx)
           }
         }
       }
@@ -509,86 +521,94 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
     spacing,
     yAxisLabelWidth,
     lineConfig.showArrow,
-    lineConfig.arrowConfig.length,
-    lineConfig.arrowConfig.width,
-    lineConfig.arrowConfig.showArrowBase,
-  ]);
+    lineConfig.arrowConfig?.length,
+    lineConfig.arrowConfig?.width,
+    lineConfig.arrowConfig?.showArrowBase
+  ])
   useEffect(() => {
     if (initialPointerIndex !== -1) {
-      const item = (props.stackData ?? data)?.[initialPointerIndex];
-      const stackItem = props.stackData?.[initialPointerIndex];
+      const item = (props.stackData ?? data)?.[initialPointerIndex]
+      const stackItem = props.stackData?.[initialPointerIndex]
       const stackSum = stackItem?.stacks?.reduce(
         (acc, stack) => acc + (stack.value ?? 0),
         0
-      );
+      )
       const x =
         initialSpacing +
         (spacing + barWidth) * initialPointerIndex -
-        (pointerRadius || pointerWidth / 2) +
-        barWidth / 2;
+        (pointerRadius ?? pointerWidth / 2) +
+        barWidth / 2
       const y =
         containerHeight -
         ((stackSum ?? data[initialPointerIndex].value) * containerHeight) /
           maxValue -
-        (pointerRadius || pointerHeight / 2) +
-        10;
+        (pointerRadius ?? pointerHeight / 2) +
+        10
       if (initialPointerAppearDelay) {
         setTimeout(() => {
-          setPointerConfig(initialPointerIndex, item, x, y);
-        }, initialPointerAppearDelay);
+          setPointerConfig(initialPointerIndex, item, x, y)
+        }, initialPointerAppearDelay)
       } else {
-        setPointerConfig(initialPointerIndex, item, x, y);
+        setPointerConfig(initialPointerIndex, item, x, y)
       }
     }
-  }, []);
-
-  const setPointerConfig = (initialPointerIndex, item, x, y) => {
-    setPointerIndex(initialPointerIndex);
-    setPointerItem(item);
-    setPointerX(x);
-    setPointerY(y);
-  };
+  }, [])
+
+  const setPointerConfig = (
+    initialPointerIndex: number,
+    item: barDataItem | stackDataItem,
+    x: number,
+    y: number
+  ): void => {
+    setPointerIndex(initialPointerIndex)
+    setPointerItem(item)
+    setPointerX(x)
+    setPointerY(y)
+  }
 
   const animatedHeight = heightValue.interpolate({
     inputRange: [0, 1],
-    outputRange: ["0%", "100%"],
-  });
+    outputRange: ['0%', '100%']
+  })
   const appearingOpacity = opacValue.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 1],
-  });
+    outputRange: [0, 1]
+  })
 
   const animatedWidth = widthValue.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, initialSpacing + totalWidth + endSpacing],
-  });
+    outputRange: [0, initialSpacing + totalWidth + endSpacing]
+  })
 
-  const getPropsCommonForBarAndStack = (item, index) => {
+  const getPropsCommonForBarAndStack = (
+    item: stackDataItem | barDataItem,
+    index: number
+  ) => {
     return {
       key: index,
-      item: item,
-      index: index,
-      containerHeight: containerHeight,
-      maxValue: maxValue,
+      item,
+      index,
+      containerHeight,
+      maxValue,
       spacing: item.spacing ?? spacing,
       propSpacing: spacing,
-      xAxisThickness: xAxisThickness,
+      xAxisThickness,
       barWidth: props.barWidth,
-      opacity: opacity,
-      disablePress: item.disablePress || props.disablePress,
-      rotateLabel: rotateLabel,
-      showXAxisIndices: showXAxisIndices,
-      xAxisIndicesHeight: xAxisIndicesHeight,
-      xAxisIndicesWidth: xAxisIndicesWidth,
-      xAxisIndicesColor: xAxisIndicesColor,
-      horizontal: horizontal,
-      rtl: rtl,
-      intactTopLabel: intactTopLabel,
+      opacity,
+      disablePress: item.disablePress ?? props.disablePress,
+      rotateLabel,
+      showXAxisIndices,
+      xAxisIndicesHeight,
+      xAxisIndicesWidth,
+      xAxisIndicesColor,
+      horizontal,
+      rtl,
+      intactTopLabel,
       showValuesAsTopLabel: props.showValuesAsTopLabel,
       topLabelContainerStyle: props.topLabelContainerStyle,
       topLabelTextStyle: props.topLabelTextStyle,
       barBorderWidth: props.barBorderWidth,
-      barBorderColor: barBorderColor,
+      barBorderColor,
       barBorderRadius: props.barBorderRadius,
       barBorderTopLeftRadius: props.barBorderTopLeftRadius,
       barBorderTopRightRadius: props.barBorderTopRightRadius,
@@ -605,27 +625,25 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
       onPressOut: props.onPressOut,
       focusBarOnPress: props.focusBarOnPress,
       focusedBarConfig: props.focusedBarConfig,
-      xAxisTextNumberOfLines: xAxisTextNumberOfLines,
+      xAxisTextNumberOfLines,
       xAxisLabelsHeight: props.xAxisLabelsHeight,
       xAxisLabelsVerticalShift,
       renderTooltip: props.renderTooltip,
-      leftShiftForTooltip: props.leftShiftForTooltip || 0,
-      initialSpacing: initialSpacing,
-      selectedIndex: selectedIndex,
-      setSelectedIndex: setSelectedIndex,
-      activeOpacity: props.activeOpacity || 0.2,
+      leftShiftForTooltip: props.leftShiftForTooltip ?? 0,
+      initialSpacing,
+      selectedIndex,
+      setSelectedIndex,
+      activeOpacity: props.activeOpacity ?? 0.2,
       noOfSectionsBelowXAxis,
 
-      leftShiftForLastIndexTooltip: props.leftShiftForLastIndexTooltip || 0,
+      leftShiftForLastIndexTooltip: props.leftShiftForLastIndexTooltip ?? 0,
       label:
-        item.label ||
-        (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
-          ? props.xAxisLabelTexts[index]
-          : ""),
-      labelTextStyle: item.labelTextStyle || props.xAxisLabelTextStyle,
-      pointerConfig,
-    };
-  };
+        item.label ??
+        (props.xAxisLabelTexts?.[index] ? props.xAxisLabelTexts[index] : ''),
+      labelTextStyle: item.labelTextStyle ?? props.xAxisLabelTextStyle,
+      pointerConfig
+    }
+  }
 
   const barAndLineChartsWrapperProps: BarAndLineChartsWrapperTypes = {
     chartType: chartTypes.BAR,
@@ -642,8 +660,8 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
     initialSpacing,
     data,
     stackData: props.stackData,
-    secondaryData: secondaryData,
-    barWidth: props.barWidth || BarDefaults.barWidth,
+    secondaryData,
+    barWidth: props.barWidth ?? BarDefaults.barWidth,
     xAxisThickness,
     totalWidth,
     disableScroll,
@@ -667,7 +685,7 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
     points2,
     arrowPoints,
 
-    //horizSectionProps-
+    // horizSectionProps-
     width: widthFromProps,
     horizSections,
     endSpacing,
@@ -700,8 +718,8 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
 
     onEndReached: props.onEndReached,
     onStartReached: props.onStartReached,
-    endReachedOffset: props.endReachedOffset ?? BarDefaults.endReachedOffset,
-  };
+    endReachedOffset: props.endReachedOffset ?? BarDefaults.endReachedOffset
+  }
 
   return {
     lineConfig,
@@ -808,6 +826,6 @@ export const useBarChart = (props: extendedBarChartPropsType) => {
     getPointerProps,
     pointerIndex,
     getPropsCommonForBarAndStack,
-    barAndLineChartsWrapperProps,
-  };
-};
+    barAndLineChartsWrapperProps
+  }
+}