gifted-charts-core 0.0.20 → 0.0.22

package/src/LineChart/index.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from 'react'
 import {
   AxesAndRulesDefaults,
   LineDefaults,
@@ -7,8 +7,8 @@ import {
   chartTypes,
   defaultArrowConfig,
   defaultPointerConfig,
-  screenWidth,
-} from "../utils/constants";
+  screenWidth
+} from '../utils/constants'
 import {
   adjustToOffset,
   computeMaxAndMinItems,
@@ -25,13 +25,25 @@ import {
   getSanitisedData,
   getSecondaryDataWithOffsetIncluded,
   getSegmentString,
-  svgPath,
-} from "../utils";
-import { LineChartPropsType } from "./types";
-import { BarAndLineChartsWrapperTypes, EdgePosition } from "../utils/types";
-
-interface extendedLineChartPropsType extends LineChartPropsType {
-  animations;
+  svgPath
+} from '../utils'
+import {
+  type IDataSanitisationProps,
+  type LineChartPropsType,
+  type lineDataItem
+} from './types'
+import {
+  type BarAndLineChartsWrapperTypes,
+  EdgePosition,
+  type LineSegment
+} from '../utils/types'
+import { type Animated } from 'react-native'
+
+export interface extendedLineChartPropsType extends LineChartPropsType {
+  animations: Animated.Value[]
+  heightValue: Animated.Value
+  widthValue: Animated.Value
+  opacValue: Animated.Value
 }
 
 export const useLineChart = (props: extendedLineChartPropsType) => {
@@ -40,108 +52,90 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     showDataPointsForMissingValues,
     interpolateMissingValues = true,
     onlyPositive,
-    yAxisOffset,
-  } = props;
-  const curvature = props.curvature ?? LineDefaults.curvature;
-  const curveType = props.curveType ?? LineDefaults.curveType;
-  const [scrollX, setScrollX] = useState(0);
-  const [arrow1Points, setArrow1Points] = useState("");
-  const [arrow2Points, setArrow2Points] = useState("");
-  const [arrow3Points, setArrow3Points] = useState("");
-  const [arrow4Points, setArrow4Points] = useState("");
-  const [arrow5Points, setArrow5Points] = useState("");
-  const [secondaryArrowPoints, setSecondaryArrowPoints] = useState("");
-  const [pointerIndex, setPointerIndex] = useState(-1);
-  const [pointerX, setPointerX] = useState(0);
-  const [pointerY, setPointerY] = useState(0);
-  const [pointerItem, setPointerItem] = useState({
-    pointerShiftX: 0,
-    pointerShiftY: 0,
-  });
-
-  const [pointerY2, setPointerY2] = useState(0);
-  const [pointerItem2, setPointerItem2] = useState({
-    pointerShiftX: 0,
-    pointerShiftY: 0,
-  });
-  const [pointerY3, setPointerY3] = useState(0);
-  const [pointerItem3, setPointerItem3] = useState({
-    pointerShiftX: 0,
-    pointerShiftY: 0,
-  });
-  const [pointerY4, setPointerY4] = useState(0);
-  const [pointerItem4, setPointerItem4] = useState({
-    pointerShiftX: 0,
-    pointerShiftY: 0,
-  });
-  const [pointerY5, setPointerY5] = useState(0);
-  const [pointerItem5, setPointerItem5] = useState({
-    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("");
-  const [points2, setPoints2] = useState("");
-  const [points3, setPoints3] = useState("");
-  const [points4, setPoints4] = useState("");
-  const [points5, setPoints5] = useState("");
-  const [secondaryPoints, setSecondaryPoints] = useState("");
-  const [fillPoints, setFillPoints] = useState("");
-  const [fillPoints2, setFillPoints2] = useState("");
-  const [fillPoints3, setFillPoints3] = useState("");
-  const [fillPoints4, setFillPoints4] = useState("");
-  const [fillPoints5, setFillPoints5] = useState("");
-  const [secondaryFillPoints, setSecondaryFillPoints] = useState("");
-
-  const [pointsFromSet, setPointsFromSet] = useState<string[]>([]);
-  const [fillPointsFromSet, setFillPointsFromSet] = useState<string[]>([]);
-  const [arrowPointsFromSet, setArrowPointsFromSet] = useState<string[]>([]);
-
-  const [selectedIndex, setSelectedIndex] = useState(-1);
+    yAxisOffset
+  } = props
+  const curvature = props.curvature ?? LineDefaults.curvature
+  const curveType = props.curveType ?? LineDefaults.curveType
+  const [scrollX, setScrollX] = useState(0)
+  const [arrow1Points, setArrow1Points] = useState('')
+  const [arrow2Points, setArrow2Points] = useState('')
+  const [arrow3Points, setArrow3Points] = useState('')
+  const [arrow4Points, setArrow4Points] = useState('')
+  const [arrow5Points, setArrow5Points] = useState('')
+  const [secondaryArrowPoints, setSecondaryArrowPoints] = useState('')
+  const [pointerIndex, setPointerIndex] = useState(-1)
+  const [pointerX, setPointerX] = useState(0)
+  const [pointerY, setPointerY] = useState(0)
+  const [pointerItem, setPointerItem] = useState<lineDataItem>()
+
+  const [pointerY2, setPointerY2] = useState(0)
+  const [pointerItem2, setPointerItem2] = useState<lineDataItem>()
+  const [pointerY3, setPointerY3] = useState(0)
+  const [pointerItem3, setPointerItem3] = useState<lineDataItem>()
+  const [pointerY4, setPointerY4] = useState(0)
+  const [pointerItem4, setPointerItem4] = useState<lineDataItem>()
+  const [pointerY5, setPointerY5] = useState(0)
+  const [pointerItem5, setPointerItem5] = useState<lineDataItem>()
+  const [secondaryPointerY, setSecondaryPointerY] = useState(0)
+  const [secondaryPointerItem, setSecondaryPointerItem] = useState()
+
+  const [responderStartTime, setResponderStartTime] = useState(0)
+  const [responderActive, setResponderActive] = useState(false)
+  const [points, setPoints] = useState('')
+  const [points2, setPoints2] = useState('')
+  const [points3, setPoints3] = useState('')
+  const [points4, setPoints4] = useState('')
+  const [points5, setPoints5] = useState('')
+  const [secondaryPoints, setSecondaryPoints] = useState('')
+  const [fillPoints, setFillPoints] = useState('')
+  const [fillPoints2, setFillPoints2] = useState('')
+  const [fillPoints3, setFillPoints3] = useState('')
+  const [fillPoints4, setFillPoints4] = useState('')
+  const [fillPoints5, setFillPoints5] = useState('')
+  const [secondaryFillPoints, setSecondaryFillPoints] = useState('')
+
+  const [pointsFromSet, setPointsFromSet] = useState<string[]>([])
+  const [fillPointsFromSet, setFillPointsFromSet] = useState<string[]>([])
+  const [arrowPointsFromSet, setArrowPointsFromSet] = useState<string[]>([])
+
+  const [selectedIndex, setSelectedIndex] = useState(-1)
 
   const noOfSections = getNoOfSections(
     props.noOfSections,
     props.maxValue,
     props.stepValue
-  );
+  )
   const containerHeight =
     props.height ??
     ((props.stepHeight ?? 0) * noOfSections ||
-      AxesAndRulesDefaults.containerHeight);
+      AxesAndRulesDefaults.containerHeight)
 
-  const dataSanitisationProps = {
+  const dataSanitisationProps: IDataSanitisationProps = {
     showDataPointsForMissingValues,
     interpolateMissingValues,
     onlyPositive,
-    yAxisOffset,
-  };
+    yAxisOffset
+  }
   const data = useMemo(
     () => getSanitisedData(props.data, dataSanitisationProps),
     [yAxisOffset, props.data]
-  );
+  )
   const data2 = useMemo(
     () => getSanitisedData(props.data2, dataSanitisationProps),
     [yAxisOffset, props.data2]
-  );
+  )
   const data3 = useMemo(
     () => getSanitisedData(props.data3, dataSanitisationProps),
     [yAxisOffset, props.data3]
-  );
+  )
   const data4 = useMemo(
     () => getSanitisedData(props.data4, dataSanitisationProps),
     [yAxisOffset, props.data4]
-  );
+  )
   const data5 = useMemo(
     () => getSanitisedData(props.data5, dataSanitisationProps),
     [yAxisOffset, props.data5]
-  );
+  )
 
   const secondaryData =
     getSecondaryDataWithOffsetIncluded(
@@ -150,9 +144,9 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
       showDataPointsForMissingValues,
       interpolateMissingValues,
       onlyPositive
-    ) || [];
+    ) ?? []
 
-  let dataSet = props.dataSet;
+  let dataSet = props.dataSet
   if (dataSet?.length) {
     dataSet = useMemo(() => {
       return dataSet?.map((dataSetItem) => {
@@ -161,426 +155,411 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
           showDataPointsForMissingValues,
           interpolateMissingValues,
           onlyPositive
-        );
+        )
         return {
           ...dataSetItem,
-          data: adjustToOffset(nullishHandledDataItem, yAxisOffset),
-        };
-      });
-    }, [yAxisOffset, dataSet]);
+          data: adjustToOffset(nullishHandledDataItem, yAxisOffset)
+        }
+      })
+    }, [yAxisOffset, dataSet])
   }
 
-  const data0 = dataSet?.[0]?.data;
+  const data0 = dataSet?.[0]?.data
 
-  const scrollToEnd = props.scrollToEnd || LineDefaults.scrollToEnd;
-  const scrollAnimation = props.scrollAnimation ?? LineDefaults.scrollAnimation;
+  const scrollToEnd = props.scrollToEnd ?? LineDefaults.scrollToEnd
+  const scrollAnimation = props.scrollAnimation ?? LineDefaults.scrollAnimation
   const scrollEventThrottle =
-    props.scrollEventThrottle ?? LineDefaults.scrollEventThrottle;
+    props.scrollEventThrottle ?? LineDefaults.scrollEventThrottle
 
-  const labelsExtraHeight = props.labelsExtraHeight || 0;
+  const labelsExtraHeight = props.labelsExtraHeight ?? 0
 
   const animationDuration =
-    props.animationDuration || LineDefaults.animationDuration;
+    props.animationDuration ?? LineDefaults.animationDuration
   const onDataChangeAnimationDuration =
-    props.onDataChangeAnimationDuration || 400;
-  const animateTogether = props.animateTogether || LineDefaults.animateTogether;
+    props.onDataChangeAnimationDuration ?? 400
+  const animateTogether = props.animateTogether ?? LineDefaults.animateTogether
   const animateOnDataChange = yAxisOffset
     ? false
