gifted-charts-core 0.1.20 → 0.1.22

package/src/LineChart/index.ts

@@ -1,2205 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import {
-  AxesAndRulesDefaults,
-  LineDefaults,
-  SEGMENT_END,
-  SEGMENT_START,
-  chartTypes,
-  defaultArrowConfig,
-  defaultPointerConfig
-} from '../utils/constants'
-import {
-  adjustToOffset,
-  computeMaxAndMinItems,
-  getAllArrowProperties,
-  getArrowPoints,
-  getAxesAndRulesProps,
-  getCurvePathWithSegments,
-  getExtendedContainerHeightWithPadding,
-  getInterpolatedData,
-  getLineSegmentsForMissingValues,
-  getMaxValue,
-  getNoOfSections,
-  getPathWithHighlight,
-  getSanitisedData,
-  getSecondaryDataWithOffsetIncluded,
-  getSegmentString,
-  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
-  parentWidth: number
-}
-
-export const useLineChart = (props: extendedLineChartPropsType) => {
-  const {
-    animations,
-    showDataPointsForMissingValues,
-    interpolateMissingValues = true,
-    onlyPositive,
-    yAxisOffset,
-    parentWidth
-  } = 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 [pointerYsForDataSet, setPointerYsForDataSet] = useState<number[]>([])
-  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(
-    props.focusedDataPointIndex ?? -1
-  )
-
-  useEffect(() => {
-    setSelectedIndex(props.focusedDataPointIndex ?? -1)
-  }, [props.focusedDataPointIndex])
-
-  const noOfSections = getNoOfSections(
-    props.noOfSections,
-    props.maxValue,
-    props.stepValue
-  )
-  const containerHeight =
-    props.height ??
-    ((props.stepHeight ?? 0) * noOfSections ||
-      AxesAndRulesDefaults.containerHeight)
-
-  const dataSanitisationProps: IDataSanitisationProps = {
-    showDataPointsForMissingValues,
-    interpolateMissingValues,
-    onlyPositive,
-    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(
-      props.secondaryData,
-      props.secondaryYAxis,
-      showDataPointsForMissingValues,
-      interpolateMissingValues,
-      onlyPositive
-    ) ?? []
-
-  let dataSet = props.dataSet
-  if (dataSet?.length) {
-    dataSet = useMemo(() => {
-      return dataSet?.map((dataSetItem) => {
-        const nullishHandledDataItem = getInterpolatedData(
-          dataSetItem.data,
-          showDataPointsForMissingValues,
-          interpolateMissingValues,
-          onlyPositive
-        )
-        return {
-          ...dataSetItem,
-          data: adjustToOffset(nullishHandledDataItem, yAxisOffset)
-        }
-      })
-    }, [yAxisOffset, dataSet])
-  }
-
-  const data0 = dataSet?.[0]?.data
-
-  const scrollToEnd = props.scrollToEnd ?? LineDefaults.scrollToEnd
-  const scrollAnimation = props.scrollAnimation ?? LineDefaults.scrollAnimation
-  const scrollEventThrottle =
-    props.scrollEventThrottle ?? LineDefaults.scrollEventThrottle
-
-  const labelsExtraHeight = props.labelsExtraHeight ?? 0
-
-  const animationDuration =
-    props.animationDuration ?? LineDefaults.animationDuration
-  const onDataChangeAnimationDuration =
-    props.onDataChangeAnimationDuration ?? 400
-  const animateTogether = props.animateTogether ?? LineDefaults.animateTogether
-  const animateOnDataChange = yAxisOffset
-    ? false
-    : props.animateOnDataChange ?? false
-
-  const startIndex1 = props.startIndex1 ?? props.startIndex ?? 0
-
-  let endIndex1: number
-  if (props.endIndex1 === undefined || props.endIndex1 === null) {
-    if (props.endIndex === undefined || props.endIndex === null) {
-      endIndex1 = data.length - 1
-    } else {
-      endIndex1 = props.endIndex
-    }
-  } else {
-    endIndex1 = props.endIndex1
-  }
-
-  const startIndex2 = props.startIndex2 ?? 0
-  const endIndex2 = props.endIndex2 ?? 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 lineSegments = !interpolateMissingValues
-    ? getLineSegmentsForMissingValues(props.data)
-    : props.lineSegments
-  const lineSegments2 = !interpolateMissingValues
-    ? getLineSegmentsForMissingValues(props.data2)
-    : props.lineSegments2
-  const lineSegments3 = !interpolateMissingValues
-    ? getLineSegmentsForMissingValues(props.data3)
-    : props.lineSegments3
-  const lineSegments4 = !interpolateMissingValues
-    ? getLineSegmentsForMissingValues(props.data4)
-    : props.lineSegments4
-  const lineSegments5 = !interpolateMissingValues
-    ? getLineSegmentsForMissingValues(props.data5)
-    : props.lineSegments5
-
-  const highlightedRange = props.highlightedRange
-
-  let newPoints = ''
-  let newFillPoints = ''
-  let counter = 0
-
-  const adjustToWidth = props.adjustToWidth ?? false
-
-  const initialSpacing = props.initialSpacing ?? LineDefaults.initialSpacing
-  const endSpacing =
-    props.endSpacing ?? (adjustToWidth ? 0 : LineDefaults.endSpacing)
-
-  const thickness = props.thickness ?? LineDefaults.thickness
-
-  const yAxisLabelWidth =
-    props.yAxisLabelWidth ??
-    (props.hideYAxisText
-      ? AxesAndRulesDefaults.yAxisEmptyLabelWidth
-      : AxesAndRulesDefaults.yAxisLabelWidth)
-
-  const spacing =
-    props.spacing ??
-    (adjustToWidth
-      ? ((props.width ?? parentWidth - yAxisLabelWidth) - initialSpacing) /
-        Math.max((data0 ?? data).length - 1, 1)
-      : LineDefaults.spacing)
-
-  const xAxisThickness =
-    props.xAxisThickness ?? AxesAndRulesDefaults.xAxisThickness
-  const dataPointsHeight1 =
-    props.dataPointsHeight1 ??
-    props.dataPointsHeight ??
-    LineDefaults.dataPointsHeight
-  const dataPointsWidth1 =
-    props.dataPointsWidth1 ??
-    props.dataPointsWidth ??
-    LineDefaults.dataPointsWidth
-  const dataPointsRadius1 =
-    props.dataPointsRadius1 ??
-    props.dataPointsRadius ??
-    LineDefaults.dataPointsRadius
-  const dataPointsColor1 =
-    props.dataPointsColor1 ??
-    props.dataPointsColor ??
-    LineDefaults.dataPointsColor
-  const dataPointsShape1 =
-    props.dataPointsShape1 ??
-    props.dataPointsShape ??
-    LineDefaults.dataPointsShape
-
-  const dataPointsHeight2 =
-    props.dataPointsHeight2 ??
-    props.dataPointsHeight ??
-    LineDefaults.dataPointsHeight
-  const dataPointsWidth2 =
-    props.dataPointsWidth2 ??
-    props.dataPointsWidth ??
-    LineDefaults.dataPointsWidth
-  const dataPointsRadius2 =
-    props.dataPointsRadius2 ??
-    props.dataPointsRadius ??
-    LineDefaults.dataPointsRadius
-  const dataPointsColor2 =
-    props.dataPointsColor2 ??
-    props.dataPointsColor ??
-    LineDefaults.dataPointsColor2
-  const dataPointsShape2 =
-    props.dataPointsShape2 ??
-    props.dataPointsShape ??
-    LineDefaults.dataPointsShape
-
-  const dataPointsHeight3 =
-    props.dataPointsHeight3 ??
-    props.dataPointsHeight ??
-    LineDefaults.dataPointsHeight
-  const dataPointsWidth3 =
-    props.dataPointsWidth3 ??
-    props.dataPointsWidth ??
-    LineDefaults.dataPointsWidth
-  const dataPointsRadius3 =
-    props.dataPointsRadius3 ??
-    props.dataPointsRadius ??
-    LineDefaults.dataPointsRadius
-  const dataPointsColor3 =
-    props.dataPointsColor3 ??
-    props.dataPointsColor ??
-    LineDefaults.dataPointsColor3
-  const dataPointsShape3 =
-    props.dataPointsShape3 ??
-    props.dataPointsShape ??
-    LineDefaults.dataPointsShape
-
-  const dataPointsHeight4 =
-    props.dataPointsHeight4 ??
-    props.dataPointsHeight ??
-    LineDefaults.dataPointsHeight
-  const dataPointsWidth4 =
-    props.dataPointsWidth4 ??
-    props.dataPointsWidth ??
-    LineDefaults.dataPointsWidth
-  const dataPointsRadius4 =
-    props.dataPointsRadius4 ??
-    props.dataPointsRadius ??
-    LineDefaults.dataPointsRadius
-  const dataPointsColor4 =
-    props.dataPointsColor4 ??
-    props.dataPointsColor ??
-    LineDefaults.dataPointsColor
-  const dataPointsShape4 =
-    props.dataPointsShape4 ??
-    props.dataPointsShape ??
-    LineDefaults.dataPointsShape
-
-  const dataPointsHeight5 =
-    props.dataPointsHeight5 ??
-    props.dataPointsHeight ??
-    LineDefaults.dataPointsHeight
-  const dataPointsWidth5 =
-    props.dataPointsWidth5 ??
-    props.dataPointsWidth ??
-    LineDefaults.dataPointsWidth
-  const dataPointsRadius5 =
-    props.dataPointsRadius5 ??
-    props.dataPointsRadius ??
-    LineDefaults.dataPointsRadius
-  const dataPointsColor5 =
-    props.dataPointsColor5 ??
-    props.dataPointsColor ??
-    LineDefaults.dataPointsColor
-  const dataPointsShape5 =
-    props.dataPointsShape5 ??
-    props.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 atLeastOneAreaChart =
-    dataSet?.some((set) => set.areaChart) ??
-    areaChart ??
-    areaChart1 ??
-    areaChart2 ??
-    areaChart3 ??
-    areaChart4 ??
-    areaChart5
-
-  const getIsNthAreaChart = (n: number): boolean => {
-    if (areaChart) return true
-    if (!dataSet?.length) {
-      switch (n) {
-        case 0:
-          return areaChart1
-        case 1:
-          return areaChart2
-        case 2:
-          return areaChart3
-        case 3:
-          return areaChart4
-        case 4:
-          return areaChart5
-      }
-    }
-    return false
-  }
-
-  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
-  const textFontSize2 =
-    props.textFontSize2 ?? props.textFontSize ?? LineDefaults.textFontSize
-  const textFontSize3 =
-    props.textFontSize3 ?? props.textFontSize ?? LineDefaults.textFontSize
-  const textFontSize4 =
-    props.textFontSize4 ?? props.textFontSize ?? LineDefaults.textFontSize
-  const textFontSize5 =
-    props.textFontSize5 ?? props.textFontSize ?? LineDefaults.textFontSize
-  const textColor1 =
-    props.textColor1 ?? props.textColor ?? LineDefaults.textColor
-  const textColor2 =
-    props.textColor2 ?? props.textColor ?? LineDefaults.textColor
-  const textColor3 =
-    props.textColor3 ?? props.textColor ?? LineDefaults.textColor
-  const textColor4 =
-    props.textColor4 ?? props.textColor ?? LineDefaults.textColor
-  const textColor5 =
-    props.textColor5 ?? props.textColor ?? LineDefaults.textColor
-
-  const totalWidth =
-    initialSpacing + spacing * (data0 ?? data).length - 1 + endSpacing
-
-  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 overflowTop =
-    props.overflowTop ?? props.secondaryXAxis
-      ? AxesAndRulesDefaults.overflowTopWithSecondaryXAxis
-      : AxesAndRulesDefaults.overflowTop
-
-  const extendedContainerHeight = getExtendedContainerHeightWithPadding(
-    containerHeight,
-    overflowTop
-  )
-  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: number): number =>
-    extendedContainerHeight - (value * containerHeight) / secondaryMaxValue
-  const heightUptoXaxis = extendedContainerHeight - xAxisThickness
-
-  if (animateOnDataChange && animations) {
-    animations.forEach((item, index) => {
-      item.addListener((val) => {
-        if (typeof data[index] === 'undefined') {
-          return
-        }
-
-        const temp = data[index]?.value ?? 0
-        data[index].value = val?.value ?? 0
-        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 ?? 0) + ' '
-          }
-          if (dataSet?.[0]?.areaChart ?? areaChart) {
-            ppp = 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
-            ppp += pp
-            ppp +=
-              'L' +
-              (initialSpacing + spacing * (data.length - 1)) +
-              ' ' +
-              heightUptoXaxis
-            ppp += 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
-          }
-          newPoints = pp
-          newFillPoints = ppp
-          setPointsOnChange()
-        }
-        counter++
-        data[index].value = temp
-      })
-    })
-  }
-
-  const setPointsOnChange = (): void => {
-    if (counter === data.length) {
-      if (!props.curved) {
-        setPoints(newPoints.replace('L', 'M'))
-        if (areaChart) {
-          setFillPoints(newFillPoints.replace('L', 'M'))
-        }
-      }
-    }
-  }
-
-  const showValuesAsDataPointsText =
-    props.showValuesAsDataPointsText ?? LineDefaults.showValuesAsDataPointsText
-
-  const thickness1 =
-    props.thickness1 ?? props.thickness ?? LineDefaults.thickness
-  const thickness2 =
-    props.thickness2 ?? props.thickness ?? LineDefaults.thickness
-  const thickness3 =
-    props.thickness3 ?? props.thickness ?? LineDefaults.thickness
-  const thickness4 =
-    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
-
-  const startFillColor1 =
-    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
-
-  const startFillColor2 =
-    props.startFillColor2 ?? props.startFillColor ?? LineDefaults.startFillColor
-  const endFillColor2 =
-    props.endFillColor2 ?? props.endFillColor ?? LineDefaults.endFillColor
-  const startOpacity2 = props.startOpacity2 ?? startOpacity
-  const endOpacity2 = props.endOpacity2 ?? endOpacity
-
-  const startFillColor3 =
-    props.startFillColor3 ?? props.startFillColor ?? LineDefaults.startFillColor
-  const endFillColor3 =
-    props.endFillColor3 ?? props.endFillColor ?? LineDefaults.endFillColor
-  const startOpacity3 = props.startOpacity3 ?? startOpacity
-  const endOpacity3 = props.endOpacity3 ?? endOpacity
-
-  const startFillColor4 =
-    props.startFillColor4 ?? props.startFillColor ?? LineDefaults.startFillColor
-  const endFillColor4 =
-    props.endFillColor4 ?? props.endFillColor ?? LineDefaults.endFillColor
-  const startOpacity4 = props.startOpacity4 ?? startOpacity
-  const endOpacity4 = props.endOpacity4 ?? endOpacity
-
-  const startFillColor5 =
-    props.startFillColor5 ?? props.startFillColor ?? LineDefaults.startFillColor
-  const endFillColor5 =
-    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
-  const {
-    arrowLength1,
-    arrowWidth1,
-    arrowStrokeWidth1,
-    arrowStrokeColor1,
-    arrowFillColor1,
-    showArrowBase1,
-    arrowLength2,
-    arrowWidth2,
-    arrowStrokeWidth2,
-    arrowStrokeColor2,
-    arrowFillColor2,
-    showArrowBase2,
-    arrowLength3,
-    arrowWidth3,
-    arrowStrokeWidth3,
-    arrowStrokeColor3,
-    arrowFillColor3,
-    showArrowBase3,
-    arrowLength4,
-    arrowWidth4,
-    arrowStrokeWidth4,
-    arrowStrokeColor4,
-    arrowFillColor4,
-    showArrowBase4,
-    arrowLength5,
-    arrowWidth5,
-    arrowStrokeWidth5,
-    arrowStrokeColor5,
-    arrowFillColor5,
-    showArrowBase5,
-    arrowLengthsFromSet,
-    arrowWidthsFromSet,
-    arrowStrokeWidthsFromSet,
-    arrowStrokeColorsFromSet,
-    arrowFillColorsFromSet,
-    showArrowBasesFromSet
-  } = getAllArrowProperties(props, defaultArrowConfig)
-
-  const secondaryLineConfig = {
-    zIndex: props.secondaryLineConfig?.zIndex ?? zIndex1,
-    curved: props.secondaryLineConfig?.curved ?? props.curved,
-    curvature: props.secondaryLineConfig?.curvature ?? curvature,
-    curveType: props.secondaryLineConfig?.curveType ?? curveType,
-    areaChart: props.secondaryLineConfig?.areaChart ?? areaChart,
-    color: props.secondaryLineConfig?.color ?? color1,
-    thickness: props.secondaryLineConfig?.thickness ?? thickness1,
-    zIndex1: props.secondaryLineConfig?.zIndex1 ?? zIndex1,
-    strokeDashArray:
-      props.secondaryLineConfig?.strokeDashArray ?? strokeDashArray1,
-    startIndex: props.secondaryLineConfig?.startIndex ?? startIndex1,
-    endIndex: props.secondaryLineConfig?.endIndex ?? endIndex1,
-    hideDataPoints:
-      props.secondaryLineConfig?.hideDataPoints ?? hideDataPoints1,
-    dataPointsHeight:
-      props.secondaryLineConfig?.dataPointsHeight ?? dataPointsHeight1,
-    dataPointsWidth:
-      props.secondaryLineConfig?.dataPointsWidth ?? dataPointsWidth1,
-    dataPointsRadius:
-      props.secondaryLineConfig?.dataPointsRadius ?? dataPointsRadius1,
-    dataPointsColor:
-      props.secondaryLineConfig?.dataPointsColor ?? dataPointsColor1,
-    dataPointsShape:
-      props.secondaryLineConfig?.dataPointsShape ?? dataPointsShape1,
-    showValuesAsDataPointsText:
-      props.secondaryLineConfig?.showValuesAsDataPointsText ??
-      showValuesAsDataPointsText,
-    startFillColor:
-      props.secondaryLineConfig?.startFillColor ?? startFillColor1,
-    endFillColor: props.secondaryLineConfig?.endFillColor ?? endFillColor1,
-    startOpacity: props.secondaryLineConfig?.startOpacity ?? startOpacity1,
-    endOpacity: props.secondaryLineConfig?.endOpacity ?? endOpacity1,
-    textFontSize: props.secondaryLineConfig?.textFontSize ?? textFontSize1,
-    textColor: props.secondaryLineConfig?.textColor ?? textColor1,
-    showArrow: props.secondaryLineConfig?.showArrow ?? props.showArrows,
-    arrowConfig: props.secondaryLineConfig?.arrowConfig ?? props.arrowConfig
-  }
-
-  const yAxisExtraHeightAtTop = props.trimYAxisAtTop
-    ? 0
-    : props.yAxisExtraHeight ?? containerHeight / 20
-
-  const addLeadingAndTrailingPathForAreaFill = (
-    initialPath: string,
-    value: number,
-    dataLength: number
-  ): string => {
-    return (
-      'M ' +
-      initialSpacing +
-      ',' +
-      heightUptoXaxis +
-      ' ' +
-      'L ' +
-      initialSpacing +
-      ',' +
-      getY(value) +
-      ' ' +
-      initialPath +
-      ' ' +
-      'L ' +
-      (initialSpacing + spacing * (dataLength - 1)) +
-      ',' +
-      heightUptoXaxis +
-      ' ' +
-      'L ' +
-      initialSpacing +
-      ',' +
-      heightUptoXaxis +
-      ' '
-    )
-  }
-
-  const getNextPoint = (
-    data: lineDataItem[],
-    index: number,
-    around: boolean,
-    before: boolean
-  ): string => {
-    const isLast = index === data.length - 1
-    return isLast && !(around || before)
-      ? ' '
-      : ' L' +
-          (getX(index) +
-            (around ? (isLast ? 0 : spacing / 2) : before ? 0 : spacing)) +
-          ' ' +
-          getY(data[index].value) +
-          ' '
-  }
-  const getStepPath = (data: lineDataItem[], i: number): string => {
-    const around = edgePosition === EdgePosition.AROUND_DATA_POINT
-    const before = edgePosition === EdgePosition.BEFORE_DATA_POINT
-    return (
-      '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: lineDataItem[],
-    i: number,
-    lineSegment: LineSegment[] | undefined,
-    startIndex: number,
-    endIndex: number,
-    isSecondary?: boolean
-  ): string => {
-    let path =
-      'L' +
-      getX(i) +
-      ' ' +
-      (isSecondary ? getSecondaryY(data[i].value) : getY(data[i].value)) +
-      ' ' +
-      getSegmentString(lineSegment, i, SEGMENT_START, SEGMENT_END)
-
-    if (highlightedRange) {
-      path += getPathWithHighlight(
-        data,
-        i,
-        highlightedRange,
-        startIndex,
-        endIndex,
-        getX,
-        getY
-      )
-    }
-    return path
-  }
-
-  useEffect(() => {
-    if (dataSet) {
-      const pointsArray: string[] = []
-      const arrowPointsArray: string[] = []
-      const fillPointsArray: string[] = []
-      dataSet.map((set, index) => {
-        if (set.curved ?? props.curved) {
-          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),
-                set.isSecondary
-                  ? getSecondaryY(set.data[i].value)
-                  : getY(set.data[i].value)
-              ])
-            }
-          }
-          let xx = svgPath(
-            pArray,
-            set.curveType ?? curveType,
-            set.curvature ?? curvature
-          )
-          pointsArray.push(
-            getCurvePathWithSegments(
-              xx,
-              set.lineSegments,
-              SEGMENT_START,
-              SEGMENT_END
-            )
-          )
-
-          // For Arrow-
-          if (set.data.length > 1 && (set.showArrow ?? props.showArrows)) {
-            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]
-
-            const arrowPoints = getArrowPoints(
-              arrowTipX,
-              arrowTipY,
-              x1,
-              y1,
-              arrowLengthsFromSet?.[index],
-              arrowWidthsFromSet?.[index],
-              showArrowBasesFromSet?.[index]
-            )
-
-            arrowPointsArray.push(arrowPoints)
-          }
-
-          // For Area charts-
-          if ((set.areaChart ?? areaChart) && set.data.length > 0) {
-            xx = addLeadingAndTrailingPathForAreaFill(
-              xx,
-              set.data[0].value,
-              set.data.length
-            )
-            fillPointsArray.push(xx)
-          }
-        } else {
-          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)
-              } else {
-                pp += getSegmentPath(
-                  set.data,
-                  i,
-                  set.lineSegments,
-                  set.startIndex ?? 0,
-                  set.endIndex ?? set.data.length - 1,
-                  set.isSecondary
-                )
-              }
-            }
-          }
-          pointsArray.push(pp.replace('L', 'M'))
-
-          // For Arrow-
-          if (set.data.length > 1 && (set.showArrow ?? 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,
-              y1,
-              arrowLengthsFromSet?.[index],
-              arrowWidthsFromSet?.[index],
-              showArrowBasesFromSet?.[index]
-            )
-
-            arrowPointsArray.push(arrowPoints)
-          }
-
-          // For Area charts-
-          if ((set.areaChart ?? areaChart) && set.data.length > 0) {
-            let ppp = 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
-            ppp += pp
-            ppp +=
-              'L' +
-              (initialSpacing + spacing * (set.data.length - 1)) +
-              ' ' +
-              heightUptoXaxis
-            ppp += 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
-            fillPointsArray.push(ppp.replace('L', 'M'))
-          }
-        }
-
-        return null
-      })
-
-      setPointsFromSet(pointsArray)
-      setArrowPointsFromSet(arrowPointsArray)
-      setFillPointsFromSet(fillPointsArray)
-    } else {
-      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)
-            } else {
-              pp += getSegmentPath(
-                data,
-                i,
-                lineSegments,
-                startIndex1,
-                endIndex1
-              )
-            }
-          }
-          if (data2.length > 0 && i >= startIndex2 && i <= endIndex2) {
-            if (stepChart ?? stepChart2) {
-              pp2 += getStepPath(data2, i)
-            } else {
-              pp2 += getSegmentPath(
-                data2,
-                i,
-                lineSegments2,
-                startIndex2,
-                endIndex2
-              )
-            }
-          }
-          if (data3.length > 0 && i >= startIndex3 && i <= endIndex3) {
-            if (stepChart ?? stepChart3) {
-              pp3 += getStepPath(data3, i)
-            } else {
-              pp3 += getSegmentPath(
-                data3,
-                i,
-                lineSegments3,
-                startIndex3,
-                endIndex3
-              )
-            }
-          }
-          if (data4.length > 0 && i >= startIndex4 && i <= endIndex4) {
-            if (stepChart ?? stepChart4) {
-              pp4 += getStepPath(data4, i)
-            } else {
-              pp4 += getSegmentPath(
-                data4,
-                i,
-                lineSegments4,
-                startIndex4,
-                endIndex4
-              )
-            }
-          }
-          if (data5.length > 0 && i >= startIndex5 && i <= endIndex5) {
-            if (stepChart ?? stepChart5) {
-              pp5 += getStepPath(data5, i)
-            } else {
-              pp5 += getSegmentPath(
-                data5,
-                i,
-                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)) {
-          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,
-            arrowLength1,
-            arrowWidth1,
-            showArrowBase1
-          )
-
-          setArrow1Points(arrowPoints)
-        }
-
-        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', ''))
-
-          const arrowPoints = getArrowPoints(
-            arrowTipX,
-            arrowTipY,
-            x1,
-            y1,
-            arrowLength2,
-            arrowWidth2,
-            showArrowBase2
-          )
-
-          setArrow2Points(arrowPoints)
-        }
-
-        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', ''))
-
-          const arrowPoints = getArrowPoints(
-            arrowTipX,
-            arrowTipY,
-            x1,
-            y1,
-            arrowLength3,
-            arrowWidth3,
-            showArrowBase3
-          )
-
-          setArrow3Points(arrowPoints)
-        }
-
-        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', ''))
-
-          const arrowPoints = getArrowPoints(
-            arrowTipX,
-            arrowTipY,
-            x1,
-            y1,
-            arrowLength4,
-            arrowWidth4,
-            showArrowBase4
-          )
-
-          setArrow4Points(arrowPoints)
-        }
-
-        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', ''))
-
-          const arrowPoints = getArrowPoints(
-            arrowTipX,
-            arrowTipY,
-            x1,
-            y1,
-            arrowLength5,
-            arrowWidth5,
-            showArrowBase5
-          )
-
-          setArrow5Points(arrowPoints)
-        }
-
-        /** *************************          For Area Charts          *************************/
-        if (atLeastOneAreaChart) {
-          let ppp = ''
-          let ppp2 = ''
-          let ppp3 = ''
-          let ppp4 = ''
-          let ppp5 = ''
-
-          if (
-            (areaChart ?? areaChart1) &&
-            data.length > 0 &&
-            !animateOnDataChange
-          ) {
-            ppp = 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
-            ppp += pp
-            ppp +=
-              'L' +
-              (initialSpacing + spacing * (data.length - 1)) +
-              ' ' +
-              heightUptoXaxis
-            ppp += 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
-            setFillPoints(ppp.replace('L', 'M'))
-          }
-
-          if ((areaChart ?? areaChart2) && data2.length > 0) {
-            ppp2 = 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
-            ppp2 += pp2
-            ppp2 +=
-              'L' +
-              (initialSpacing + spacing * (data.length - 1)) +
-              ' ' +
-              heightUptoXaxis
-            ppp2 += 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
-            setFillPoints2(ppp2.replace('L', 'M'))
-          }
-
-          if ((areaChart ?? areaChart3) && data3.length > 0) {
-            ppp3 = 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
-            ppp3 += pp3
-            ppp3 +=
-              'L' +
-              (initialSpacing + spacing * (data.length - 1)) +
-              ' ' +
-              heightUptoXaxis
-            ppp3 += 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
-            setFillPoints3(ppp3.replace('L', 'M'))
-          }
-          if ((areaChart ?? areaChart4) && data4.length > 0) {
-            ppp4 = 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
-            ppp4 += pp4
-            ppp4 +=
-              'L' +
-              (initialSpacing + spacing * (data.length - 1)) +
-              ' ' +
-              heightUptoXaxis
-            ppp4 += 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
-            setFillPoints4(ppp4.replace('L', 'M'))
-          }
-
-          if ((areaChart ?? areaChart5) && data5.length > 0) {
-            ppp5 = 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
-            ppp5 += pp5
-            ppp5 +=
-              'L' +
-              (initialSpacing + spacing * (data.length - 1)) +
-              ' ' +
-              heightUptoXaxis
-            ppp5 += 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
-            setFillPoints5(ppp5.replace('L', 'M'))
-          }
-        }
-
-        /*************************************************************************************/
-      } else {
-        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)])
-          }
-          if (data2.length > 0 && i >= startIndex2 && i <= endIndex2) {
-            p2Array.push([getX(i), getY(data2[i].value)])
-          }
-          if (data3.length > 0 && i >= startIndex3 && i <= endIndex3) {
-            p3Array.push([getX(i), getY(data3[i].value)])
-          }
-          if (data4.length > 0 && i >= startIndex4 && i <= endIndex4) {
-            p4Array.push([getX(i), getY(data4[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)
-
-        setPoints(
-          getCurvePathWithSegments(xx, lineSegments, SEGMENT_START, SEGMENT_END)
-        )
-        setPoints2(
-          getCurvePathWithSegments(
-            xx2,
-            lineSegments2,
-            SEGMENT_START,
-            SEGMENT_END
-          )
-        )
-        setPoints3(
-          getCurvePathWithSegments(
-            xx3,
-            lineSegments3,
-            SEGMENT_START,
-            SEGMENT_END
-          )
-        )
-        setPoints4(
-          getCurvePathWithSegments(
-            xx4,
-            lineSegments4,
-            SEGMENT_START,
-            SEGMENT_END
-          )
-        )
-        setPoints5(
-          getCurvePathWithSegments(
-            xx5,
-            lineSegments5,
-            SEGMENT_START,
-            SEGMENT_END
-          )
-        )
-
-        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]
-
-          const arrowPoints = getArrowPoints(
-            arrowTipX,
-            arrowTipY,
-            x1,
-            y1,
-            arrowLength1,
-            arrowWidth1,
-            showArrowBase1
-          )
-
-          setArrow1Points(arrowPoints)
-        }
-
-        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]
-
-          const arrowPoints = getArrowPoints(
-            arrowTipX,
-            arrowTipY,
-            x1,
-            y1,
-            arrowLength2,
-            arrowWidth2,
-            showArrowBase2
-          )
-
-          setArrow2Points(arrowPoints)
-        }
-
-        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]
-
-          const arrowPoints = getArrowPoints(
-            arrowTipX,
-            arrowTipY,
-            x1,
-            y1,
-            arrowLength3,
-            arrowWidth3,
-            showArrowBase3
-          )
-
-          setArrow2Points(arrowPoints)
-        }
-
-        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]
-
-          const arrowPoints = getArrowPoints(
-            arrowTipX,
-            arrowTipY,
-            x1,
-            y1,
-            arrowLength4,
-            arrowWidth4,
-            showArrowBase4
-          )
-
-          setArrow2Points(arrowPoints)
-        }
-
-        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]
-
-          const arrowPoints = getArrowPoints(
-            arrowTipX,
-            arrowTipY,
-            x1,
-            y1,
-            arrowLength5,
-            arrowWidth5,
-            showArrowBase5
-          )
-
-          setArrow2Points(arrowPoints)
-        }
-
-        /** *************************          For Area Charts          *************************/
-
-        if (atLeastOneAreaChart) {
-          if ((areaChart ?? areaChart1) && data.length > 0) {
-            xx = addLeadingAndTrailingPathForAreaFill(
-              xx,
-              data[0].value,
-              data.length
-            )
-            setFillPoints(xx)
-          }
-
-          if ((areaChart ?? areaChart2) && data2.length > 0) {
-            xx2 = addLeadingAndTrailingPathForAreaFill(
-              xx2,
-              data2[0].value,
-              data2.length
-            )
-            setFillPoints2(xx2)
-          }
-
-          if ((areaChart ?? areaChart3) && data3.length > 0) {
-            xx3 = addLeadingAndTrailingPathForAreaFill(
-              xx3,
-              data3[0].value,
-              data3.length
-            )
-            setFillPoints3(xx3)
-          }
-
-          if ((areaChart ?? areaChart4) && data4.length > 0) {
-            xx4 = addLeadingAndTrailingPathForAreaFill(
-              xx4,
-              data4[0].value,
-              data4.length
-            )
-            setFillPoints4(xx4)
-          }
-
-          if ((areaChart ?? areaChart5) && data5.length > 0) {
-            xx5 = addLeadingAndTrailingPathForAreaFill(
-              xx5,
-              data5[0].value,
-              data5.length
-            )
-            setFillPoints5(xx5)
-          }
-        }
-
-        /*************************************************************************************/
-      }
-    }
-  }, [
-    animateOnDataChange,
-    areaChart,
-    areaChart1,
-    areaChart2,
-    containerHeight,
-    data,
-    data2,
-    data3,
-    data4,
-    data5,
-    // data0,
-    dataPointsWidth1,
-    dataPointsWidth2,
-    dataPointsWidth3,
-    dataPointsWidth4,
-    dataPointsWidth5,
-    initialSpacing,
-    maxValue,
-    props.curved,
-    spacing,
-    xAxisThickness,
-    startIndex1,
-    endIndex1,
-    startIndex2,
-    endIndex2,
-    startIndex3,
-    endIndex3,
-    startIndex4,
-    endIndex4,
-    startIndex5,
-    endIndex5,
-    arrowLength1,
-    arrowWidth1,
-    showArrowBase1,
-    props.showArrow1,
-    props.showArrows,
-    props.showArrow2,
-    props.showArrow3,
-    props.showArrow4,
-    props.showArrow5,
-    arrowLength2,
-    arrowWidth2,
-    showArrowBase2,
-    arrowLength3,
-    arrowWidth3,
-    showArrowBase3,
-    arrowLength4,
-    arrowWidth4,
-    showArrowBase4,
-    arrowLength5,
-    arrowWidth5,
-    showArrowBase5
-  ])
-
-  useEffect(() => {
-    let pp = ''
-    if (!secondaryLineConfig.curved) {
-      for (let i = 0; i < secondaryData.length; i++) {
-        if (
-          i >= secondaryLineConfig.startIndex &&
-          i <= secondaryLineConfig.endIndex &&
-          !animateOnDataChange
-        ) {
-          pp +=
-            'L' + getX(i) + ' ' + getSecondaryY(secondaryData[i].value) + ' '
-        }
-      }
-
-      setSecondaryPoints(pp.replace('L', 'M'))
-
-      if (secondaryData.length > 1 && secondaryLineConfig.showArrow) {
-        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,
-          secondaryLineConfig.arrowConfig?.length,
-          secondaryLineConfig.arrowConfig?.width,
-          secondaryLineConfig.arrowConfig?.showArrowBase
-        )
-
-        setSecondaryArrowPoints(arrowPoints)
-      }
-
-      /** *************************          For Area Chart          *************************/
-      if (secondaryLineConfig.areaChart) {
-        let ppp = ''
-
-        if (secondaryData.length > 0 && !animateOnDataChange) {
-          ppp = 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
-          ppp += pp
-          ppp +=
-            'L' +
-            (initialSpacing + spacing * (secondaryData.length - 1)) +
-            ' ' +
-            heightUptoXaxis
-          ppp += 'L' + initialSpacing + ' ' + heightUptoXaxis + ' '
-          setSecondaryFillPoints(ppp.replace('L', 'M'))
-        }
-      }
-    } else {
-      /** *************************          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)])
-        }
-      }
-
-      let xx = svgPath(
-        p1Array,
-        secondaryLineConfig.curveType,
-        secondaryLineConfig.curvature
-      )
-
-      setSecondaryPoints(xx)
-
-      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]
-
-        const arrowPoints = getArrowPoints(
-          arrowTipX,
-          arrowTipY,
-          x1,
-          y1,
-          arrowLength1,
-          arrowWidth1,
-          showArrowBase1
-        )
-
-        setSecondaryArrowPoints(arrowPoints)
-      }
-
-      /** *************************          For Curved Area Charts          *************************/
-
-      if (secondaryLineConfig.areaChart) {
-        if (secondaryData.length > 0) {
-          xx = addLeadingAndTrailingPathForAreaFill(
-            xx,
-            secondaryData[0].value,
-            secondaryData.length
-          )
-          setSecondaryFillPoints(xx)
-        }
-      }
-    }
-  }, [secondaryData, secondaryLineConfig])
-
-  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 ??
-    Math.round(Math.ceil(-mostNegativeValue / stepValue))
-
-  const showXAxisIndices =
-    props.showXAxisIndices ?? AxesAndRulesDefaults.showXAxisIndices
-  const xAxisIndicesHeight =
-    props.xAxisIndicesHeight ?? AxesAndRulesDefaults.xAxisIndicesHeight
-  const xAxisIndicesWidth =
-    props.xAxisIndicesWidth ?? AxesAndRulesDefaults.xAxisIndicesWidth
-  const xAxisIndicesColor =
-    props.xAxisIndicesColor ?? AxesAndRulesDefaults.xAxisIndicesColor
-
-  const xAxisTextNumberOfLines =
-    props.xAxisTextNumberOfLines ?? AxesAndRulesDefaults.xAxisTextNumberOfLines
-  const xAxisLabelsVerticalShift =
-    props.xAxisLabelsVerticalShift ??
-    AxesAndRulesDefaults.xAxisLabelsVerticalShift
-  const horizontalRulesStyle = props.horizontalRulesStyle
-  const showFractionalValues =
-    props.showFractionalValues ?? AxesAndRulesDefaults.showFractionalValues
-
-  const horizontal = false
-  const yAxisAtTop = false
-
-  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 pointerColor =
-    pointerConfig?.pointerColor ?? defaultPointerConfig.pointerColor
-  const pointerComponent =
-    pointerConfig?.pointerComponent ?? defaultPointerConfig.pointerComponent
-
-  const showPointerStrip =
-    pointerConfig?.showPointerStrip === false
-      ? false
-      : defaultPointerConfig.showPointerStrip
-  const pointerStripHeight =
-    pointerConfig?.pointerStripHeight ?? defaultPointerConfig.pointerStripHeight
-  const pointerStripWidth =
-    pointerConfig?.pointerStripWidth ?? defaultPointerConfig.pointerStripWidth
-  const pointerStripColor =
-    pointerConfig?.pointerStripColor ?? defaultPointerConfig.pointerStripColor
-  const pointerStripUptoDataPoint =
-    pointerConfig?.pointerStripUptoDataPoint ??
-    defaultPointerConfig.pointerStripUptoDataPoint
-  const pointerLabelComponent =
-    pointerConfig?.pointerLabelComponent ??
-    defaultPointerConfig.pointerLabelComponent
-  const stripOverPointer =
-    pointerConfig?.stripOverPointer ?? defaultPointerConfig.stripOverPointer
-  const shiftPointerLabelX =
-    pointerConfig?.shiftPointerLabelX ?? defaultPointerConfig.shiftPointerLabelX
-  const shiftPointerLabelY =
-    pointerConfig?.shiftPointerLabelY ?? defaultPointerConfig.shiftPointerLabelY
-  const pointerLabelWidth =
-    pointerConfig?.pointerLabelWidth ?? defaultPointerConfig.pointerLabelWidth
-  const pointerLabelHeight =
-    pointerConfig?.pointerLabelHeight ?? defaultPointerConfig.pointerLabelHeight
-  const autoAdjustPointerLabelPosition =
-    pointerConfig?.autoAdjustPointerLabelPosition ??
-    defaultPointerConfig.autoAdjustPointerLabelPosition
-  const pointerVanishDelay =
-    pointerConfig?.pointerVanishDelay ?? defaultPointerConfig.pointerVanishDelay
-  const activatePointersOnLongPress =
-    pointerConfig?.activatePointersOnLongPress ??
-    defaultPointerConfig.activatePointersOnLongPress
-  const activatePointersDelay =
-    pointerConfig?.activatePointersDelay ??
-    defaultPointerConfig.activatePointersDelay
-  const initialPointerIndex =
-    pointerConfig?.initialPointerIndex ??
-    defaultPointerConfig.initialPointerIndex
-  const initialPointerAppearDelay =
-    pointerConfig?.initialPointerAppearDelay ??
-    (isAnimated
-      ? animationDuration
-      : defaultPointerConfig.initialPointerAppearDelay)
-  const persistPointer =
-    pointerConfig?.persistPointer ?? defaultPointerConfig.persistPointer
-  const hidePointer1 =
-    pointerConfig?.hidePointer1 ?? defaultPointerConfig.hidePointer1
-  const hidePointer2 =
-    pointerConfig?.hidePointer2 ?? defaultPointerConfig.hidePointer2
-  const hidePointer3 =
-    pointerConfig?.hidePointer3 ?? defaultPointerConfig.hidePointer3
-  const hidePointer4 =
-    pointerConfig?.hidePointer4 ?? defaultPointerConfig.hidePointer4
-  const hidePointer5 =
-    pointerConfig?.hidePointer5 ?? defaultPointerConfig.hidePointer5
-  const hideSecondaryPointer =
-    pointerConfig?.hideSecondaryPointer ??
-    defaultPointerConfig.hideSecondaryPointer
-  const resetPointerOnDataChange =
-    pointerConfig?.resetPointerOnDataChange ??
-    defaultPointerConfig.resetPointerOnDataChange
-  const pointerEvents = pointerConfig?.pointerEvents
-  const disableScroll =
-    props.disableScroll ??
-    (pointerConfig
-      ? activatePointersOnLongPress
-        ? !!responderActive
-        : true
-      : false)
-  const showScrollIndicator =
-    props.showScrollIndicator ?? LineDefaults.showScrollIndicator
-
-  const focusEnabled = props.focusEnabled ?? LineDefaults.focusEnabled
-  const showDataPointOnFocus =
-    props.showDataPointOnFocus ?? LineDefaults.showDataPointOnFocus
-  const showStripOnFocus =
-    props.showStripOnFocus ?? LineDefaults.showStripOnFocus
-  const showTextOnFocus = props.showTextOnFocus ?? LineDefaults.showTextOnFocus
-  const showDataPointLabelOnFocus =
-    props.showDataPointLabelOnFocus ?? LineDefaults.showDataPointLabelOnFocus
-  const stripHeight = props.stripHeight
-  const stripWidth = props.stripWidth ?? LineDefaults.stripWidth
-  const stripColor = props.stripColor ?? color1
-  const stripOpacity = props.stripOpacity ?? (startOpacity1 + endOpacity1) / 2
-  const stripStrokeDashArray = props.stripStrokeDashArray
-  const unFocusOnPressOut =
-    props.unFocusOnPressOut ?? LineDefaults.unFocusOnPressOut
-  const delayBeforeUnFocus =
-    props.delayBeforeUnFocus ?? LineDefaults.delayBeforeUnFocus
-
-  const containerHeightIncludingBelowXAxis =
-    extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight
-
-  const lineGradient = props.lineGradient ?? LineDefaults.lineGradient
-  const lineGradientDirection = props.lineGradientDirection ?? 'vertical'
-  const lineGradientStartColor =
-    props.lineGradientStartColor ?? LineDefaults.lineGradientStartColor
-  const lineGradientEndColor =
-    props.lineGradientEndColor ?? LineDefaults.lineGradientEndColor
-
-  const getPointerY = (value: number): number =>
-    value
-      ? containerHeight -
-        (value * containerHeight) / maxValue -
-        (pointerRadius || pointerHeight / 2) +
-        10
-      : 0
-
-  const initialisePointers = (): void => {
-    if (initialPointerIndex !== -1) {
-      const x =
-        initialSpacing +
-        spacing * initialPointerIndex -
-        (pointerRadius || pointerWidth / 2) -
-        1
-      if (dataSet?.length) {
-        const item = dataSet[0].data[initialPointerIndex]
-        if (initialPointerAppearDelay) {
-          setTimeout(() => {
-            setPointerConfigForDataSet(initialPointerIndex, item, x)
-          }, initialPointerAppearDelay)
-        } else {
-          setPointerConfigForDataSet(initialPointerIndex, item, x)
-        }
-      } else {
-        const item = (data0 ?? data)[initialPointerIndex]
-        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)
-        } else {
-          setPointerConfig(initialPointerIndex, item, x, y, y2, y3, y4, y5)
-        }
-      }
-    }
-  }
-
-  useEffect(() => {
-    initialisePointers()
-  }, [])
-
-  useEffect(() => {
-    if (resetPointerOnDataChange) {
-      initialisePointers()
-    }
-  }, [data])
-
-  const setPointerConfig = (
-    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 setPointerConfigForDataSet = (
-    initialPointerIndex: number,
-    item: lineDataItem,
-    x: number
-  ) => {
-    setPointerIndex(initialPointerIndex)
-    setPointerItem(item)
-    setPointerX(x)
-
-    const initialPointerYs =
-      dataSet?.map((set) => getPointerY(set.data[initialPointerIndex].value)) ??
-      []
-    setPointerYsForDataSet(initialPointerYs)
-  }
-
-  const dataPointsRadius =
-    props.dataPointsRadius1 ??
-    props.dataPointsRadius ??
-    LineDefaults.dataPointsRadius
-  const dataPointsWidth =
-    props.dataPointsWidth1 ??
-    props.dataPointsWidth ??
-    LineDefaults.dataPointsWidth
-
-  const extraWidthDueToDataPoint = props.hideDataPoints
-    ? 0
-    : dataPointsRadius ?? dataPointsWidth
-
-  const barAndLineChartsWrapperProps: BarAndLineChartsWrapperTypes = {
-    chartType: chartTypes.LINE,
-    containerHeight,
-    noOfSectionsBelowXAxis,
-    stepHeight,
-    negativeStepHeight: stepHeight,
-    labelsExtraHeight,
-    yAxisLabelWidth,
-    horizontal,
-    rtl: false,
-    shiftX: 0,
-    shiftY: 0,
-    yAxisAtTop,
-    initialSpacing,
-    data: data0 ?? data,
-    stackData: undefined, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
-    secondaryData,
-    barWidth: 0, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
-    xAxisThickness,
-    totalWidth,
-    disableScroll,
-    showScrollIndicator,
-    scrollToEnd,
-    scrollToIndex: props.scrollToIndex,
-    scrollAnimation,
-    scrollEventThrottle,
-    indicatorColor: props.indicatorColor,
-    selectedIndex,
-    setSelectedIndex,
-    spacing,
-    showLine: false,
-    lineConfig: null, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
-    lineConfig2: null, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
-    maxValue,
-    lineData: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
-    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)
-    arrowPoints: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
-
-    // horizSectionProps-
-    width: props.width,
-    horizSections,
-    endSpacing,
-    horizontalRulesStyle,
-    noOfSections,
-    sectionColors: props.sectionColors,
-    showFractionalValues,
-
-    axesAndRulesProps: getAxesAndRulesProps(props, stepValue, undefined),
-
-    yAxisLabelTexts: props.yAxisLabelTexts,
-    yAxisOffset,
-    rotateYAxisTexts: 0,
-    hideAxesAndRules: props.hideAxesAndRules,
-
-    showXAxisIndices,
-    xAxisIndicesHeight,
-    xAxisIndicesWidth,
-    xAxisIndicesColor,
-    pointerConfig,
-    getPointerProps,
-    pointerIndex,
-    pointerX,
-    pointerY,
-
-    onEndReached: props.onEndReached,
-    onStartReached: props.onStartReached,
-    endReachedOffset: props.endReachedOffset ?? LineDefaults.endReachedOffset,
-    onMomentumScrollEnd: props.onMomentumScrollEnd,
-    extraWidthDueToDataPoint
-  }
-
-  return {
-    curvature,
-    curveType,
-    scrollX,
-    setScrollX,
-    arrow1Points,
-    setArrow1Points,
-    arrow2Points,
-    setArrow2Points,
-    arrow3Points,
-    setArrow3Points,
-    arrow4Points,
-    setArrow4Points,
-    arrow5Points,
-    setArrow5Points,
-    secondaryArrowPoints,
-    setSecondaryArrowPoints,
-    pointerIndex,
-    setPointerIndex,
-    pointerX,
-    setPointerX,
-    pointerY,
-    setPointerY,
-    pointerItem,
-    setPointerItem,
-    pointerY2,
-    setPointerY2,
-    pointerItem2,
-    setPointerItem2,
-    pointerY3,
-    setPointerY3,
-    pointerItem3,
-    setPointerItem3,
-    pointerY4,
-    setPointerY4,
-    pointerItem4,
-    setPointerItem4,
-    pointerY5,
-    setPointerY5,
-    pointerYsForDataSet,
-    setPointerYsForDataSet,
-    pointerItem5,
-    setPointerItem5,
-    secondaryPointerY,
-    setSecondaryPointerY,
-    secondaryPointerItem,
-    setSecondaryPointerItem,
-    responderStartTime,
-    setResponderStartTime,
-    responderActive,
-    setResponderActive,
-    points,
-    setPoints,
-    points2,
-    setPoints2,
-    points3,
-    setPoints3,
-    points4,
-    setPoints4,
-    points5,
-    setPoints5,
-    secondaryPoints,
-    setSecondaryPoints,
-    fillPoints,
-    setFillPoints,
-    fillPoints2,
-    setFillPoints2,
-    fillPoints3,
-    setFillPoints3,
-    fillPoints4,
-    setFillPoints4,
-    fillPoints5,
-    setFillPoints5,
-    secondaryFillPoints,
-    setSecondaryFillPoints,
-    pointsFromSet,
-    setPointsFromSet,
-    fillPointsFromSet,
-    setFillPointsFromSet,
-    arrowPointsFromSet,
-    setArrowPointsFromSet,
-    selectedIndex,
-    setSelectedIndex,
-    noOfSections,
-    containerHeight,
-    data,
-    data2,
-    data3,
-    data4,
-    data5,
-    secondaryData,
-    dataSet,
-    data0,
-    scrollToEnd,
-    scrollAnimation,
-    scrollEventThrottle,
-    labelsExtraHeight,
-    animationDuration,
-    onDataChangeAnimationDuration,
-    animateTogether,
-    animateOnDataChange,
-    startIndex1,
-    startIndex2,
-    endIndex1,
-    endIndex2,
-    startIndex3,
-    endIndex3,
-    startIndex4,
-    endIndex4,
-    startIndex5,
-    endIndex5,
-    lineSegments,
-    lineSegments2,
-    lineSegments3,
-    lineSegments4,
-    lineSegments5,
-    highlightedRange,
-    adjustToWidth,
-    initialSpacing,
-    endSpacing,
-    thickness,
-    yAxisLabelWidth,
-    spacing,
-    xAxisThickness,
-    dataPointsHeight1,
-    dataPointsWidth1,
-    dataPointsRadius1,
-    dataPointsColor1,
-    dataPointsShape1,
-    dataPointsHeight2,
-    dataPointsWidth2,
-    dataPointsRadius2,
-    dataPointsColor2,
-    dataPointsShape2,
-    dataPointsHeight3,
-    dataPointsWidth3,
-    dataPointsRadius3,
-    dataPointsColor3,
-    dataPointsShape3,
-    dataPointsHeight4,
-    dataPointsWidth4,
-    dataPointsRadius4,
-    dataPointsColor4,
-    dataPointsShape4,
-    dataPointsHeight5,
-    dataPointsWidth5,
-    dataPointsRadius5,
-    dataPointsColor5,
-    dataPointsShape5,
-    areaChart,
-    areaChart1,
-    areaChart2,
-    areaChart3,
-    areaChart4,
-    areaChart5,
-    atLeastOneAreaChart,
-    getIsNthAreaChart,
-    stepChart,
-    stepChart1,
-    stepChart2,
-    stepChart3,
-    stepChart4,
-    stepChart5,
-    edgePosition,
-    textFontSize1,
-    textFontSize2,
-    textFontSize3,
-    textFontSize4,
-    textFontSize5,
-    textColor1,
-    textColor2,
-    textColor3,
-    textColor4,
-    textColor5,
-    totalWidth,
-    maxValue,
-    mostNegativeValue,
-    overflowTop,
-    extendedContainerHeight,
-    getX,
-    getY,
-    secondaryMaxValue,
-    getSecondaryY,
-    heightUptoXaxis,
-    setPointsOnChange,
-    showValuesAsDataPointsText,
-    thickness1,
-    thickness2,
-    thickness3,
-    thickness4,
-    thickness5,
-    zIndex1,
-    zIndex2,
-    zIndex3,
-    zIndex4,
-    zIndex5,
-    strokeDashArray1,
-    strokeDashArray2,
-    strokeDashArray3,
-    strokeDashArray4,
-    strokeDashArray5,
-    rotateLabel,
-    isAnimated,
-    hideDataPoints1,
-    hideDataPoints2,
-    hideDataPoints3,
-    hideDataPoints4,
-    hideDataPoints5,
-    color1,
-    color2,
-    color3,
-    color4,
-    color5,
-    startFillColor1,
-    endFillColor1,
-    startOpacity,
-    endOpacity,
-    startOpacity1,
-    endOpacity1,
-    startFillColor2,
-    endFillColor2,
-    startOpacity2,
-    endOpacity2,
-    startFillColor3,
-    endFillColor3,
-    startOpacity3,
-    endOpacity3,
-    startFillColor4,
-    endFillColor4,
-    startOpacity4,
-    endOpacity4,
-    startFillColor5,
-    endFillColor5,
-    startOpacity5,
-    endOpacity5,
-    arrowLength1,
-    arrowWidth1,
-    arrowStrokeWidth1,
-    arrowStrokeColor1,
-    arrowFillColor1,
-    showArrowBase1,
-    arrowLength2,
-    arrowWidth2,
-    arrowStrokeWidth2,
-    arrowStrokeColor2,
-    arrowFillColor2,
-    showArrowBase2,
-    arrowLength3,
-    arrowWidth3,
-    arrowStrokeWidth3,
-    arrowStrokeColor3,
-    arrowFillColor3,
-    showArrowBase3,
-    arrowLength4,
-    arrowWidth4,
-    arrowStrokeWidth4,
-    arrowStrokeColor4,
-    arrowFillColor4,
-    showArrowBase4,
-    arrowLength5,
-    arrowWidth5,
-    arrowStrokeWidth5,
-    arrowStrokeColor5,
-    arrowFillColor5,
-    showArrowBase5,
-    arrowLengthsFromSet,
-    arrowWidthsFromSet,
-    arrowStrokeWidthsFromSet,
-    arrowStrokeColorsFromSet,
-    arrowFillColorsFromSet,
-    showArrowBasesFromSet,
-    secondaryLineConfig,
-    addLeadingAndTrailingPathForAreaFill,
-    getNextPoint,
-    getStepPath,
-    getSegmentPath,
-    gradientDirection,
-    horizSections,
-    stepHeight,
-    stepValue,
-    noOfSectionsBelowXAxis,
-    showXAxisIndices,
-    xAxisIndicesHeight,
-    xAxisIndicesWidth,
-    xAxisIndicesColor,
-    xAxisTextNumberOfLines,
-    xAxisLabelsVerticalShift,
-    horizontalRulesStyle,
-    showFractionalValues,
-    horizontal,
-    yAxisAtTop,
-    pointerConfig,
-    getPointerProps,
-    pointerHeight,
-    pointerWidth,
-    pointerRadius,
-    pointerColor,
-    pointerComponent,
-    showPointerStrip,
-    pointerStripHeight,
-    pointerStripWidth,
-    pointerStripColor,
-    pointerStripUptoDataPoint,
-    pointerLabelComponent,
-    stripOverPointer,
-    shiftPointerLabelX,
-    shiftPointerLabelY,
-    pointerLabelWidth,
-    pointerLabelHeight,
-    autoAdjustPointerLabelPosition,
-    pointerVanishDelay,
-    activatePointersOnLongPress,
-    activatePointersDelay,
-    initialPointerIndex,
-    initialPointerAppearDelay,
-    persistPointer,
-    hidePointer1,
-    hidePointer2,
-    hidePointer3,
-    hidePointer4,
-    hidePointer5,
-    hideSecondaryPointer,
-    resetPointerOnDataChange,
-    pointerEvents,
-    disableScroll,
-    showScrollIndicator,
-    focusEnabled,
-    showDataPointOnFocus,
-    showStripOnFocus,
-    showTextOnFocus,
-    showDataPointLabelOnFocus,
-    stripHeight,
-    stripWidth,
-    stripColor,
-    stripOpacity,
-    stripStrokeDashArray,
-    unFocusOnPressOut,
-    delayBeforeUnFocus,
-    containerHeightIncludingBelowXAxis,
-    lineGradient,
-    lineGradientDirection,
-    lineGradientStartColor,
-    lineGradientEndColor,
-    getPointerY,
-    initialisePointers,
-    barAndLineChartsWrapperProps,
-    yAxisExtraHeightAtTop
-  }
-}