-    : props.animateOnDataChange || false;
+    : props.animateOnDataChange ?? false
 
-  const startIndex1 = props.startIndex1 ?? props.startIndex ?? 0;
+  const startIndex1 = props.startIndex1 ?? props.startIndex ?? 0
 
-  let endIndex1;
+  let endIndex1: number
   if (props.endIndex1 === undefined || props.endIndex1 === null) {
     if (props.endIndex === undefined || props.endIndex === null) {
-      endIndex1 = data.length - 1;
+      endIndex1 = data.length - 1
     } else {
-      endIndex1 = props.endIndex;
+      endIndex1 = props.endIndex
     }
   } else {
-    endIndex1 = props.endIndex1;
+    endIndex1 = props.endIndex1
   }
 
-  const startIndex2 = props.startIndex2 || 0;
-  const endIndex2 = props.endIndex2 ?? data2.length - 1;
+  const startIndex2 = props.startIndex2 ?? 0
+  const endIndex2 = props.endIndex2 ?? data2.length - 1
 
-  const startIndex3 = props.startIndex3 || 0;
-  const endIndex3 = props.endIndex3 ?? data3.length - 1;
-  const startIndex4 = props.startIndex4 || 0;
-  const endIndex4 = props.endIndex4 ?? data4.length - 1;
-  const startIndex5 = props.startIndex5 || 0;
-  const endIndex5 = props.endIndex5 ?? data5.length - 1;
+  const startIndex3 = props.startIndex3 ?? 0
+  const endIndex3 = props.endIndex3 ?? data3.length - 1
+  const startIndex4 = props.startIndex4 ?? 0
+  const endIndex4 = props.endIndex4 ?? data4.length - 1
+  const startIndex5 = props.startIndex5 ?? 0
+  const endIndex5 = props.endIndex5 ?? data5.length - 1
 
   const lineSegments = !interpolateMissingValues
     ? getLineSegmentsForMissingValues(props.data)
-    : props.lineSegments;
+    : props.lineSegments
   const lineSegments2 = !interpolateMissingValues
     ? getLineSegmentsForMissingValues(props.data2)
-    : props.lineSegments2;
+    : props.lineSegments2
   const lineSegments3 = !interpolateMissingValues
     ? getLineSegmentsForMissingValues(props.data3)
-    : props.lineSegments3;
+    : props.lineSegments3
   const lineSegments4 = !interpolateMissingValues
     ? getLineSegmentsForMissingValues(props.data4)
-    : props.lineSegments4;
+    : props.lineSegments4
   const lineSegments5 = !interpolateMissingValues
     ? getLineSegmentsForMissingValues(props.data5)
-    : props.lineSegments5;
+    : props.lineSegments5
 
-  const highlightedRange = props.highlightedRange;
+  const highlightedRange = props.highlightedRange
 
-  let newPoints = "",
-    newFillPoints = "";
-  let counter = 0;
+  let newPoints = ''
+  let newFillPoints = ''
+  let counter = 0
 
-  const adjustToWidth = props.adjustToWidth || false;
+  const adjustToWidth = props.adjustToWidth ?? false
 
-  const initialSpacing = props.initialSpacing ?? LineDefaults.initialSpacing;
+  const initialSpacing = props.initialSpacing ?? LineDefaults.initialSpacing
   const endSpacing =
-    props.endSpacing ?? (adjustToWidth ? 0 : LineDefaults.endSpacing);
+    props.endSpacing ?? (adjustToWidth ? 0 : LineDefaults.endSpacing)
 
-  const thickness = props.thickness ?? LineDefaults.thickness;
+  const thickness = props.thickness ?? LineDefaults.thickness
 
   const yAxisLabelWidth =
     props.yAxisLabelWidth ??
     (props.hideYAxisText
       ? AxesAndRulesDefaults.yAxisEmptyLabelWidth
-      : AxesAndRulesDefaults.yAxisLabelWidth);
+      : AxesAndRulesDefaults.yAxisLabelWidth)
 
   const spacing =
     props.spacing ??
     (adjustToWidth
       ? ((props.width ?? screenWidth - yAxisLabelWidth) - initialSpacing) /
         Math.max((data0 ?? data).length - 1, 1)
-      : LineDefaults.spacing);
+      : LineDefaults.spacing)
 
   const xAxisThickness =
-    props.xAxisThickness ?? AxesAndRulesDefaults.xAxisThickness;
+    props.xAxisThickness ?? AxesAndRulesDefaults.xAxisThickness
   const dataPointsHeight1 =
     props.dataPointsHeight1 ??
     props.dataPointsHeight ??
-    LineDefaults.dataPointsHeight;
+    LineDefaults.dataPointsHeight
   const dataPointsWidth1 =
     props.dataPointsWidth1 ??
     props.dataPointsWidth ??
-    LineDefaults.dataPointsWidth;
+    LineDefaults.dataPointsWidth
   const dataPointsRadius1 =
     props.dataPointsRadius1 ??
     props.dataPointsRadius ??
-    LineDefaults.dataPointsRadius;
+    LineDefaults.dataPointsRadius
   const dataPointsColor1 =
     props.dataPointsColor1 ??
     props.dataPointsColor ??
-    LineDefaults.dataPointsColor;
+    LineDefaults.dataPointsColor
   const dataPointsShape1 =
     props.dataPointsShape1 ??
     props.dataPointsShape ??
-    LineDefaults.dataPointsShape;
+    LineDefaults.dataPointsShape
 
   const dataPointsHeight2 =
     props.dataPointsHeight2 ??
     props.dataPointsHeight ??
-    LineDefaults.dataPointsHeight;
+    LineDefaults.dataPointsHeight
   const dataPointsWidth2 =
     props.dataPointsWidth2 ??
     props.dataPointsWidth ??
-    LineDefaults.dataPointsWidth;
+    LineDefaults.dataPointsWidth
   const dataPointsRadius2 =
     props.dataPointsRadius2 ??
     props.dataPointsRadius ??
-    LineDefaults.dataPointsRadius;
+    LineDefaults.dataPointsRadius
   const dataPointsColor2 =
     props.dataPointsColor2 ??
     props.dataPointsColor ??
-    LineDefaults.dataPointsColor2;
+    LineDefaults.dataPointsColor2
   const dataPointsShape2 =
     props.dataPointsShape2 ??
     props.dataPointsShape ??
-    LineDefaults.dataPointsShape;
+    LineDefaults.dataPointsShape
 
   const dataPointsHeight3 =
     props.dataPointsHeight3 ??
     props.dataPointsHeight ??
-    LineDefaults.dataPointsHeight;
+    LineDefaults.dataPointsHeight
   const dataPointsWidth3 =
     props.dataPointsWidth3 ??
     props.dataPointsWidth ??
-    LineDefaults.dataPointsWidth;
+    LineDefaults.dataPointsWidth
   const dataPointsRadius3 =
     props.dataPointsRadius3 ??
     props.dataPointsRadius ??
-    LineDefaults.dataPointsRadius;
+    LineDefaults.dataPointsRadius
   const dataPointsColor3 =
     props.dataPointsColor3 ??
     props.dataPointsColor ??
-    LineDefaults.dataPointsColor3;
+    LineDefaults.dataPointsColor3
   const dataPointsShape3 =
     props.dataPointsShape3 ??
     props.dataPointsShape ??
-    LineDefaults.dataPointsShape;
+    LineDefaults.dataPointsShape
 
   const dataPointsHeight4 =
     props.dataPointsHeight4 ??
     props.dataPointsHeight ??
-    LineDefaults.dataPointsHeight;
+    LineDefaults.dataPointsHeight
   const dataPointsWidth4 =
     props.dataPointsWidth4 ??
     props.dataPointsWidth ??
-    LineDefaults.dataPointsWidth;
+    LineDefaults.dataPointsWidth
   const dataPointsRadius4 =
     props.dataPointsRadius4 ??
     props.dataPointsRadius ??
-    LineDefaults.dataPointsRadius;
+    LineDefaults.dataPointsRadius
   const dataPointsColor4 =
     props.dataPointsColor4 ??
     props.dataPointsColor ??
-    LineDefaults.dataPointsColor;
+    LineDefaults.dataPointsColor
   const dataPointsShape4 =
     props.dataPointsShape4 ??
     props.dataPointsShape ??
-    LineDefaults.dataPointsShape;
+    LineDefaults.dataPointsShape
 
   const dataPointsHeight5 =
     props.dataPointsHeight5 ??
     props.dataPointsHeight ??
-    LineDefaults.dataPointsHeight;
+    LineDefaults.dataPointsHeight
   const dataPointsWidth5 =
     props.dataPointsWidth5 ??
     props.dataPointsWidth ??
-    LineDefaults.dataPointsWidth;
+    LineDefaults.dataPointsWidth
   const dataPointsRadius5 =
     props.dataPointsRadius5 ??
     props.dataPointsRadius ??
-    LineDefaults.dataPointsRadius;
+    LineDefaults.dataPointsRadius
   const dataPointsColor5 =
     props.dataPointsColor5 ??
     props.dataPointsColor ??
-    LineDefaults.dataPointsColor;
+    LineDefaults.dataPointsColor
   const dataPointsShape5 =
     props.dataPointsShape5 ??
     props.dataPointsShape ??
-    LineDefaults.dataPointsShape;
+    LineDefaults.dataPointsShape
 
-  const areaChart = props.areaChart ?? false;
-  const areaChart1 = props.areaChart1 ?? false;
-  const areaChart2 = props.areaChart2 ?? false;
-  const areaChart3 = props.areaChart3 ?? false;
-  const areaChart4 = props.areaChart4 ?? false;
-  const areaChart5 = props.areaChart5 ?? false;
+  const areaChart = props.areaChart ?? false
+  const areaChart1 = props.areaChart1 ?? false
+  const areaChart2 = props.areaChart2 ?? false
+  const areaChart3 = props.areaChart3 ?? false
+  const areaChart4 = props.areaChart4 ?? false
+  const areaChart5 = props.areaChart5 ?? false
 
   const atLeastOneAreaChart =
-    dataSet?.some((set) => set.areaChart) ||
-    areaChart ||
-    areaChart1 ||
-    areaChart2 ||
-    areaChart3 ||
-    areaChart4 ||
-    areaChart5;
-
-  const stepChart = props.stepChart ?? false;
-  const stepChart1 = props.stepChart1 ?? false;
-  const stepChart2 = props.stepChart2 ?? false;
-  const stepChart3 = props.stepChart3 ?? false;
-  const stepChart4 = props.stepChart4 ?? false;
-  const stepChart5 = props.stepChart5 ?? false;
-
-  const edgePosition = props.edgePosition ?? LineDefaults.edgePosition;
+    dataSet?.some((set) => set.areaChart) ??
+    areaChart ??
+    areaChart1 ??
+    areaChart2 ??
+    areaChart3 ??
+    areaChart4 ??
+    areaChart5
+
+  const stepChart = props.stepChart ?? false
+  const stepChart1 = props.stepChart1 ?? false
+  const stepChart2 = props.stepChart2 ?? false
+  const stepChart3 = props.stepChart3 ?? false
+  const stepChart4 = props.stepChart4 ?? false
+  const stepChart5 = props.stepChart5 ?? false
+
+  const edgePosition = props.edgePosition ?? LineDefaults.edgePosition
 
   const textFontSize1 =
-    props.textFontSize1 ?? props.textFontSize ?? LineDefaults.textFontSize;
+    props.textFontSize1 ?? props.textFontSize ?? LineDefaults.textFontSize
   const textFontSize2 =
-    props.textFontSize2 ?? props.textFontSize ?? LineDefaults.textFontSize;
+    props.textFontSize2 ?? props.textFontSize ?? LineDefaults.textFontSize
   const textFontSize3 =
-    props.textFontSize3 ?? props.textFontSize ?? LineDefaults.textFontSize;
+    props.textFontSize3 ?? props.textFontSize ?? LineDefaults.textFontSize
   const textFontSize4 =
-    props.textFontSize4 ?? props.textFontSize ?? LineDefaults.textFontSize;
+    props.textFontSize4 ?? props.textFontSize ?? LineDefaults.textFontSize
   const textFontSize5 =
-    props.textFontSize5 ?? props.textFontSize ?? LineDefaults.textFontSize;
+    props.textFontSize5 ?? props.textFontSize ?? LineDefaults.textFontSize
   const textColor1 =
-    props.textColor1 ?? props.textColor ?? LineDefaults.textColor;
+    props.textColor1 ?? props.textColor ?? LineDefaults.textColor
   const textColor2 =
-    props.textColor2 ?? props.textColor ?? LineDefaults.textColor;
+    props.textColor2 ?? props.textColor ?? LineDefaults.textColor
   const textColor3 =
-    props.textColor3 ?? props.textColor ?? LineDefaults.textColor;
+    props.textColor3 ?? props.textColor ?? LineDefaults.textColor
   const textColor4 =
-    props.textColor4 ?? props.textColor ?? LineDefaults.textColor;
+    props.textColor4 ?? props.textColor ?? LineDefaults.textColor
   const textColor5 =
-    props.textColor5 ?? props.textColor ?? LineDefaults.textColor;
+    props.textColor5 ?? props.textColor ?? LineDefaults.textColor
 
-  const totalWidth = initialSpacing + spacing * (data0 ?? data).length;
+  const totalWidth = initialSpacing + spacing * (data0 ?? data).length
 
   const { maxItem, minItem } = computeMaxAndMinItems(
     data0 ?? data,
     props.roundToDigits,
     props.showFractionalValues
-  );
+  )
 
   const maxValue = getMaxValue(
     props.maxValue,
     props.stepValue,
     noOfSections,
     maxItem
-  );
+  )
 
-  const mostNegativeValue = props.mostNegativeValue || minItem;
+  const mostNegativeValue = props.mostNegativeValue ?? minItem
 
-  const overflowTop = props.overflowTop ?? 0;
+  const overflowTop = props.overflowTop ?? 0
 
   const extendedContainerHeight = getExtendedContainerHeightWithPadding(
     containerHeight,
     overflowTop
-  );
-  const getX = (index) => initialSpacing + spacing * index - 1;
-  const getY = (value) =>
-    extendedContainerHeight - (value * containerHeight) / maxValue;
+  )
+  const getX = (index: number): number => initialSpacing + spacing * index - 1
+  const getY = (value: number): number =>
+    extendedContainerHeight - (value * containerHeight) / maxValue
 
   const { maxItem: secondaryMaxItem } = computeMaxAndMinItems(
     secondaryData,
     props.secondaryYAxis?.roundToDigits,
     props.secondaryYAxis?.showFractionalValues
-  );
+  )
   const secondaryMaxValue =
-    props.secondaryYAxis?.maxValue ?? (secondaryMaxItem || maxValue);
-  const getSecondaryY = (value) =>
-    extendedContainerHeight - (value * containerHeight) / secondaryMaxValue;
-  const heightUptoXaxis = extendedContainerHeight - xAxisThickness;
+    props.secondaryYAxis?.maxValue ?? (secondaryMaxItem || maxValue)
+  const getSecondaryY = (value: number): number =>
+    extendedContainerHeight - (value * containerHeight) / secondaryMaxValue
+  const heightUptoXaxis = extendedContainerHeight - xAxisThickness
 
   if (animateOnDataChange) {
     animations.forEach((item, index) => {
       item.addListener((val) => {
-        const temp = data[index]?.value ?? 0;
-        data[index].value = val.value;
-        let pp = "",
-          ppp = "";
+        const temp = data[index]?.value ?? 0
+        data[index].value = val.value
+        let pp = ''
+        let ppp = ''
         if (!(dataSet?.[0].curved ?? props.curved)) {
           for (let i = 0; i < (data0 ?? data).length; i++) {
-            pp += "L" + getX(i) + " " + getY((data0 ?? data)[i].value) + " ";
+            pp += 'L' + getX(i) + ' ' + getY((data0 ?? data)[i].value) + ' '
           }
           if (dataSet?.[0]?.areaChart ?? areaChart) {
-            ppp = "L" + initialSpacing + " " + heightUptoXaxis + " ";
-            ppp += pp;
+            ppp = 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
+            ppp += pp
             ppp +=
-              "L" +
+              'L' +
               (initialSpacing + spacing * (data.length - 1)) +
-              " " +
-              heightUptoXaxis;
-            ppp += "L" + initialSpacing + " " + heightUptoXaxis + " ";
+              ' ' +
+              heightUptoXaxis
+            ppp += 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
           }
-          newPoints = pp;
-          newFillPoints = ppp;
-          setPointsOnChange();
+          newPoints = pp
+          newFillPoints = ppp
+          setPointsOnChange()
         }
-        counter++;
-        data[index].value = temp;
-      });
-    });
+        counter++
+        data[index].value = temp
+      })
+    })
   }
 
-  const setPointsOnChange = () => {
+  const setPointsOnChange = (): void => {
     if (counter === data.length) {
       if (!props.curved) {
-        setPoints(newPoints.replace("L", "M"));
+        setPoints(newPoints.replace('L', 'M'))
         if (areaChart) {
-          setFillPoints(newFillPoints.replace("L", "M"));
+          setFillPoints(newFillPoints.replace('L', 'M'))
         }
       }
     }
-  };
+  }
 
   const showValuesAsDataPointsText =
-    props.showValuesAsDataPointsText ?? LineDefaults.showValuesAsDataPointsText;
+    props.showValuesAsDataPointsText ?? LineDefaults.showValuesAsDataPointsText
 
   const thickness1 =
-    props.thickness1 ?? props.thickness ?? LineDefaults.thickness;
+    props.thickness1 ?? props.thickness ?? LineDefaults.thickness
   const thickness2 =
-    props.thickness2 ?? props.thickness ?? LineDefaults.thickness;
+    props.thickness2 ?? props.thickness ?? LineDefaults.thickness
   const thickness3 =
-    props.thickness3 ?? props.thickness ?? LineDefaults.thickness;
+    props.thickness3 ?? props.thickness ?? LineDefaults.thickness
   const thickness4 =
-    props.thickness4 ?? props.thickness ?? LineDefaults.thickness;
+    props.thickness4 ?? props.thickness ?? LineDefaults.thickness
   const thickness5 =
-    props.thickness5 ?? props.thickness ?? LineDefaults.thickness;
-
-  const zIndex1 = props.zIndex1 ?? 0;
-  const zIndex2 = props.zIndex2 ?? 0;
-  const zIndex3 = props.zIndex3 ?? 0;
-  const zIndex4 = props.zIndex4 ?? 0;
-  const zIndex5 = props.zIndex5 ?? 0;
-
-  const strokeDashArray1 = props.strokeDashArray1 ?? props.strokeDashArray;
-  const strokeDashArray2 = props.strokeDashArray2 ?? props.strokeDashArray;
-  const strokeDashArray3 = props.strokeDashArray3 ?? props.strokeDashArray;
-  const strokeDashArray4 = props.strokeDashArray4 ?? props.strokeDashArray;
-  const strokeDashArray5 = props.strokeDashArray5 ?? props.strokeDashArray;
-
-  const rotateLabel = props.rotateLabel ?? false;
-  const isAnimated = props.isAnimated ?? false;
-  const hideDataPoints1 =
-    props.hideDataPoints ?? props.hideDataPoints1 ?? false;
-  const hideDataPoints2 =
-    props.hideDataPoints ?? props.hideDataPoints2 ?? false;
-  const hideDataPoints3 =
-    props.hideDataPoints ?? props.hideDataPoints3 ?? false;
-  const hideDataPoints4 =
-    props.hideDataPoints ?? props.hideDataPoints4 ?? false;
-  const hideDataPoints5 =
-    props.hideDataPoints ?? props.hideDataPoints5 ?? false;
-
-  const color1 = props.color1 ?? props.color ?? LineDefaults.color;
-  const color2 = props.color2 ?? props.color ?? LineDefaults.color;
-  const color3 = props.color3 ?? props.color ?? LineDefaults.color;
-  const color4 = props.color4 ?? props.color ?? LineDefaults.color;
-  const color5 = props.color5 ?? props.color ?? LineDefaults.color;
+    props.thickness5 ?? props.thickness ?? LineDefaults.thickness
+
+  const zIndex1 = props.zIndex1 ?? 0
+  const zIndex2 = props.zIndex2 ?? 0
+  const zIndex3 = props.zIndex3 ?? 0
+  const zIndex4 = props.zIndex4 ?? 0
+  const zIndex5 = props.zIndex5 ?? 0
+
+  const strokeDashArray1 = props.strokeDashArray1 ?? props.strokeDashArray
+  const strokeDashArray2 = props.strokeDashArray2 ?? props.strokeDashArray
+  const strokeDashArray3 = props.strokeDashArray3 ?? props.strokeDashArray
+  const strokeDashArray4 = props.strokeDashArray4 ?? props.strokeDashArray
+  const strokeDashArray5 = props.strokeDashArray5 ?? props.strokeDashArray
+
+  const rotateLabel = props.rotateLabel ?? false
+  const isAnimated = props.isAnimated ?? false
+  const hideDataPoints1 = props.hideDataPoints ?? props.hideDataPoints1 ?? false
+  const hideDataPoints2 = props.hideDataPoints ?? props.hideDataPoints2 ?? false
+  const hideDataPoints3 = props.hideDataPoints ?? props.hideDataPoints3 ?? false
+  const hideDataPoints4 = props.hideDataPoints ?? props.hideDataPoints4 ?? false
+  const hideDataPoints5 = props.hideDataPoints ?? props.hideDataPoints5 ?? false
+
+  const color1 = props.color1 ?? props.color ?? LineDefaults.color
+  const color2 = props.color2 ?? props.color ?? LineDefaults.color
+  const color3 = props.color3 ?? props.color ?? LineDefaults.color
+  const color4 = props.color4 ?? props.color ?? LineDefaults.color
+  const color5 = props.color5 ?? props.color ?? LineDefaults.color
 
   const startFillColor1 =
-    props.startFillColor1 ??
-    props.startFillColor ??
-    LineDefaults.startFillColor;
+    props.startFillColor1 ?? props.startFillColor ?? LineDefaults.startFillColor
   const endFillColor1 =
-    props.endFillColor1 ?? props.endFillColor ?? LineDefaults.endFillColor;
-  const startOpacity = props.startOpacity ?? LineDefaults.startOpacity;
-  const endOpacity = props.endOpacity ?? LineDefaults.endOpacity;
-  const startOpacity1 = props.startOpacity1 ?? startOpacity;
-  const endOpacity1 = props.endOpacity1 ?? endOpacity;
+    props.endFillColor1 ?? props.endFillColor ?? LineDefaults.endFillColor
+  const startOpacity = props.startOpacity ?? LineDefaults.startOpacity
+  const endOpacity = props.endOpacity ?? LineDefaults.endOpacity
+  const startOpacity1 = props.startOpacity1 ?? startOpacity
+  const endOpacity1 = props.endOpacity1 ?? endOpacity
 
   const startFillColor2 =
-    props.startFillColor2 ??
-    props.startFillColor ??
-    LineDefaults.startFillColor;
+    props.startFillColor2 ?? props.startFillColor ?? LineDefaults.startFillColor
   const endFillColor2 =
-    props.endFillColor2 ?? props.endFillColor ?? LineDefaults.endFillColor;
-  const startOpacity2 = props.startOpacity2 ?? startOpacity;
-  const endOpacity2 = props.endOpacity2 ?? endOpacity;
+    props.endFillColor2 ?? props.endFillColor ?? LineDefaults.endFillColor
+  const startOpacity2 = props.startOpacity2 ?? startOpacity
+  const endOpacity2 = props.endOpacity2 ?? endOpacity
 
   const startFillColor3 =
-    props.startFillColor3 ??
-    props.startFillColor ??
-    LineDefaults.startFillColor;
+    props.startFillColor3 ?? props.startFillColor ?? LineDefaults.startFillColor
   const endFillColor3 =
-    props.endFillColor3 ?? props.endFillColor ?? LineDefaults.endFillColor;
-  const startOpacity3 = props.startOpacity3 ?? startOpacity;
-  const endOpacity3 = props.endOpacity3 ?? endOpacity;
+    props.endFillColor3 ?? props.endFillColor ?? LineDefaults.endFillColor
+  const startOpacity3 = props.startOpacity3 ?? startOpacity
+  const endOpacity3 = props.endOpacity3 ?? endOpacity
 
   const startFillColor4 =
-    props.startFillColor4 ??
-    props.startFillColor ??
-    LineDefaults.startFillColor;
+    props.startFillColor4 ?? props.startFillColor ?? LineDefaults.startFillColor
   const endFillColor4 =
-    props.endFillColor4 ?? props.endFillColor ?? LineDefaults.endFillColor;
-  const startOpacity4 = props.startOpacity4 ?? startOpacity;
-  const endOpacity4 = props.endOpacity4 ?? endOpacity;
+    props.endFillColor4 ?? props.endFillColor ?? LineDefaults.endFillColor
+  const startOpacity4 = props.startOpacity4 ?? startOpacity
+  const endOpacity4 = props.endOpacity4 ?? endOpacity
 
   const startFillColor5 =
-    props.startFillColor5 ??
-    props.startFillColor ??
-    LineDefaults.startFillColor;
+    props.startFillColor5 ?? props.startFillColor ?? LineDefaults.startFillColor
   const endFillColor5 =
-    props.endFillColor5 ?? props.endFillColor ?? LineDefaults.endFillColor;
-  const startOpacity5 = props.startOpacity5 ?? startOpacity;
-  const endOpacity5 = props.endOpacity5 ?? endOpacity;
+    props.endFillColor5 ?? props.endFillColor ?? LineDefaults.endFillColor
+  const startOpacity5 = props.startOpacity5 ?? startOpacity
+  const endOpacity5 = props.endOpacity5 ?? endOpacity
 
-  defaultArrowConfig.strokeWidth = dataSet?.[0]?.thickness ?? thickness1;
-  defaultArrowConfig.strokeColor = dataSet?.[0]?.color ?? color1;
+  defaultArrowConfig.strokeWidth = dataSet?.[0]?.thickness ?? thickness1
+  defaultArrowConfig.strokeColor = dataSet?.[0]?.color ?? color1
   const {
     arrowLength1,
     arrowWidth1,
@@ -617,8 +596,8 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     arrowStrokeWidthsFromSet,
     arrowStrokeColorsFromSet,
     arrowFillColorsFromSet,
-    showArrowBasesFromSet,
-  } = getAllArrowProperties(props, defaultArrowConfig);
+    showArrowBasesFromSet
+  } = getAllArrowProperties(props, defaultArrowConfig)
 
   const secondaryLineConfig = {
     zIndex: props.secondaryLineConfig?.zIndex ?? zIndex1,
@@ -656,72 +635,83 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     textFontSize: props.secondaryLineConfig?.textFontSize ?? textFontSize1,
     textColor: props.secondaryLineConfig?.textColor ?? textColor1,
     showArrow: props.secondaryLineConfig?.showArrow ?? props.showArrows,
-    arrowConfig: props.secondaryLineConfig?.arrowConfig ?? props.arrowConfig,
-  };
+    arrowConfig: props.secondaryLineConfig?.arrowConfig ?? props.arrowConfig
+  }
 
   const addLeadingAndTrailingPathForAreaFill = (
-    initialPath,
-    value,
-    dataLength
-  ) => {
+    initialPath: string,
+    value: number,
+    dataLength: number
+  ): string => {
     return (
-      "M " +
+      'M ' +
       initialSpacing +
-      "," +
+      ',' +
       heightUptoXaxis +
-      " " +
-      "L " +
+      ' ' +
+      'L ' +
       initialSpacing +
-      "," +
+      ',' +
       getY(value) +
-      " " +
+      ' ' +
       initialPath +
-      " " +
-      "L " +
+      ' ' +
+      'L ' +
       (initialSpacing + spacing * (dataLength - 1)) +
-      "," +
+      ',' +
       heightUptoXaxis +
-      " " +
-      "L " +
+      ' ' +
+      'L ' +
       initialSpacing +
-      "," +
+      ',' +
       heightUptoXaxis +
-      " "
-    );
-  };
+      ' '
+    )
+  }
 
-  const getNextPoint = (data, index, around, before) => {
-    const isLast = index === data.length - 1;
+  const getNextPoint = (
+    data: lineDataItem[],
+    index: number,
+    around: boolean,
+    before: boolean
+  ): string => {
+    const isLast = index === data.length - 1
     return isLast && !(around || before)
-      ? " "
-      : " L" +
+      ? ' '
+      : ' L' +
           (getX(index) +
             (around ? (isLast ? 0 : spacing / 2) : before ? 0 : spacing)) +
-          " " +
+          ' ' +
           getY(data[index].value) +
-          " ";
-  };
-  const getStepPath = (data, i) => {
-    const around = edgePosition === EdgePosition.AROUND_DATA_POINT;
-    const before = edgePosition === EdgePosition.BEFORE_DATA_POINT;
+          ' '
+  }
+  const getStepPath = (data: lineDataItem[], i: number): string => {
+    const around = edgePosition === EdgePosition.AROUND_DATA_POINT
+    const before = edgePosition === EdgePosition.BEFORE_DATA_POINT
     return (
-      "L" +
+      'L' +
       (getX(i) -
         (around && i > 0 ? spacing / 2 : before && i > 0 ? spacing : 0)) +
-      " " +
+      ' ' +
       getY(data[i].value) +
       getNextPoint(data, i, around, before)
-    );
-  };
+    )
+  }
 
-  const getSegmentPath = (data, i, lineSegment, startIndex, endIndex) => {
+  const getSegmentPath = (
+    data: lineDataItem[],
+    i: number,
+    lineSegment: LineSegment[] | undefined,
+    startIndex: number,
+    endIndex: number
+  ): string => {
     let path =
-      "L" +
+      'L' +
       getX(i) +
-      " " +
+      ' ' +
       getY(data[i].value) +
-      " " +
-      getSegmentString(lineSegment, i, SEGMENT_START, SEGMENT_END);
+      ' ' +
+      getSegmentString(lineSegment, i, SEGMENT_START, SEGMENT_END)
 
     if (highlightedRange) {
       path += getPathWithHighlight(
@@ -732,32 +722,32 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
         endIndex,
         getX,
         getY
-      );
+      )
     }
-    return path;
-  };
+    return path
+  }
 
   useEffect(() => {
     if (dataSet) {
-      const pointsArray: string[] = [];
-      const arrowPointsArray: string[] = [];
-      const fillPointsArray: string[] = [];
+      const pointsArray: string[] = []
+      const arrowPointsArray: string[] = []
+      const fillPointsArray: string[] = []
       dataSet.map((set, index) => {
         if (set.curved ?? props.curved) {
-          const pArray: Array<Array<number>> = [];
+          const pArray: number[][] = []
           for (let i = 0; i < set.data.length; i++) {
             if (
               i >= (set.startIndex ?? 0) &&
               i <= (set.endIndex ?? set.data.length - 1)
             ) {
-              pArray.push([getX(i), getY(set.data[i].value)]);
+              pArray.push([getX(i), getY(set.data[i].value)])
             }
           }
           let xx = svgPath(
             pArray,
             set.curveType ?? curveType,
             set.curvature ?? curvature
-          );
+          )
           pointsArray.push(
             getCurvePathWithSegments(
               xx,
@@ -765,46 +755,46 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
               SEGMENT_START,
               SEGMENT_END
             )
-          );
+          )
 
           // For Arrow-
           if (set.data.length > 1 && (set.showArrow ?? props.showArrows)) {
-            let arrowTipY = pArray[pArray.length - 1][1];
-            let arrowTipX = pArray[pArray.length - 1][0];
-            let y1 = pArray[pArray.length - 2][1];
-            let x1 = pArray[pArray.length - 2][0];
+            const arrowTipY = pArray[pArray.length - 1][1]
+            const arrowTipX = pArray[pArray.length - 1][0]
+            const y1 = pArray[pArray.length - 2][1]
+            const x1 = pArray[pArray.length - 2][0]
 
-            let arrowPoints = getArrowPoints(
+            const arrowPoints = getArrowPoints(
               arrowTipX,
               arrowTipY,
               x1,
               y1,
-              arrowLengthsFromSet[index],
-              arrowWidthsFromSet[index],
-              showArrowBasesFromSet[index]
-            );
+              arrowLengthsFromSet?.[index],
+              arrowWidthsFromSet?.[index],
+              showArrowBasesFromSet?.[index]
+            )
 
-            arrowPointsArray.push(arrowPoints);
+            arrowPointsArray.push(arrowPoints)
           }
 
           // For Area charts-
-          if ((set.areaChart || areaChart) && set.data.length) {
+          if ((set.areaChart ?? areaChart) && set.data.length > 0) {
             xx = addLeadingAndTrailingPathForAreaFill(
               xx,
               set.data[0].value,
               set.data.length
-            );
-            fillPointsArray.push(xx);
+            )
+            fillPointsArray.push(xx)
           }
         } else {
-          let pp = "";
+          let pp = ''
           for (let i = 0; i < set.data.length; i++) {
             if (
               i >= (set.startIndex ?? 0) &&
               i <= (set.endIndex ?? set.data.length - 1)
             ) {
-              if (set.stepChart || stepChart) {
-                pp += getStepPath(set.data, i);
+              if (set.stepChart ?? stepChart) {
+                pp += getStepPath(set.data, i)
               } else {
                 pp += getSegmentPath(
                   set.data,
@@ -812,64 +802,66 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
                   set.lineSegments,
                   set.startIndex ?? 0,
                   set.endIndex ?? set.data.length - 1
-                );
+                )
               }
             }
           }
-          pointsArray.push(pp.replace("L", "M"));
+          pointsArray.push(pp.replace('L', 'M'))
 
           // For Arrow-
           if (set.data.length > 1 && (set.showArrow ?? props.showArrows)) {
-            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,
-              arrowLengthsFromSet[index],
-              arrowWidthsFromSet[index],
-              showArrowBasesFromSet[index]
-            );
+              arrowLengthsFromSet?.[index],
+              arrowWidthsFromSet?.[index],
+              showArrowBasesFromSet?.[index]
+            )
 
-            arrowPointsArray.push(arrowPoints);
+            arrowPointsArray.push(arrowPoints)
           }
 
           // For Area charts-
-          if ((set.areaChart || areaChart) && set.data.length) {
-            let ppp = "L" + initialSpacing + " " + heightUptoXaxis + " ";
-            ppp += pp;
+          if ((set.areaChart ?? areaChart) && set.data.length > 0) {
+            let ppp = 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
+            ppp += pp
             ppp +=
-              "L" +
+              'L' +
               (initialSpacing + spacing * (set.data.length - 1)) +
-              " " +
-              heightUptoXaxis;
-            ppp += "L" + initialSpacing + " " + heightUptoXaxis + " ";
-            fillPointsArray.push(ppp.replace("L", "M"));
+              ' ' +
+              heightUptoXaxis
+            ppp += 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
+            fillPointsArray.push(ppp.replace('L', 'M'))
           }
         }
-      });
 
-      setPointsFromSet(pointsArray);
-      setArrowPointsFromSet(arrowPointsArray);
-      setFillPointsFromSet(fillPointsArray);
+        return null
+      })
+
+      setPointsFromSet(pointsArray)
+      setArrowPointsFromSet(arrowPointsArray)
+      setFillPointsFromSet(fillPointsArray)
     } else {
-      let pp = "",
-        pp2 = "",
-        pp3 = "",
-        pp4 = "",
-        pp5 = "";
+      let pp = ''
+      let pp2 = ''
+      let pp3 = ''
+      let pp4 = ''
+      let pp5 = ''
       if (!props.curved) {
         for (let i = 0; i < data.length; i++) {
           if (i >= startIndex1 && i <= endIndex1 && !animateOnDataChange) {
-            if (stepChart || stepChart1) {
-              pp += getStepPath(data, i);
+            if (stepChart ?? stepChart1) {
+              pp += getStepPath(data, i)
             } else {
               pp += getSegmentPath(
                 data,
@@ -877,13 +869,12 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
                 lineSegments,
                 startIndex1,
                 endIndex1
-              );
+              )
             }
           }
-          if (data2.length && i >= startIndex2 && i <= endIndex2) {
-            if (stepChart || stepChart2) {
-              pp2 += getStepPath(data2, i);
-              (" ");
+          if (data2.length > 0 && i >= startIndex2 && i <= endIndex2) {
+            if (stepChart ?? stepChart2) {
+              pp2 += getStepPath(data2, i)
             } else {
               pp2 += getSegmentPath(
                 data2,
@@ -891,12 +882,12 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
                 lineSegments2,
                 startIndex2,
                 endIndex2
-              );
+              )
             }
           }
-          if (data3.length && i >= startIndex3 && i <= endIndex3) {
-            if (stepChart || stepChart3) {
-              pp3 += getStepPath(data3, i);
+          if (data3.length > 0 && i >= startIndex3 && i <= endIndex3) {
+            if (stepChart ?? stepChart3) {
+              pp3 += getStepPath(data3, i)
             } else {
               pp3 += getSegmentPath(
                 data3,
@@ -904,12 +895,12 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
                 lineSegments3,
                 startIndex3,
                 endIndex3
-              );
+              )
             }
           }
-          if (data4.length && i >= startIndex4 && i <= endIndex4) {
-            if (stepChart || stepChart4) {
-              pp4 += getStepPath(data4, i);
+          if (data4.length > 0 && i >= startIndex4 && i <= endIndex4) {
+            if (stepChart ?? stepChart4) {
+              pp4 += getStepPath(data4, i)
             } else {
               pp4 += getSegmentPath(
                 data4,
@@ -917,12 +908,12 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
                 lineSegments4,
                 startIndex4,
                 endIndex4
-              );
+              )
             }
           }
-          if (data5.length && i >= startIndex5 && i <= endIndex5) {
-            if (stepChart || stepChart5) {
-              pp5 += getStepPath(data5, i);
+          if (data5.length > 0 && i >= startIndex5 && i <= endIndex5) {
+            if (stepChart ?? stepChart5) {
+              pp5 += getStepPath(data5, i)
             } else {
               pp5 += getSegmentPath(
                 data5,
@@ -930,27 +921,27 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
                 lineSegments5,
                 startIndex5,
                 endIndex5
-              );
+              )
             }
           }
         }
-        setPoints2(pp2.replace("L", "M"));
-        setPoints3(pp3.replace("L", "M"));
-        setPoints4(pp4.replace("L", "M"));
-        setPoints5(pp5.replace("L", "M"));
-
-        setPoints(pp.replace("L", "M"));
-
-        if (data.length > 1 && (props.showArrow1 || props.showArrows)) {
-          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(
+        setPoints2(pp2.replace('L', 'M'))
+        setPoints3(pp3.replace('L', 'M'))
+        setPoints4(pp4.replace('L', 'M'))
+        setPoints5(pp5.replace('L', 'M'))
+
+        setPoints(pp.replace('L', 'M'))
+
+        if (data.length > 1 && (props.showArrow1 ?? props.showArrows)) {
+          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,
@@ -958,21 +949,21 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
             arrowLength1,
             arrowWidth1,
             showArrowBase1
-          );
+          )
 
-          setArrow1Points(arrowPoints);
+          setArrow1Points(arrowPoints)
         }
 
-        if (data2.length > 1 && (props.showArrow2 || props.showArrows)) {
-          let ppArray = pp2.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", ""));
+        if (data2.length > 1 && (props.showArrow2 ?? props.showArrows)) {
+          const ppArray = pp2.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', ''))
 
-          let arrowPoints = getArrowPoints(
+          const arrowPoints = getArrowPoints(
             arrowTipX,
             arrowTipY,
             x1,
@@ -980,21 +971,21 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
             arrowLength2,
             arrowWidth2,
             showArrowBase2
-          );
+          )
 
-          setArrow2Points(arrowPoints);
+          setArrow2Points(arrowPoints)
         }
 
-        if (data3.length > 1 && (props.showArrow3 || props.showArrows)) {
-          let ppArray = pp3.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", ""));
+        if (data3.length > 1 && (props.showArrow3 ?? props.showArrows)) {
+          const ppArray = pp3.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', ''))
 
-          let arrowPoints = getArrowPoints(
+          const arrowPoints = getArrowPoints(
             arrowTipX,
             arrowTipY,
             x1,
@@ -1002,21 +993,21 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
             arrowLength3,
             arrowWidth3,
             showArrowBase3
-          );
+          )
 
-          setArrow3Points(arrowPoints);
+          setArrow3Points(arrowPoints)
         }
 
-        if (data4.length > 1 && (props.showArrow4 || props.showArrows)) {
-          let ppArray = pp4.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", ""));
+        if (data4.length > 1 && (props.showArrow4 ?? props.showArrows)) {
+          const ppArray = pp4.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', ''))
 
-          let arrowPoints = getArrowPoints(
+          const arrowPoints = getArrowPoints(
             arrowTipX,
             arrowTipY,
             x1,
@@ -1024,21 +1015,21 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
             arrowLength4,
             arrowWidth4,
             showArrowBase4
-          );
+          )
 
-          setArrow4Points(arrowPoints);
+          setArrow4Points(arrowPoints)
         }
 
-        if (data5.length > 1 && (props.showArrow5 || props.showArrows)) {
-          let ppArray = pp5.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", ""));
+        if (data5.length > 1 && (props.showArrow5 ?? props.showArrows)) {
+          const ppArray = pp5.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', ''))
 
-          let arrowPoints = getArrowPoints(
+          const arrowPoints = getArrowPoints(
             arrowTipX,
             arrowTipY,
             x1,
@@ -1046,117 +1037,117 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
             arrowLength5,
             arrowWidth5,
             showArrowBase5
-          );
+          )
 
-          setArrow5Points(arrowPoints);
+          setArrow5Points(arrowPoints)
         }
 
-        /***************************          For Area Charts          *************************/
+        /** *************************          For Area Charts          *************************/
         if (atLeastOneAreaChart) {
-          let ppp = "",
-            ppp2 = "",
-            ppp3 = "",
-            ppp4 = "",
-            ppp5 = "";
+          let ppp = ''
+          let ppp2 = ''
+          let ppp3 = ''
+          let ppp4 = ''
+          let ppp5 = ''
 
           if (
-            (areaChart || areaChart1) &&
-            data.length &&
+            (areaChart ?? areaChart1) &&
+            data.length > 0 &&
             !animateOnDataChange
           ) {
-            ppp = "L" + initialSpacing + " " + heightUptoXaxis + " ";
-            ppp += pp;
+            ppp = 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
+            ppp += pp
             ppp +=
-              "L" +
+              'L' +
               (initialSpacing + spacing * (data.length - 1)) +
-              " " +
-              heightUptoXaxis;
-            ppp += "L" + initialSpacing + " " + heightUptoXaxis + " ";
-            setFillPoints(ppp.replace("L", "M"));
+              ' ' +
+              heightUptoXaxis
+            ppp += 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
+            setFillPoints(ppp.replace('L', 'M'))
           }
 
-          if ((areaChart || areaChart2) && data2.length) {
-            ppp2 = "L" + initialSpacing + " " + heightUptoXaxis + " ";
-            ppp2 += pp2;
+          if ((areaChart ?? areaChart2) && data2.length > 0) {
+            ppp2 = 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
+            ppp2 += pp2
             ppp2 +=
-              "L" +
+              'L' +
               (initialSpacing + spacing * (data.length - 1)) +
-              " " +
-              heightUptoXaxis;
-            ppp2 += "L" + initialSpacing + " " + heightUptoXaxis + " ";
-            setFillPoints2(ppp2.replace("L", "M"));
+              ' ' +
+              heightUptoXaxis
+            ppp2 += 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
+            setFillPoints2(ppp2.replace('L', 'M'))
           }
 
-          if ((areaChart || areaChart3) && data3.length) {
-            ppp3 = "L" + initialSpacing + " " + heightUptoXaxis + " ";
-            ppp3 += pp3;
+          if ((areaChart ?? areaChart3) && data3.length > 0) {
+            ppp3 = 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
+            ppp3 += pp3
             ppp3 +=
-              "L" +
+              'L' +
               (initialSpacing + spacing * (data.length - 1)) +
-              " " +
-              heightUptoXaxis;
-            ppp3 += "L" + initialSpacing + " " + heightUptoXaxis + " ";
-            setFillPoints3(ppp3.replace("L", "M"));
+              ' ' +
+              heightUptoXaxis
+            ppp3 += 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
+            setFillPoints3(ppp3.replace('L', 'M'))
           }
-          if ((areaChart || areaChart4) && data4.length) {
-            ppp4 = "L" + initialSpacing + " " + heightUptoXaxis + " ";
-            ppp4 += pp4;
+          if ((areaChart ?? areaChart4) && data4.length > 0) {
+            ppp4 = 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
+            ppp4 += pp4
             ppp4 +=
-              "L" +
+              'L' +
               (initialSpacing + spacing * (data.length - 1)) +
-              " " +
-              heightUptoXaxis;
-            ppp4 += "L" + initialSpacing + " " + heightUptoXaxis + " ";
-            setFillPoints4(ppp4.replace("L", "M"));
+              ' ' +
+              heightUptoXaxis
+            ppp4 += 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
+            setFillPoints4(ppp4.replace('L', 'M'))
           }
 
-          if ((areaChart || areaChart5) && data5.length) {
-            ppp5 = "L" + initialSpacing + " " + heightUptoXaxis + " ";
-            ppp5 += pp5;
+          if ((areaChart ?? areaChart5) && data5.length > 0) {
+            ppp5 = 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
+            ppp5 += pp5
             ppp5 +=
-              "L" +
+              'L' +
               (initialSpacing + spacing * (data.length - 1)) +
-              " " +
-              heightUptoXaxis;
-            ppp5 += "L" + initialSpacing + " " + heightUptoXaxis + " ";
-            setFillPoints5(ppp5.replace("L", "M"));
+              ' ' +
+              heightUptoXaxis
+            ppp5 += 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
+            setFillPoints5(ppp5.replace('L', 'M'))
           }
         }
 
         /*************************************************************************************/
       } else {
-        const p1Array: Array<Array<number>> = [],
-          p2Array: Array<Array<number>> = [],
-          p3Array: Array<Array<number>> = [],
-          p4Array: Array<Array<number>> = [],
-          p5Array: Array<Array<number>> = [];
+        const p1Array: number[][] = []
+        const p2Array: number[][] = []
+        const p3Array: number[][] = []
+        const p4Array: number[][] = []
+        const p5Array: number[][] = []
         for (let i = 0; i < data.length; i++) {
           if (i >= startIndex1 && i <= endIndex1) {
-            p1Array.push([getX(i), getY(data[i].value)]);
+            p1Array.push([getX(i), getY(data[i].value)])
           }
-          if (data2.length && i >= startIndex2 && i <= endIndex2) {
-            p2Array.push([getX(i), getY(data2[i].value)]);
+          if (data2.length > 0 && i >= startIndex2 && i <= endIndex2) {
+            p2Array.push([getX(i), getY(data2[i].value)])
           }
-          if (data3.length && i >= startIndex3 && i <= endIndex3) {
-            p3Array.push([getX(i), getY(data3[i].value)]);
+          if (data3.length > 0 && i >= startIndex3 && i <= endIndex3) {
+            p3Array.push([getX(i), getY(data3[i].value)])
           }
-          if (data4.length && i >= startIndex4 && i <= endIndex4) {
-            p4Array.push([getX(i), getY(data4[i].value)]);
+          if (data4.length > 0 && i >= startIndex4 && i <= endIndex4) {
+            p4Array.push([getX(i), getY(data4[i].value)])
           }
-          if (data5.length && i >= startIndex5 && i <= endIndex5) {
-            p5Array.push([getX(i), getY(data5[i].value)]);
+          if (data5.length > 0 && i >= startIndex5 && i <= endIndex5) {
+            p5Array.push([getX(i), getY(data5[i].value)])
           }
         }
 
-        let xx = svgPath(p1Array, curveType, curvature);
-        let xx2 = svgPath(p2Array, curveType, curvature);
-        let xx3 = svgPath(p3Array, curveType, curvature);
-        let xx4 = svgPath(p4Array, curveType, curvature);
-        let xx5 = svgPath(p5Array, curveType, curvature);
+        let xx = svgPath(p1Array, curveType, curvature)
+        let xx2 = svgPath(p2Array, curveType, curvature)
+        let xx3 = svgPath(p3Array, curveType, curvature)
+        let xx4 = svgPath(p4Array, curveType, curvature)
+        let xx5 = svgPath(p5Array, curveType, curvature)
 
         setPoints(
           getCurvePathWithSegments(xx, lineSegments, SEGMENT_START, SEGMENT_END)
-        );
+        )
         setPoints2(
           getCurvePathWithSegments(
             xx2,
@@ -1164,7 +1155,7 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
             SEGMENT_START,
             SEGMENT_END
           )
-        );
+        )
         setPoints3(
           getCurvePathWithSegments(
             xx3,
@@ -1172,7 +1163,7 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
             SEGMENT_START,
             SEGMENT_END
           )
-        );
+        )
         setPoints4(
           getCurvePathWithSegments(
             xx4,
@@ -1180,7 +1171,7 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
             SEGMENT_START,
             SEGMENT_END
           )
-        );
+        )
         setPoints5(
           getCurvePathWithSegments(
             xx5,
@@ -1188,15 +1179,15 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
             SEGMENT_START,
             SEGMENT_END
           )
-        );
+        )
 
-        if (data.length > 1 && (props.showArrow1 || props.showArrows)) {
-          let arrowTipY = p1Array[p1Array.length - 1][1];
-          let arrowTipX = p1Array[p1Array.length - 1][0];
-          let y1 = p1Array[p1Array.length - 2][1];
-          let x1 = p1Array[p1Array.length - 2][0];
+        if (data.length > 1 && (props.showArrow1 ?? props.showArrows)) {
+          const arrowTipY = p1Array[p1Array.length - 1][1]
+          const arrowTipX = p1Array[p1Array.length - 1][0]
+          const y1 = p1Array[p1Array.length - 2][1]
+          const x1 = p1Array[p1Array.length - 2][0]
 
-          let arrowPoints = getArrowPoints(
+          const arrowPoints = getArrowPoints(
             arrowTipX,
             arrowTipY,
             x1,
@@ -1204,18 +1195,18 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
             arrowLength1,
             arrowWidth1,
             showArrowBase1
-          );
+          )
 
-          setArrow1Points(arrowPoints);
+          setArrow1Points(arrowPoints)
         }
 
-        if (data2.length > 1 && (props.showArrow2 || props.showArrows)) {
-          let arrowTipY = p2Array[p2Array.length - 1][1];
-          let arrowTipX = p2Array[p2Array.length - 1][0];
-          let y1 = p2Array[p2Array.length - 2][1];
-          let x1 = p2Array[p2Array.length - 2][0];
+        if (data2.length > 1 && (props.showArrow2 ?? props.showArrows)) {
+          const arrowTipY = p2Array[p2Array.length - 1][1]
+          const arrowTipX = p2Array[p2Array.length - 1][0]
+          const y1 = p2Array[p2Array.length - 2][1]
+          const x1 = p2Array[p2Array.length - 2][0]
 
-          let arrowPoints = getArrowPoints(
+          const arrowPoints = getArrowPoints(
             arrowTipX,
             arrowTipY,
             x1,
@@ -1223,18 +1214,18 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
             arrowLength2,
             arrowWidth2,
             showArrowBase2
-          );
+          )
 
-          setArrow2Points(arrowPoints);
+          setArrow2Points(arrowPoints)
         }
 
-        if (data3.length > 1 && (props.showArrow3 || props.showArrows)) {
-          let arrowTipY = p3Array[p3Array.length - 1][1];
-          let arrowTipX = p3Array[p3Array.length - 1][0];
-          let y1 = p3Array[p3Array.length - 2][1];
-          let x1 = p3Array[p3Array.length - 2][0];
+        if (data3.length > 1 && (props.showArrow3 ?? props.showArrows)) {
+          const arrowTipY = p3Array[p3Array.length - 1][1]
+          const arrowTipX = p3Array[p3Array.length - 1][0]
+          const y1 = p3Array[p3Array.length - 2][1]
+          const x1 = p3Array[p3Array.length - 2][0]
 
-          let arrowPoints = getArrowPoints(
+          const arrowPoints = getArrowPoints(
             arrowTipX,
             arrowTipY,
             x1,
@@ -1242,18 +1233,18 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
             arrowLength3,
             arrowWidth3,
             showArrowBase3
-          );
+          )
 
-          setArrow2Points(arrowPoints);
+          setArrow2Points(arrowPoints)
         }
 
-        if (data4.length > 1 && (props.showArrow4 || props.showArrows)) {
-          let arrowTipY = p4Array[p4Array.length - 1][1];
-          let arrowTipX = p4Array[p4Array.length - 1][0];
-          let y1 = p4Array[p4Array.length - 2][1];
-          let x1 = p4Array[p4Array.length - 2][0];
+        if (data4.length > 1 && (props.showArrow4 ?? props.showArrows)) {
+          const arrowTipY = p4Array[p4Array.length - 1][1]
+          const arrowTipX = p4Array[p4Array.length - 1][0]
+          const y1 = p4Array[p4Array.length - 2][1]
+          const x1 = p4Array[p4Array.length - 2][0]
 
-          let arrowPoints = getArrowPoints(
+          const arrowPoints = getArrowPoints(
             arrowTipX,
             arrowTipY,
             x1,
@@ -1261,18 +1252,18 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
             arrowLength4,
             arrowWidth4,
             showArrowBase4
-          );
+          )
 
-          setArrow2Points(arrowPoints);
+          setArrow2Points(arrowPoints)
         }
 
-        if (data5.length > 1 && (props.showArrow5 || props.showArrows)) {
-          let arrowTipY = p5Array[p5Array.length - 1][1];
-          let arrowTipX = p5Array[p5Array.length - 1][0];
-          let y1 = p5Array[p5Array.length - 2][1];
-          let x1 = p5Array[p5Array.length - 2][0];
+        if (data5.length > 1 && (props.showArrow5 ?? props.showArrows)) {
+          const arrowTipY = p5Array[p5Array.length - 1][1]
+          const arrowTipX = p5Array[p5Array.length - 1][0]
+          const y1 = p5Array[p5Array.length - 2][1]
+          const x1 = p5Array[p5Array.length - 2][0]
 
-          let arrowPoints = getArrowPoints(
+          const arrowPoints = getArrowPoints(
             arrowTipX,
             arrowTipY,
             x1,
@@ -1280,57 +1271,57 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
             arrowLength5,
             arrowWidth5,
             showArrowBase5
-          );
+          )
 
-          setArrow2Points(arrowPoints);
+          setArrow2Points(arrowPoints)
         }
 
-        /***************************          For Area Charts          *************************/
+        /** *************************          For Area Charts          *************************/
 
         if (atLeastOneAreaChart) {
-          if ((areaChart || areaChart1) && data.length) {
+          if ((areaChart ?? areaChart1) && data.length > 0) {
             xx = addLeadingAndTrailingPathForAreaFill(
               xx,
               data[0].value,
               data.length
-            );
-            setFillPoints(xx);
+            )
+            setFillPoints(xx)
           }
 
-          if ((areaChart || areaChart2) && data2.length) {
+          if ((areaChart ?? areaChart2) && data2.length > 0) {
             xx2 = addLeadingAndTrailingPathForAreaFill(
               xx2,
               data2[0].value,
               data2.length
-            );
-            setFillPoints2(xx2);
+            )
+            setFillPoints2(xx2)
           }
 
-          if ((areaChart || areaChart3) && data3.length) {
+          if ((areaChart ?? areaChart3) && data3.length > 0) {
             xx3 = addLeadingAndTrailingPathForAreaFill(
               xx3,
               data3[0].value,
               data3.length
-            );
-            setFillPoints3(xx3);
+            )
+            setFillPoints3(xx3)
           }
 
-          if ((areaChart || areaChart4) && data4.length) {
+          if ((areaChart ?? areaChart4) && data4.length > 0) {
             xx4 = addLeadingAndTrailingPathForAreaFill(
               xx4,
               data4[0].value,
               data4.length
-            );
-            setFillPoints4(xx4);
+            )
+            setFillPoints4(xx4)
           }
 
-          if ((areaChart || areaChart5) && data5.length) {
+          if ((areaChart ?? areaChart5) && data5.length > 0) {
             xx5 = addLeadingAndTrailingPathForAreaFill(
               xx5,
               data5[0].value,
               data5.length
-            );
-            setFillPoints5(xx5);
+            )
+            setFillPoints5(xx5)
           }
         }
 
@@ -1389,11 +1380,11 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     showArrowBase4,
     arrowLength5,
     arrowWidth5,
-    showArrowBase5,
-  ]);
+    showArrowBase5
+  ])
 
   useEffect(() => {
-    let pp = "";
+    let pp = ''
     if (!secondaryLineConfig.curved) {
       for (let i = 0; i < secondaryData.length; i++) {
         if (
@@ -1402,20 +1393,20 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
           !animateOnDataChange
         ) {
           pp +=
-            "L" + getX(i) + " " + getSecondaryY(secondaryData[i].value) + " ";
+            'L' + getX(i) + ' ' + getSecondaryY(secondaryData[i].value) + ' '
         }
       }
 
-      setSecondaryPoints(pp.replace("L", "M"));
+      setSecondaryPoints(pp.replace('L', 'M'))
 
       if (secondaryData.length > 1 && secondaryLineConfig.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", ""));
+        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', ''))
 
-        let arrowPoints = getArrowPoints(
+        const arrowPoints = getArrowPoints(
           arrowTipX,
           arrowTipY,
           x1,
@@ -1423,36 +1414,36 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
           secondaryLineConfig.arrowConfig?.length,
           secondaryLineConfig.arrowConfig?.width,
           secondaryLineConfig.arrowConfig?.showArrowBase
-        );
+        )
 
-        setSecondaryArrowPoints(arrowPoints);
+        setSecondaryArrowPoints(arrowPoints)
       }
 
-      /***************************          For Area Chart          *************************/
+      /** *************************          For Area Chart          *************************/
       if (secondaryLineConfig.areaChart) {
-        let ppp = "";
+        let ppp = ''
 
-        if (secondaryData.length && !animateOnDataChange) {
-          ppp = "L" + initialSpacing + " " + heightUptoXaxis + " ";
-          ppp += pp;
+        if (secondaryData.length > 0 && !animateOnDataChange) {
+          ppp = 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
+          ppp += pp
           ppp +=
-            "L" +
+            'L' +
             (initialSpacing + spacing * (secondaryData.length - 1)) +
-            " " +
-            heightUptoXaxis;
-          ppp += "L" + initialSpacing + " " + heightUptoXaxis + " ";
-          setSecondaryFillPoints(ppp.replace("L", "M"));
+            ' ' +
+            heightUptoXaxis
+          ppp += 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
+          setSecondaryFillPoints(ppp.replace('L', 'M'))
         }
       }
     } else {
-      /***************************          For Curved Charts         *************************/
-      const p1Array: Array<Array<number>> = [];
+      /** *************************          For Curved Charts         *************************/
+      const p1Array: number[][] = []
       for (let i = 0; i < secondaryData.length; i++) {
         if (
           i >= secondaryLineConfig.startIndex &&
           i <= secondaryLineConfig.endIndex
         ) {
-          p1Array.push([getX(i), getSecondaryY(secondaryData[i].value)]);
+          p1Array.push([getX(i), getSecondaryY(secondaryData[i].value)])
         }
       }
 
@@ -1460,17 +1451,17 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
         p1Array,
         secondaryLineConfig.curveType,
         secondaryLineConfig.curvature
-      );
+      )
 
-      setSecondaryPoints(xx);
+      setSecondaryPoints(xx)
 
-      if (secondaryData.length > 1 && (props.showArrow1 || props.showArrows)) {
-        let arrowTipY = p1Array[p1Array.length - 1][1];
-        let arrowTipX = p1Array[p1Array.length - 1][0];
-        let y1 = p1Array[p1Array.length - 2][1];
-        let x1 = p1Array[p1Array.length - 2][0];
+      if (secondaryData.length > 1 && (props.showArrow1 ?? props.showArrows)) {
+        const arrowTipY = p1Array[p1Array.length - 1][1]
+        const arrowTipX = p1Array[p1Array.length - 1][0]
+        const y1 = p1Array[p1Array.length - 2][1]
+        const x1 = p1Array[p1Array.length - 2][0]
 
-        let arrowPoints = getArrowPoints(
+        const arrowPoints = getArrowPoints(
           arrowTipX,
           arrowTipY,
           x1,
@@ -1478,233 +1469,226 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
           arrowLength1,
           arrowWidth1,
           showArrowBase1
-        );
+        )
 
-        setSecondaryArrowPoints(arrowPoints);
+        setSecondaryArrowPoints(arrowPoints)
       }
 
-      /***************************          For Curved Area Charts          *************************/
+      /** *************************          For Curved Area Charts          *************************/
 
       if (secondaryLineConfig.areaChart) {
-        if (secondaryData.length) {
+        if (secondaryData.length > 0) {
           xx = addLeadingAndTrailingPathForAreaFill(
             xx,
             secondaryData[0].value,
             secondaryData.length
-          );
-          setSecondaryFillPoints(xx);
+          )
+          setSecondaryFillPoints(xx)
         }
       }
     }
-  }, [secondaryData, secondaryLineConfig]);
+  }, [secondaryData, secondaryLineConfig])
 
-  const gradientDirection = props.gradientDirection ?? "vertical";
-  const horizSections = [{ value: "0" }];
-  const stepHeight = props.stepHeight || containerHeight / noOfSections;
-  const stepValue = props.stepValue || maxValue / noOfSections;
+  const gradientDirection = props.gradientDirection ?? 'vertical'
+  const horizSections = [{ value: '0' }]
+  const stepHeight = props.stepHeight ?? containerHeight / noOfSections
+  const stepValue = props.stepValue ?? maxValue / noOfSections
   const noOfSectionsBelowXAxis =
-    props.noOfSectionsBelowXAxis ?? -mostNegativeValue / (stepValue || 1);
+    props.noOfSectionsBelowXAxis ?? -mostNegativeValue / (stepValue || 1)
 
   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 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 showFractionalValues =
-    props.showFractionalValues ?? AxesAndRulesDefaults.showFractionalValues;
+    props.showFractionalValues ?? AxesAndRulesDefaults.showFractionalValues
 
-  const horizontal = false;
-  const yAxisAtTop = false;
+  const horizontal = false
+  const yAxisAtTop = false
 
-  defaultPointerConfig.pointerStripHeight = containerHeight;
+  defaultPointerConfig.pointerStripHeight = containerHeight
 
-  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 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;
+    pointerConfig?.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;
+    pointerConfig?.shiftPointerLabelX ?? defaultPointerConfig.shiftPointerLabelX
   const shiftPointerLabelY =
-    pointerConfig?.shiftPointerLabelY ??
-    defaultPointerConfig.shiftPointerLabelY;
+    pointerConfig?.shiftPointerLabelY ?? defaultPointerConfig.shiftPointerLabelY
   const pointerLabelWidth =
-    pointerConfig?.pointerLabelWidth ?? defaultPointerConfig.pointerLabelWidth;
+    pointerConfig?.pointerLabelWidth ?? defaultPointerConfig.pointerLabelWidth
   const pointerLabelHeight =
-    pointerConfig?.pointerLabelHeight ??
-    defaultPointerConfig.pointerLabelHeight;
+    pointerConfig?.pointerLabelHeight ?? defaultPointerConfig.pointerLabelHeight
   const autoAdjustPointerLabelPosition =
     pointerConfig?.autoAdjustPointerLabelPosition ??
-    defaultPointerConfig.autoAdjustPointerLabelPosition;
+    defaultPointerConfig.autoAdjustPointerLabelPosition
   const pointerVanishDelay =
-    pointerConfig?.pointerVanishDelay ??
-    defaultPointerConfig.pointerVanishDelay;
+    pointerConfig?.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;
+    pointerConfig?.hidePointer1 ?? defaultPointerConfig.hidePointer1
   const hidePointer2 =
-    pointerConfig?.hidePointer2 ?? defaultPointerConfig.hidePointer2;
+    pointerConfig?.hidePointer2 ?? defaultPointerConfig.hidePointer2
   const hidePointer3 =
-    pointerConfig?.hidePointer3 ?? defaultPointerConfig.hidePointer3;
+    pointerConfig?.hidePointer3 ?? defaultPointerConfig.hidePointer3
   const hidePointer4 =
-    pointerConfig?.hidePointer4 ?? defaultPointerConfig.hidePointer4;
+    pointerConfig?.hidePointer4 ?? defaultPointerConfig.hidePointer4
   const hidePointer5 =
-    pointerConfig?.hidePointer5 ?? defaultPointerConfig.hidePointer5;
+    pointerConfig?.hidePointer5 ?? defaultPointerConfig.hidePointer5
   const hideSecondaryPointer =
     pointerConfig?.hideSecondaryPointer ??
-    defaultPointerConfig.hideSecondaryPointer;
+    defaultPointerConfig.hideSecondaryPointer
   const resetPointerOnDataChange =
     pointerConfig?.resetPointerOnDataChange ??
-    defaultPointerConfig.resetPointerOnDataChange;
-  const pointerEvents = pointerConfig?.pointerEvents;
+    defaultPointerConfig.resetPointerOnDataChange
+  const pointerEvents = pointerConfig?.pointerEvents
   const disableScroll =
-    props.disableScroll ||
+    props.disableScroll ??
     (pointerConfig
       ? activatePointersOnLongPress
-        ? responderActive
-          ? true
-          : false
+        ? !!responderActive
         : true
-      : false);
+      : false)
   const showScrollIndicator =
-    props.showScrollIndicator ?? LineDefaults.showScrollIndicator;
+    props.showScrollIndicator ?? LineDefaults.showScrollIndicator
 
-  const focusEnabled = props.focusEnabled ?? LineDefaults.focusEnabled;
+  const focusEnabled = props.focusEnabled ?? LineDefaults.focusEnabled
   const showDataPointOnFocus =
-    props.showDataPointOnFocus ?? LineDefaults.showDataPointOnFocus;
+    props.showDataPointOnFocus ?? LineDefaults.showDataPointOnFocus
   const showStripOnFocus =
-    props.showStripOnFocus ?? LineDefaults.showStripOnFocus;
-  const showTextOnFocus = props.showTextOnFocus ?? LineDefaults.showTextOnFocus;
-  const stripHeight = props.stripHeight;
-  const stripWidth = props.stripWidth ?? LineDefaults.stripWidth;
-  const stripColor = props.stripColor ?? color1;
-  const stripOpacity = props.stripOpacity ?? (startOpacity1 + endOpacity1) / 2;
+    props.showStripOnFocus ?? LineDefaults.showStripOnFocus
+  const showTextOnFocus = props.showTextOnFocus ?? LineDefaults.showTextOnFocus
+  const stripHeight = props.stripHeight
+  const stripWidth = props.stripWidth ?? LineDefaults.stripWidth
+  const stripColor = props.stripColor ?? color1
+  const stripOpacity = props.stripOpacity ?? (startOpacity1 + endOpacity1) / 2
   const unFocusOnPressOut =
-    props.unFocusOnPressOut ?? LineDefaults.unFocusOnPressOut;
+    props.unFocusOnPressOut ?? LineDefaults.unFocusOnPressOut
   const delayBeforeUnFocus =
-    props.delayBeforeUnFocus ?? LineDefaults.delayBeforeUnFocus;
+    props.delayBeforeUnFocus ?? LineDefaults.delayBeforeUnFocus
 
   const containerHeightIncludingBelowXAxis =
-    extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight;
+    extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight
 
-  const lineGradient = props.lineGradient ?? LineDefaults.lineGradient;
-  const lineGradientDirection = props.lineGradientDirection ?? "vertical";
+  const lineGradient = props.lineGradient ?? LineDefaults.lineGradient
+  const lineGradientDirection = props.lineGradientDirection ?? 'vertical'
   const lineGradientStartColor =
-    props.lineGradientStartColor ?? LineDefaults.lineGradientStartColor;
+    props.lineGradientStartColor ?? LineDefaults.lineGradientStartColor
   const lineGradientEndColor =
-    props.lineGradientEndColor ?? LineDefaults.lineGradientEndColor;
+    props.lineGradientEndColor ?? LineDefaults.lineGradientEndColor
 
-  const getPointerY = (value) =>
+  const getPointerY = (value: number): number =>
     value
       ? containerHeight -
         (value * containerHeight) / maxValue -
         (pointerRadius || pointerHeight / 2) +
         10
-      : 0;
+      : 0
 
-  const initialisePointers = () => {
+  const initialisePointers = (): void => {
     if (initialPointerIndex !== -1) {
-      const item = (data0 ?? data)[initialPointerIndex];
+      const item = (data0 ?? data)[initialPointerIndex]
       const x =
         initialSpacing +
         spacing * initialPointerIndex -
         (pointerRadius || pointerWidth / 2) -
-        1;
-      const y = getPointerY(item.value);
-      const y2 = getPointerY(data2?.[initialPointerIndex]?.value);
-      const y3 = getPointerY(data3?.[initialPointerIndex]?.value);
-      const y4 = getPointerY(data4?.[initialPointerIndex]?.value);
-      const y5 = getPointerY(data5?.[initialPointerIndex]?.value);
+        1
+      const y = getPointerY(item.value)
+      const y2 = getPointerY(data2?.[initialPointerIndex]?.value)
+      const y3 = getPointerY(data3?.[initialPointerIndex]?.value)
+      const y4 = getPointerY(data4?.[initialPointerIndex]?.value)
+      const y5 = getPointerY(data5?.[initialPointerIndex]?.value)
 
       if (initialPointerAppearDelay) {
         setTimeout(() => {
-          setPointerConfig(initialPointerIndex, item, x, y, y2, y3, y4, y5);
-        }, initialPointerAppearDelay);
+          setPointerConfig(initialPointerIndex, item, x, y, y2, y3, y4, y5)
+        }, initialPointerAppearDelay)
       } else {
-        setPointerConfig(initialPointerIndex, item, x, y, y2, y3, y4, y5);
+        setPointerConfig(initialPointerIndex, item, x, y, y2, y3, y4, y5)
       }
     }
-  };
+  }
 
   useEffect(() => {
-    initialisePointers();
-  }, []);
+    initialisePointers()
+  }, [])
 
   useEffect(() => {
     if (resetPointerOnDataChange) {
-      initialisePointers();
+      initialisePointers()
     }
-  }, [data]);
+  }, [data])
 
   const setPointerConfig = (
-    initialPointerIndex,
-    item,
-    x,
-    y,
-    y2,
-    y3,
-    y4,
-    y5
-  ) => {
-    setPointerIndex(initialPointerIndex);
-    setPointerItem(item);
-    setPointerX(x);
-    setPointerY(y);
-    setPointerY2(y2);
-    setPointerY3(y3);
-    setPointerY4(y4);
-    setPointerY5(y5);
-  };
+    initialPointerIndex: number,
+    item: lineDataItem,
+    x: number,
+    y: number,
+    y2: number,
+    y3: number,
+    y4: number,
+    y5: number
+  ): void => {
+    setPointerIndex(initialPointerIndex)
+    setPointerItem(item)
+    setPointerX(x)
+    setPointerY(y)
+    setPointerY2(y2)
+    setPointerY3(y3)
+    setPointerY4(y4)
+    setPointerY5(y5)
+  }
 
   const barAndLineChartsWrapperProps: BarAndLineChartsWrapperTypes = {
     chartType: chartTypes.LINE,
@@ -1721,7 +1705,7 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     initialSpacing,
     data: data0 ?? data,
     stackData: undefined, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
-    secondaryData: secondaryData,
+    secondaryData,
     barWidth: 0, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     xAxisThickness,
     totalWidth,
@@ -1742,10 +1726,10 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     lineData2: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     lineBehindBars: false,
     points,
-    points2: "", // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    points2: '', // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     arrowPoints: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
 
-    //horizSectionProps-
+    // horizSectionProps-
     width: props.width,
     horizSections,
     endSpacing,
@@ -1756,7 +1740,7 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     axesAndRulesProps: getAxesAndRulesProps(props, stepValue, undefined),
 
     yAxisLabelTexts: props.yAxisLabelTexts,
-    yAxisOffset: yAxisOffset,
+    yAxisOffset,
     rotateYAxisTexts: 0,
     hideAxesAndRules: props.hideAxesAndRules,
 
@@ -1772,8 +1756,8 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
 
     onEndReached: props.onEndReached,
     onStartReached: props.onStartReached,
-    endReachedOffset: props.endReachedOffset ?? LineDefaults.endReachedOffset,
-  };
+    endReachedOffset: props.endReachedOffset ?? LineDefaults.endReachedOffset
+  }
 
   return {
     curvature,
@@ -2116,6 +2100,6 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     getPointerY,
     initialisePointers,
     setPointerConfig,
-    barAndLineChartsWrapperProps,
-  };
-};
+    barAndLineChartsWrapperProps
+  }
+}