react-native-gifted-charts 1.4.20 → 1.4.22

package/dist/LineChart/index.js

@@ -0,0 +1,1089 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useEffect, useMemo, useRef } from 'react';
+import { View, Animated, Easing, Text, Dimensions, Platform, I18nManager, } from 'react-native';
+import { styles } from './styles';
+import { screenWidth } from '../utils';
+import Svg, { Path, LinearGradient, Stop, Circle, Rect, Text as CanvasText, Line, } from 'react-native-svg';
+import { getSegmentedPathObjects, getRegionPathObjects, RANGE_ENTER, RANGE_EXIT, SEGMENT_END, SEGMENT_START, STOP, useLineChart, adjustToOffset, LineDefaults, } from 'gifted-charts-core';
+import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
+import { StripAndLabel } from '../Components/common/StripAndLabel';
+import { Pointer } from '../Components/common/Pointer';
+var initialData = null;
+var animations = [];
+export var LineChart = function (props) {
+    var _a, _b, _c, _d, _e, _f;
+    var scrollRef = (_a = props.scrollRef) !== null && _a !== void 0 ? _a : useRef(null);
+    var opacValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var heightValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var widthValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var widthValue2 = useMemo(function () { return new Animated.Value(0); }, []);
+    var widthValue3 = useMemo(function () { return new Animated.Value(0); }, []);
+    var widthValue4 = useMemo(function () { return new Animated.Value(0); }, []);
+    var widthValue5 = useMemo(function () { return new Animated.Value(0); }, []);
+    if (!initialData) {
+        initialData = (_e = (_d = (_c = (_b = props.dataSet) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.data) !== null && _d !== void 0 ? _d : props.data) !== null && _e !== void 0 ? _e : [];
+        animations = initialData
+            .filter(function (item) { return item.value; })
+            .map(function (item) { return new Animated.Value(item.value); });
+    }
+    var _g = useLineChart(__assign(__assign({}, props), { animations: animations, parentWidth: (_f = props.parentWidth) !== null && _f !== void 0 ? _f : screenWidth })), scrollX = _g.scrollX, setScrollX = _g.setScrollX, arrow1Points = _g.arrow1Points, arrow2Points = _g.arrow2Points, arrow3Points = _g.arrow3Points, arrow4Points = _g.arrow4Points, arrow5Points = _g.arrow5Points, secondaryArrowPoints = _g.secondaryArrowPoints, pointerIndex = _g.pointerIndex, setPointerIndex = _g.setPointerIndex, pointerX = _g.pointerX, setPointerX = _g.setPointerX, pointerY = _g.pointerY, setPointerY = _g.setPointerY, pointerItem = _g.pointerItem, setPointerItem = _g.setPointerItem, pointerY2 = _g.pointerY2, setPointerY2 = _g.setPointerY2, pointerItem2 = _g.pointerItem2, setPointerItem2 = _g.setPointerItem2, pointerY3 = _g.pointerY3, setPointerY3 = _g.setPointerY3, pointerItem3 = _g.pointerItem3, setPointerItem3 = _g.setPointerItem3, pointerY4 = _g.pointerY4, setPointerY4 = _g.setPointerY4, pointerItem4 = _g.pointerItem4, setPointerItem4 = _g.setPointerItem4, pointerY5 = _g.pointerY5, setPointerY5 = _g.setPointerY5, pointerYsForDataSet = _g.pointerYsForDataSet, setPointerYsForDataSet = _g.setPointerYsForDataSet, pointerItem5 = _g.pointerItem5, setPointerItem5 = _g.setPointerItem5, secondaryPointerY = _g.secondaryPointerY, setSecondaryPointerY = _g.setSecondaryPointerY, secondaryPointerItem = _g.secondaryPointerItem, setSecondaryPointerItem = _g.setSecondaryPointerItem, responderStartTime = _g.responderStartTime, setResponderStartTime = _g.setResponderStartTime, setResponderActive = _g.setResponderActive, points = _g.points, points2 = _g.points2, points3 = _g.points3, points4 = _g.points4, points5 = _g.points5, secondaryPoints = _g.secondaryPoints, fillPoints = _g.fillPoints, fillPoints2 = _g.fillPoints2, fillPoints3 = _g.fillPoints3, fillPoints4 = _g.fillPoints4, fillPoints5 = _g.fillPoints5, secondaryFillPoints = _g.secondaryFillPoints, pointsFromSet = _g.pointsFromSet, fillPointsFromSet = _g.fillPointsFromSet, arrowPointsFromSet = _g.arrowPointsFromSet, selectedIndex = _g.selectedIndex, setSelectedIndex = _g.setSelectedIndex, containerHeight = _g.containerHeight, data = _g.data, data2 = _g.data2, data3 = _g.data3, data4 = _g.data4, data5 = _g.data5, secondaryData = _g.secondaryData, dataSet = _g.dataSet, data0 = _g.data0, labelsExtraHeight = _g.labelsExtraHeight, animationDuration = _g.animationDuration, onDataChangeAnimationDuration = _g.onDataChangeAnimationDuration, animateTogether = _g.animateTogether, animateOnDataChange = _g.animateOnDataChange, startIndex1 = _g.startIndex1, startIndex2 = _g.startIndex2, endIndex1 = _g.endIndex1, endIndex2 = _g.endIndex2, startIndex3 = _g.startIndex3, endIndex3 = _g.endIndex3, startIndex4 = _g.startIndex4, endIndex4 = _g.endIndex4, startIndex5 = _g.startIndex5, endIndex5 = _g.endIndex5, initialSpacing = _g.initialSpacing, thickness = _g.thickness, yAxisLabelWidth = _g.yAxisLabelWidth, spacing = _g.spacing, xAxisThickness = _g.xAxisThickness, dataPointsHeight1 = _g.dataPointsHeight1, dataPointsWidth1 = _g.dataPointsWidth1, dataPointsRadius1 = _g.dataPointsRadius1, dataPointsColor1 = _g.dataPointsColor1, dataPointsShape1 = _g.dataPointsShape1, dataPointsHeight2 = _g.dataPointsHeight2, dataPointsWidth2 = _g.dataPointsWidth2, dataPointsRadius2 = _g.dataPointsRadius2, dataPointsColor2 = _g.dataPointsColor2, dataPointsShape2 = _g.dataPointsShape2, dataPointsHeight3 = _g.dataPointsHeight3, dataPointsWidth3 = _g.dataPointsWidth3, dataPointsRadius3 = _g.dataPointsRadius3, dataPointsColor3 = _g.dataPointsColor3, dataPointsShape3 = _g.dataPointsShape3, dataPointsHeight4 = _g.dataPointsHeight4, dataPointsWidth4 = _g.dataPointsWidth4, dataPointsRadius4 = _g.dataPointsRadius4, dataPointsColor4 = _g.dataPointsColor4, dataPointsShape4 = _g.dataPointsShape4, dataPointsHeight5 = _g.dataPointsHeight5, dataPointsWidth5 = _g.dataPointsWidth5, dataPointsRadius5 = _g.dataPointsRadius5, dataPointsColor5 = _g.dataPointsColor5, dataPointsShape5 = _g.dataPointsShape5, getIsNthAreaChart = _g.getIsNthAreaChart, textFontSize1 = _g.textFontSize1, textFontSize2 = _g.textFontSize2, textFontSize3 = _g.textFontSize3, textFontSize4 = _g.textFontSize4, textFontSize5 = _g.textFontSize5, textColor1 = _g.textColor1, textColor2 = _g.textColor2, textColor3 = _g.textColor3, textColor4 = _g.textColor4, textColor5 = _g.textColor5, totalWidth = _g.totalWidth, maxValue = _g.maxValue, overflowTop = _g.overflowTop, extendedContainerHeight = _g.extendedContainerHeight, getX = _g.getX, getY = _g.getY, getSecondaryY = _g.getSecondaryY, secondaryMaxValue = _g.secondaryMaxValue, showValuesAsDataPointsText = _g.showValuesAsDataPointsText, thickness1 = _g.thickness1, thickness2 = _g.thickness2, thickness3 = _g.thickness3, thickness4 = _g.thickness4, thickness5 = _g.thickness5, zIndex1 = _g.zIndex1, zIndex2 = _g.zIndex2, zIndex3 = _g.zIndex3, zIndex4 = _g.zIndex4, zIndex5 = _g.zIndex5, strokeDashArray1 = _g.strokeDashArray1, strokeDashArray2 = _g.strokeDashArray2, strokeDashArray3 = _g.strokeDashArray3, strokeDashArray4 = _g.strokeDashArray4, strokeDashArray5 = _g.strokeDashArray5, rotateLabel = _g.rotateLabel, isAnimated = _g.isAnimated, hideDataPoints1 = _g.hideDataPoints1, hideDataPoints2 = _g.hideDataPoints2, hideDataPoints3 = _g.hideDataPoints3, hideDataPoints4 = _g.hideDataPoints4, hideDataPoints5 = _g.hideDataPoints5, color1 = _g.color1, color2 = _g.color2, color3 = _g.color3, color4 = _g.color4, color5 = _g.color5, startFillColor1 = _g.startFillColor1, endFillColor1 = _g.endFillColor1, startOpacity1 = _g.startOpacity1, endOpacity1 = _g.endOpacity1, startFillColor2 = _g.startFillColor2, endFillColor2 = _g.endFillColor2, startOpacity2 = _g.startOpacity2, endOpacity2 = _g.endOpacity2, startFillColor3 = _g.startFillColor3, endFillColor3 = _g.endFillColor3, startOpacity3 = _g.startOpacity3, endOpacity3 = _g.endOpacity3, startFillColor4 = _g.startFillColor4, endFillColor4 = _g.endFillColor4, startOpacity4 = _g.startOpacity4, endOpacity4 = _g.endOpacity4, startFillColor5 = _g.startFillColor5, endFillColor5 = _g.endFillColor5, startOpacity5 = _g.startOpacity5, endOpacity5 = _g.endOpacity5, arrowStrokeWidth1 = _g.arrowStrokeWidth1, arrowStrokeColor1 = _g.arrowStrokeColor1, arrowFillColor1 = _g.arrowFillColor1, arrowStrokeWidth2 = _g.arrowStrokeWidth2, arrowStrokeColor2 = _g.arrowStrokeColor2, arrowFillColor2 = _g.arrowFillColor2, arrowStrokeWidth3 = _g.arrowStrokeWidth3, arrowStrokeColor3 = _g.arrowStrokeColor3, arrowFillColor3 = _g.arrowFillColor3, arrowStrokeWidth4 = _g.arrowStrokeWidth4, arrowStrokeColor4 = _g.arrowStrokeColor4, arrowFillColor4 = _g.arrowFillColor4, arrowStrokeWidth5 = _g.arrowStrokeWidth5, arrowStrokeColor5 = _g.arrowStrokeColor5, arrowFillColor5 = _g.arrowFillColor5, arrowStrokeWidthsFromSet = _g.arrowStrokeWidthsFromSet, arrowStrokeColorsFromSet = _g.arrowStrokeColorsFromSet, arrowFillColorsFromSet = _g.arrowFillColorsFromSet, secondaryLineConfig = _g.secondaryLineConfig, gradientDirection = _g.gradientDirection, stepHeight = _g.stepHeight, noOfSectionsBelowXAxis = _g.noOfSectionsBelowXAxis, xAxisTextNumberOfLines = _g.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = _g.xAxisLabelsVerticalShift, pointerConfig = _g.pointerConfig, pointerHeight = _g.pointerHeight, pointerWidth = _g.pointerWidth, pointerRadius = _g.pointerRadius, pointerColor = _g.pointerColor, pointerComponent = _g.pointerComponent, showPointerStrip = _g.showPointerStrip, pointerStripHeight = _g.pointerStripHeight, pointerStripWidth = _g.pointerStripWidth, pointerStripColor = _g.pointerStripColor, pointerStripUptoDataPoint = _g.pointerStripUptoDataPoint, pointerLabelComponent = _g.pointerLabelComponent, stripOverPointer = _g.stripOverPointer, shiftPointerLabelX = _g.shiftPointerLabelX, shiftPointerLabelY = _g.shiftPointerLabelY, pointerLabelWidth = _g.pointerLabelWidth, pointerLabelHeight = _g.pointerLabelHeight, autoAdjustPointerLabelPosition = _g.autoAdjustPointerLabelPosition, pointerVanishDelay = _g.pointerVanishDelay, activatePointersOnLongPress = _g.activatePointersOnLongPress, activatePointersDelay = _g.activatePointersDelay, persistPointer = _g.persistPointer, hidePointer1 = _g.hidePointer1, hidePointer2 = _g.hidePointer2, hidePointer3 = _g.hidePointer3, hidePointer4 = _g.hidePointer4, hidePointer5 = _g.hidePointer5, hideSecondaryPointer = _g.hideSecondaryPointer, pointerEvents = _g.pointerEvents, focusEnabled = _g.focusEnabled, showDataPointOnFocus = _g.showDataPointOnFocus, showStripOnFocus = _g.showStripOnFocus, showTextOnFocus = _g.showTextOnFocus, showDataPointLabelOnFocus = _g.showDataPointLabelOnFocus, stripHeight = _g.stripHeight, stripWidth = _g.stripWidth, stripColor = _g.stripColor, stripOpacity = _g.stripOpacity, stripStrokeDashArray = _g.stripStrokeDashArray, unFocusOnPressOut = _g.unFocusOnPressOut, delayBeforeUnFocus = _g.delayBeforeUnFocus, containerHeightIncludingBelowXAxis = _g.containerHeightIncludingBelowXAxis, lineGradient = _g.lineGradient, lineGradientDirection = _g.lineGradientDirection, lineGradientStartColor = _g.lineGradientStartColor, lineGradientEndColor = _g.lineGradientEndColor, barAndLineChartsWrapperProps = _g.barAndLineChartsWrapperProps;
+    var secondaryXAxis = props.secondaryXAxis;
+    var widthValuesFromSet = useMemo(function () { return dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set) { return new Animated.Value(0); }); }, []);
+    useEffect(function () {
+        if (animateOnDataChange) {
+            Animated.parallel(animations.map(function (anItem, index) {
+                var _a, _b;
+                return Animated.timing(anItem, {
+                    toValue: (_b = (_a = data[index]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 0,
+                    useNativeDriver: Platform.OS === 'ios', // if useNativeDriver is set to true, animateOnDataChange feature fails for Android, so setting it true only for iOS
+                    duration: onDataChangeAnimationDuration,
+                });
+            })).start();
+        }
+    }, [animateOnDataChange, data, onDataChangeAnimationDuration]);
+    var labelsAppear = useCallback(function () {
+        opacValue.setValue(0);
+        Animated.timing(opacValue, {
+            toValue: 1,
+            duration: 500,
+            easing: Easing.ease,
+            useNativeDriver: false,
+        }).start();
+    }, [opacValue]);
+    var appearingOpacity = opacValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1],
+    });
+    var decreaseWidth = useCallback(function () {
+        widthValue.setValue(0);
+        Animated.timing(widthValue, {
+            toValue: 1,
+            duration: animationDuration,
+            easing: Easing.linear,
+            useNativeDriver: false,
+        }).start();
+    }, [animationDuration, widthValue]);
+    var decreaseWidth2 = useCallback(function () {
+        widthValue2.setValue(0);
+        Animated.timing(widthValue2, {
+            toValue: 1,
+            duration: animationDuration,
+            easing: Easing.linear,
+            useNativeDriver: false,
+        }).start();
+    }, [animationDuration, widthValue2]);
+    var decreaseWidth3 = useCallback(function () {
+        widthValue3.setValue(0);
+        Animated.timing(widthValue3, {
+            toValue: 1,
+            duration: animationDuration,
+            easing: Easing.linear,
+            useNativeDriver: false,
+        }).start();
+    }, [animationDuration, widthValue3]);
+    var decreaseWidth4 = useCallback(function () {
+        widthValue4.setValue(0);
+        Animated.timing(widthValue4, {
+            toValue: 1,
+            duration: animationDuration,
+            easing: Easing.linear,
+            useNativeDriver: false,
+        }).start();
+    }, [animationDuration, widthValue4]);
+    var decreaseWidth5 = useCallback(function () {
+        widthValue5.setValue(0);
+        Animated.timing(widthValue5, {
+            toValue: 1,
+            duration: animationDuration,
+            easing: Easing.linear,
+            useNativeDriver: false,
+        }).start();
+    }, [animationDuration, widthValue5]);
+    var decreaseWidthsFromSet = useCallback(function () {
+        dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set, index) {
+            var _a;
+            (_a = widthValuesFromSet === null || widthValuesFromSet === void 0 ? void 0 : widthValuesFromSet[index]) === null || _a === void 0 ? void 0 : _a.setValue(0);
+            if (widthValuesFromSet === null || widthValuesFromSet === void 0 ? void 0 : widthValuesFromSet[index]) {
+                Animated.timing(widthValuesFromSet === null || widthValuesFromSet === void 0 ? void 0 : widthValuesFromSet[index], {
+                    toValue: 1,
+                    duration: animationDuration,
+                    easing: Easing.linear,
+                    useNativeDriver: false,
+                }).start();
+            }
+        });
+    }, [animationDuration, widthValuesFromSet]);
+    useEffect(function () {
+        decreaseWidth();
+        labelsAppear();
+        widthValuesFromSet === null || widthValuesFromSet === void 0 ? void 0 : widthValuesFromSet.forEach(function (item, index) {
+            setTimeout(function () {
+                decreaseWidthsFromSet();
+            }, animateTogether ? 0 : animationDuration * index);
+        });
+        setTimeout(function () {
+            decreaseWidth2();
+        }, animateTogether ? 0 : animationDuration);
+        setTimeout(function () {
+            decreaseWidth3();
+        }, animateTogether ? 0 : animationDuration * 2);
+        setTimeout(function () {
+            decreaseWidth4();
+        }, animateTogether ? 0 : animationDuration * 3);
+        setTimeout(function () {
+            decreaseWidth5();
+        }, animateTogether ? 0 : animationDuration * 4);
+    }, [
+        animateTogether,
+        animationDuration,
+        decreaseWidth,
+        decreaseWidth2,
+        decreaseWidth3,
+        decreaseWidth4,
+        decreaseWidth5,
+        labelsAppear,
+    ]);
+    var renderLabel = function (top, index, label, labelTextStyle, labelComponent) {
+        var _a, _b;
+        return (_jsx(View, { style: [
+                {
+                    position: 'absolute',
+                    bottom: top
+                        ? containerHeight +
+                            60 +
+                            ((_a = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _a !== void 0 ? _a : 15)
+                        : 54 - xAxisTextNumberOfLines * 18,
+                    zIndex: 10,
+                    width: spacing + labelsExtraHeight,
+                    left: index === 0 && initialSpacing < 10
+                        ? initialSpacing / 2 + spacing * index - spacing / 2 + 4
+                        : initialSpacing / 2 + spacing * index - spacing / 2 - 10,
+                    height: (_b = props.xAxisLabelsHeight) !== null && _b !== void 0 ? _b : xAxisTextNumberOfLines * 18,
+                },
+                rotateLabel && { transform: [{ rotate: '60deg' }] },
+            ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { style: [{ textAlign: 'center' }, labelTextStyle], numberOfLines: xAxisTextNumberOfLines, children: label })) }));
+    };
+    var renderAnimatedLabel = function (top, index, label, labelTextStyle, labelComponent) {
+        var _a, _b;
+        return (_jsx(Animated.View, { style: [
+                {
+                    height: rotateLabel
+                        ? 40
+                        : (_a = props.xAxisLabelsHeight) !== null && _a !== void 0 ? _a : xAxisTextNumberOfLines * 18,
+                    position: 'absolute',
+                    bottom: top
+                        ? containerHeight +
+                            60 +
+                            ((_b = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _b !== void 0 ? _b : 15)
+                        : rotateLabel
+                            ? 10
+                            : 54 - xAxisTextNumberOfLines * 18,
+                    zIndex: 10,
+                    width: spacing,
+                    left: index === 0 && initialSpacing < 10
+                        ? initialSpacing / 2 + spacing * index - spacing / 2 + 4
+                        : initialSpacing / 2 + spacing * index - spacing / 2 - 10,
+                    opacity: appearingOpacity,
+                },
+                rotateLabel && { transform: [{ rotate: '60deg' }] },
+            ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { style: [{ textAlign: 'center' }, labelTextStyle], numberOfLines: xAxisTextNumberOfLines, children: label })) }));
+    };
+    var animatedWidth = widthValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, totalWidth],
+    });
+    var animatedWidth2 = widthValue2.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, totalWidth],
+    });
+    var animatedWidth3 = widthValue3.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, totalWidth],
+    });
+    var animatedWidth4 = widthValue4.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, totalWidth],
+    });
+    var animatedWidth5 = widthValue5.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, totalWidth],
+    });
+    var onStripPress = function (item, index) {
+        if (props.focusedDataPointIndex === undefined || !props.onFocus) {
+            setSelectedIndex(index);
+        }
+        if (props.onFocus) {
+            props.onFocus(item, index);
+        }
+    };
+    var renderDataPoints = function (hideDataPoints, dataForRender, originalDataFromProps, dataPtsShape, dataPtsWidth, dataPtsHeight, dataPtsColor, dataPtsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText) {
+        var getYOrSecondaryY = isSecondary ? getSecondaryY : getY;
+        return dataForRender.map(function (item, index) {
+            var _a;
+            var _b, _c, _d, _e, _f;
+            if (index < startIndex || index > endIndex)
+                return null;
+            if (item.hideDataPoint) {
+                return null;
+            }
+            var dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, text, customDataPoint, dataPointLabelComponent;
+            if (index === selectedIndex) {
+                dataPointsShape =
+                    item.focusedDataPointShape ||
+                        props.focusedDataPointShape ||
+                        item.dataPointShape ||
+                        dataPtsShape;
+                dataPointsWidth =
+                    item.focusedDataPointWidth ||
+                        props.focusedDataPointWidth ||
+                        item.dataPointWidth ||
+                        dataPtsWidth;
+                dataPointsHeight =
+                    item.focusedDataPointHeight ||
+                        props.focusedDataPointHeight ||
+                        item.dataPointHeight ||
+                        dataPtsHeight;
+                dataPointsColor =
+                    item.focusedDataPointColor ||
+                        props.focusedDataPointColor ||
+                        LineDefaults.focusedDataPointColor;
+                dataPointsRadius =
+                    item.focusedDataPointRadius ||
+                        props.focusedDataPointRadius ||
+                        item.dataPointRadius ||
+                        dataPtsRadius;
+                if (showTextOnFocus) {
+                    text = item.dataPointText;
+                }
+                customDataPoint =
+                    item.focusedCustomDataPoint ||
+                        props.focusedCustomDataPoint ||
+                        item.customDataPoint ||
+                        props.customDataPoint;
+                dataPointLabelComponent =
+                    item.focusedDataPointLabelComponent || item.dataPointLabelComponent;
+            }
+            else {
+                dataPointsShape = item.dataPointShape || dataPtsShape;
+                dataPointsWidth = item.dataPointWidth || dataPtsWidth;
+                dataPointsHeight = item.dataPointHeight || dataPtsHeight;
+                dataPointsColor = item.dataPointColor || dataPtsColor;
+                dataPointsRadius = item.dataPointRadius || dataPtsRadius;
+                if (showTextOnFocus) {
+                    text = '';
+                }
+                customDataPoint = item.customDataPoint || props.customDataPoint;
+                dataPointLabelComponent = item.dataPointLabelComponent;
+            }
+            if (showValuesAsDataPointsText) {
+                text = originalDataFromProps[index].value;
+            }
+            var currentStripHeight = (_b = item.stripHeight) !== null && _b !== void 0 ? _b : stripHeight;
+            var currentStripWidth = (_c = item.stripWidth) !== null && _c !== void 0 ? _c : stripWidth;
+            var currentStripOpacity = (_d = item.stripOpacity) !== null && _d !== void 0 ? _d : stripOpacity;
+            var currentStripStrokeDashArray = (_f = (_e = item.stripStrokeDashArray) !== null && _e !== void 0 ? _e : stripStrokeDashArray) !== null && _f !== void 0 ? _f : '';
+            var currentStripColor = item.stripColor || stripColor;
+            var position = I18nManager.isRTL ? 'right' : 'left';
+            var y1 = currentStripHeight
+                ? containerHeight - currentStripHeight + 8
+                : containerHeight -
+                    dataPointsHeight / 2 +
+                    14 -
+                    (item.value * containerHeight) / maxValue;
+            var actualStripHeight = currentStripHeight ||
+                (item.value * containerHeight) / maxValue - 2 + overflowTop;
+            return (_jsxs(Fragment, { children: [focusEnabled ? (_jsx(_Fragment, { children: unFocusOnPressOut ? ( // remove strip on onFocus
+                        _jsx(Rect, { onPressIn: function () { return onStripPress(item, index); }, onPressOut: function () {
+                                return setTimeout(function () { return setSelectedIndex(-1); }, delayBeforeUnFocus);
+                            }, x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight - 0, fill: 'none' })) : (_jsx(Rect, { onPress: function () { return onStripPress(item, index); }, x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight, fill: 'none' })) })) : null, item.showStrip ||
+                        (focusEnabled && index === selectedIndex && showStripOnFocus) ? (_jsx(Line, { x1: initialSpacing + spacing * index - currentStripWidth / 2 - 1, y1: y1, x2: initialSpacing + spacing * index - currentStripWidth / 2 - 1, y2: y1 + actualStripHeight, strokeWidth: currentStripWidth, stroke: currentStripColor, strokeDasharray: currentStripStrokeDashArray, opacity: currentStripOpacity })) : null, hideDataPoints ? null : (_jsxs(_Fragment, { children: [customDataPoint ? (_jsx(View, { style: [
+                                    styles.customDataPointContainer,
+                                    (_a = {
+                                            height: dataPointsHeight,
+                                            width: dataPointsWidth,
+                                            top: getYOrSecondaryY(item.value)
+                                        },
+                                        _a[position] = initialSpacing - dataPointsWidth + spacing * index,
+                                        _a.transform = [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+                                        _a),
+                                ], children: customDataPoint(item, index) })) : null, dataPointsShape === 'rectangular' ? (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(Rect, { x: getX(index) - dataPointsWidth / 2, y: getYOrSecondaryY(item.value) - dataPointsHeight / 2, width: dataPointsWidth, height: dataPointsHeight, fill: showDataPointOnFocus
+                                        ? index === selectedIndex
+                                            ? dataPointsColor
+                                            : 'none'
+                                        : dataPointsColor, onPress: function () {
+                                        item.onPress
+                                            ? item.onPress(item, index)
+                                            : props.onPress
+                                                ? props.onPress(item, index)
+                                                : null;
+                                    } })) }, index)) : (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(Circle, { cx: getX(index), cy: getYOrSecondaryY(item.value), r: dataPointsRadius, fill: showDataPointOnFocus
+                                        ? index === selectedIndex
+                                            ? dataPointsColor
+                                            : 'none'
+                                        : dataPointsColor, onPress: function () {
+                                        item.onPress
+                                            ? item.onPress(item, index)
+                                            : props.onPress
+                                                ? props.onPress(item, index)
+                                                : null;
+                                    } })) }, index)), dataPointLabelComponent ? (!showTextOnFocus || index === selectedIndex ? (_jsx(View, { style: [
+                                    styles.customDataPointContainer,
+                                    {
+                                        zIndex: index === selectedIndex ? 1000 : 0,
+                                        top: containerHeight +
+                                            (item.dataPointLabelShiftY ||
+                                                props.dataPointLabelShiftY ||
+                                                0) -
+                                            (item.value * containerHeight) / maxValue,
+                                        left: initialSpacing +
+                                            (item.dataPointLabelShiftX ||
+                                                props.dataPointLabelShiftX ||
+                                                0) -
+                                            (item.dataPointLabelWidth
+                                                ? item.dataPointLabelWidth + 20
+                                                : props.dataPointLabelWidth
+                                                    ? props.dataPointLabelWidth + 20
+                                                    : 50) /
+                                                2 +
+                                            spacing * index,
+                                    },
+                                ], children: showDataPointLabelOnFocus
+                                    ? index === selectedIndex
+                                        ? dataPointLabelComponent()
+                                        : null
+                                    : dataPointLabelComponent() })) : null) : text || item.dataPointText ? (!showTextOnFocus || index === selectedIndex ? (_jsx(CanvasText, { fill: item.textColor || textColor, fontSize: item.textFontSize || textFontSize, x: getX(index) -
+                                    dataPointsWidth +
+                                    (item.textShiftX || props.textShiftX || 0), y: getYOrSecondaryY(item.value) -
+                                    dataPointsHeight / 2 +
+                                    (item.textShiftY || props.textShiftY || 0), children: !showTextOnFocus && !showValuesAsDataPointsText
+                                    ? item.dataPointText
+                                    : text })) : null) : null] }))] }, index));
+        });
+    };
+    var renderSpecificVerticalLines = function (dataForRender) {
+        return dataForRender.map(function (item, index) {
+            var _a, _b, _c;
+            if (item.showVerticalLine) {
+                var x = getX(index);
+                return (_jsx(Line, { x1: x, y1: extendedContainerHeight, x2: x, y2: ((_a = item.verticalLineUptoDataPoint) !== null && _a !== void 0 ? _a : props.verticalLinesUptoDataPoint)
+                        ? getY(item.value)
+                        : -xAxisThickness, stroke: item.verticalLineColor || props.verticalLinesColor || 'lightgray', strokeWidth: item.verticalLineThickness || props.verticalLinesThickness || 2, strokeDasharray: (_c = (_b = item.verticalLineStrokeDashArray) !== null && _b !== void 0 ? _b : props.verticalLinesStrokeDashArray) !== null && _c !== void 0 ? _c : '' }, index));
+            }
+            return null;
+        });
+    };
+    var renderPointer = function (lineNumber, isDataSet) {
+        if (isDataSet) {
+            var pointerItemLocal_1, pointerYLocal_1, pointerColorLocal_1;
+            return dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set, index) {
+                var _a, _b;
+                var pIndex = barAndLineChartsWrapperProps.pointerIndex;
+                pointerItemLocal_1 = set.data[pIndex];
+                pointerYLocal_1 = pointerYsForDataSet[index];
+                pointerColorLocal_1 =
+                    (_b = (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.pointerColorsForDataSet) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : pointerColor;
+                return (_jsx(Fragment, { children: Pointer({
+                        pointerX: pointerX,
+                        pointerYLocal: pointerYLocal_1 + xAxisThickness,
+                        pointerComponent: pointerComponent,
+                        pointerHeight: pointerHeight,
+                        pointerRadius: pointerRadius,
+                        pointerWidth: pointerWidth,
+                        pointerItemLocal: pointerItemLocal_1,
+                        pointerColorLocal: pointerColorLocal_1,
+                    }) }, 'dSetPts' + index));
+            });
+        }
+        if (lineNumber === 1 && hidePointer1)
+            return;
+        if (lineNumber === 2 && hidePointer2)
+            return;
+        if (lineNumber === 3 && hidePointer3)
+            return;
+        if (lineNumber === 4 && hidePointer4)
+            return;
+        if (lineNumber === 5 && hidePointer5)
+            return;
+        // 6 is for secondaryData
+        if (lineNumber === 6 && hideSecondaryPointer)
+            return;
+        var pointerItemLocal, pointerYLocal, pointerColorLocal;
+        switch (lineNumber) {
+            case 1:
+                pointerItemLocal = pointerItem;
+                pointerYLocal = pointerY;
+                pointerColorLocal = (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.pointer1Color) || pointerColor;
+                break;
+            case 2:
+                pointerItemLocal = pointerItem2;
+                pointerYLocal = pointerY2;
+                pointerColorLocal = (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.pointer2Color) || pointerColor;
+                break;
+            case 3:
+                pointerItemLocal = pointerItem3;
+                pointerYLocal = pointerY3;
+                pointerColorLocal = (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.pointer3Color) || pointerColor;
+                break;
+            case 4:
+                pointerItemLocal = pointerItem4;
+                pointerYLocal = pointerY4;
+                pointerColorLocal = (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.pointer4Color) || pointerColor;
+                break;
+            case 5:
+                pointerItemLocal = pointerItem5;
+                pointerYLocal = pointerY5;
+                pointerColorLocal = (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.pointer5Color) || pointerColor;
+                break;
+            case 6:
+                pointerItemLocal = secondaryPointerItem;
+                pointerYLocal = secondaryPointerY;
+                pointerColorLocal =
+                    (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.secondaryPointerColor) || pointerColor;
+                break;
+        }
+        if (!pointerYLocal)
+            return;
+        return Pointer({
+            pointerX: pointerX,
+            pointerYLocal: pointerYLocal + xAxisThickness,
+            pointerComponent: pointerComponent,
+            pointerHeight: pointerHeight,
+            pointerRadius: pointerRadius,
+            pointerWidth: pointerWidth,
+            pointerItemLocal: pointerItemLocal,
+            pointerColorLocal: pointerColorLocal,
+        });
+    };
+    var renderStripAndLabel = function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var pointerItemLocal, pointerYLocal;
+        pointerItemLocal = [
+            __assign(__assign({}, pointerItem), { value: (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[pointerIndex]) === null || _b === void 0 ? void 0 : _b.value }),
+        ];
+        var arr = [pointerY];
+        if (pointerY2 !== 0) {
+            arr.push(pointerY2);
+            pointerItemLocal.push(__assign(__assign({}, pointerItem), { value: (_d = (_c = props.data2) === null || _c === void 0 ? void 0 : _c[pointerIndex]) === null || _d === void 0 ? void 0 : _d.value }));
+        }
+        if (pointerY3 !== 0) {
+            arr.push(pointerY3);
+            pointerItemLocal.push(__assign(__assign({}, pointerItem), { value: (_f = (_e = props.data3) === null || _e === void 0 ? void 0 : _e[pointerIndex]) === null || _f === void 0 ? void 0 : _f.value }));
+        }
+        if (pointerY4 !== 0) {
+            arr.push(pointerY4);
+            pointerItemLocal.push(__assign(__assign({}, pointerItem), { value: (_h = (_g = props.data4) === null || _g === void 0 ? void 0 : _g[pointerIndex]) === null || _h === void 0 ? void 0 : _h.value }));
+        }
+        if (pointerY5 !== 0) {
+            arr.push(pointerY5);
+            pointerItemLocal.push(__assign(__assign({}, pointerItem), { value: (_k = (_j = props.data5) === null || _j === void 0 ? void 0 : _j[pointerIndex]) === null || _k === void 0 ? void 0 : _k.value }));
+        }
+        if (secondaryPointerY !== 0) {
+            pointerItemLocal.push(__assign(__assign({}, pointerItem), { value: (_m = (_l = props.secondaryData) === null || _l === void 0 ? void 0 : _l[pointerIndex]) === null || _m === void 0 ? void 0 : _m.value }));
+        }
+        pointerYLocal = Math.min.apply(Math, __spreadArray([], __read(arr), false));
+        return StripAndLabel({
+            autoAdjustPointerLabelPosition: autoAdjustPointerLabelPosition,
+            pointerX: pointerX,
+            pointerLabelWidth: pointerLabelWidth,
+            activatePointersOnLongPress: activatePointersOnLongPress,
+            yAxisLabelWidth: yAxisLabelWidth,
+            pointerRadius: pointerRadius,
+            pointerWidth: pointerWidth,
+            shiftPointerLabelX: shiftPointerLabelX,
+            pointerLabelHeight: pointerLabelHeight,
+            pointerYLocal: pointerYLocal,
+            pointerStripUptoDataPoint: pointerStripUptoDataPoint,
+            pointerStripHeight: pointerStripHeight,
+            shiftPointerLabelY: shiftPointerLabelY,
+            pointerItemLocal: pointerItemLocal,
+            showPointerStrip: showPointerStrip,
+            pointerStripWidth: pointerStripWidth,
+            containerHeight: containerHeight,
+            xAxisThickness: xAxisThickness,
+            pointerStripColor: pointerStripColor,
+            pointerConfig: pointerConfig,
+            pointerLabelComponent: pointerLabelComponent,
+            secondaryPointerItem: secondaryPointerItem,
+            scrollX: scrollX,
+            pointerEvents: pointerEvents,
+        });
+    };
+    var getLineGradientComponent = function () {
+        return props.lineGradientComponent ? (props.lineGradientComponent()) : (_jsxs(LinearGradient, { id: "lineGradient", x1: "0", y1: "0", x2: lineGradientDirection === 'horizontal' ? '1' : '0', y2: lineGradientDirection === 'vertical' ? '1' : '0', children: [_jsx(Stop, { offset: "0", stopColor: lineGradientStartColor }), _jsx(Stop, { offset: "1", stopColor: lineGradientEndColor })] }));
+    };
+    var getAreaGradientComponent = function (startFillColor, endFillColor, startOpacity, endOpacity) {
+        return props.areaGradientComponent ? (props.areaGradientComponent()) : (_jsxs(LinearGradient, { id: "Gradient", x1: "0", y1: "0", x2: gradientDirection === 'horizontal' ? '1' : '0', y2: gradientDirection === 'vertical' ? '1' : '0', children: [_jsx(Stop, { offset: "0", stopColor: startFillColor, stopOpacity: startOpacity.toString() }), _jsx(Stop, { offset: "1", stopColor: endFillColor, stopOpacity: endOpacity.toString() })] }));
+    };
+    var lineSvgComponent = function (points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, key) {
+        var _a, _b;
+        if (!points)
+            return null;
+        var isCurved = points.includes('C');
+        var isNthAreaChart = getIsNthAreaChart(key !== null && key !== void 0 ? key : 0);
+        var ar = [{ d: '', color: '', strokeWidth: 0 }];
+        if (points.includes(RANGE_ENTER)) {
+            ar = getRegionPathObjects(points, color, currentLineThickness !== null && currentLineThickness !== void 0 ? currentLineThickness : 0, thickness, strokeDashArray !== null && strokeDashArray !== void 0 ? strokeDashArray : [], isCurved, RANGE_ENTER, STOP, RANGE_EXIT);
+        }
+        else if (points.includes(SEGMENT_START)) {
+            ar = getSegmentedPathObjects(points, color, currentLineThickness !== null && currentLineThickness !== void 0 ? currentLineThickness : 0, thickness, strokeDashArray !== null && strokeDashArray !== void 0 ? strokeDashArray : [], isCurved, SEGMENT_START, SEGMENT_END);
+        }
+        var lineSvgPropsOuter = {
+            d: points,
+            fill: 'none',
+            stroke: lineGradient
+                ? props.lineGradientId
+                    ? "url(#".concat(props.lineGradientId, ")")
+                    : "url(#lineGradient)"
+                : color,
+            strokeWidth: currentLineThickness || thickness,
+        };
+        if (strokeDashArray &&
+            strokeDashArray.length === 2 &&
+            typeof strokeDashArray[0] === 'number' &&
+            typeof strokeDashArray[1] === 'number') {
+            lineSvgPropsOuter.strokeDasharray = strokeDashArray;
+        }
+        return (_jsxs(Svg, { onPress: props.onBackgroundPress, children: [lineGradient && getLineGradientComponent(), points.includes(SEGMENT_START) || points.includes(RANGE_ENTER) ? (ar.map(function (item, index) {
+                    var lineSvgProps = {
+                        d: item.d,
+                        fill: 'none',
+                        stroke: lineGradient
+                            ? props.lineGradientId
+                                ? "url(#".concat(props.lineGradientId, ")")
+                                : "url(#lineGradient)"
+                            : item.color,
+                        strokeWidth: item.strokeWidth,
+                    };
+                    if (item.strokeDashArray &&
+                        item.strokeDashArray.length === 2 &&
+                        typeof item.strokeDashArray[0] === 'number' &&
+                        typeof item.strokeDashArray[1] === 'number') {
+                        lineSvgProps.strokeDasharray = item.strokeDashArray;
+                    }
+                    return _jsx(Path, __assign({}, lineSvgProps), index);
+                })) : (_jsx(Path, __assign({}, lineSvgPropsOuter))), isNthAreaChart &&
+                    getAreaGradientComponent(startFillColor, endFillColor, startOpacity, endOpacity), isNthAreaChart && (_jsx(Path, { onPress: props.onChartAreaPress, d: fillPoints, fill: props.areaGradientId
+                        ? "url(#".concat(props.areaGradientId, ")")
+                        : "url(#Gradient)", stroke: 'transparent', strokeWidth: currentLineThickness || thickness })), renderSpecificVerticalLines(data), renderSpecificVerticalLines(data2), renderSpecificVerticalLines(data3), renderSpecificVerticalLines(data4), renderSpecificVerticalLines(data5), (_a = dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set) { return renderSpecificVerticalLines(set === null || set === void 0 ? void 0 : set.data); })) !== null && _a !== void 0 ? _a : null, (_b = dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set) {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                    return renderDataPoints((_a = set.hideDataPoints) !== null && _a !== void 0 ? _a : hideDataPoints1, set.data, adjustToOffset(set.data, -((_b = props.yAxisOffset) !== null && _b !== void 0 ? _b : 0)), // need the actual values passed by user
+                    (_c = set.dataPointsShape) !== null && _c !== void 0 ? _c : dataPointsShape1, (_d = set.dataPointsWidth) !== null && _d !== void 0 ? _d : dataPointsWidth1, (_e = set.dataPointsHeight) !== null && _e !== void 0 ? _e : dataPointsHeight1, (_f = set.dataPointsColor) !== null && _f !== void 0 ? _f : dataPointsColor1, (_g = set.dataPointsRadius) !== null && _g !== void 0 ? _g : dataPointsRadius1, (_h = set.textColor) !== null && _h !== void 0 ? _h : textColor1, (_j = set.textFontSize) !== null && _j !== void 0 ? _j : textFontSize1, (_k = set.startIndex) !== null && _k !== void 0 ? _k : 0, (_l = set.endIndex) !== null && _l !== void 0 ? _l : set.data.length - 1, set.isSecondary, showValuesAsDataPointsText);
+                })) !== null && _b !== void 0 ? _b : null, renderDataPoints(hideDataPoints1, data, props.data, dataPointsShape1, dataPointsWidth1, dataPointsHeight1, dataPointsColor1, dataPointsRadius1, textColor1, textFontSize1, startIndex1, endIndex1, false, showValuesAsDataPointsText), renderDataPoints(hideDataPoints2, data2, props.data2, dataPointsShape2, dataPointsWidth2, dataPointsHeight2, dataPointsColor2, dataPointsRadius2, textColor2, textFontSize2, startIndex2, endIndex2, false, showValuesAsDataPointsText), renderDataPoints(hideDataPoints3, data3, props.data3, dataPointsShape3, dataPointsWidth3, dataPointsHeight3, dataPointsColor3, dataPointsRadius3, textColor3, textFontSize3, startIndex3, endIndex3, false, showValuesAsDataPointsText), renderDataPoints(hideDataPoints4, data4, props.data4, dataPointsShape4, dataPointsWidth4, dataPointsHeight4, dataPointsColor4, dataPointsRadius4, textColor4, textFontSize4, startIndex4, endIndex4, false, showValuesAsDataPointsText), renderDataPoints(hideDataPoints5, data5, props.data5, dataPointsShape5, dataPointsWidth5, dataPointsHeight5, dataPointsColor5, dataPointsRadius5, textColor5, textFontSize5, startIndex5, endIndex5, false, showValuesAsDataPointsText), (secondaryData === null || secondaryData === void 0 ? void 0 : secondaryData.length)
+                    ? renderDataPoints(secondaryLineConfig.hideDataPoints, secondaryData, props.secondaryData, secondaryLineConfig.dataPointsShape, secondaryLineConfig.dataPointsWidth, secondaryLineConfig.dataPointsHeight, secondaryLineConfig.dataPointsColor, secondaryLineConfig.dataPointsRadius, secondaryLineConfig.textColor, secondaryLineConfig.textFontSize, secondaryLineConfig.startIndex, secondaryLineConfig.endIndex, true, secondaryLineConfig.showValuesAsDataPointsText)
+                    : null, showArrow && (_jsx(Path, { d: arrowPoints, fill: arrowFillColor, stroke: arrowStrokeColor, strokeWidth: arrowStrokeWidth }))] }));
+    };
+    var activatePointers = function (x) {
+        var factor = (x - initialSpacing) / spacing;
+        factor = Math.round(factor);
+        factor = Math.min(factor, (data0 !== null && data0 !== void 0 ? data0 : data).length - 1);
+        factor = Math.max(factor, 0);
+        var z = initialSpacing +
+            spacing * factor -
+            (pointerRadius || pointerWidth / 2) -
+            1;
+        setPointerX(z);
+        setPointerIndex(factor);
+        var item, y;
+        item = (data0 !== null && data0 !== void 0 ? data0 : data)[factor];
+        y =
+            containerHeight -
+                (item.value * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+        setPointerY(y);
+        setPointerItem(item);
+        if (data2 && data2.length) {
+            item = data2[factor];
+            if (item) {
+                y =
+                    containerHeight -
+                        (item.value * containerHeight) / maxValue -
+                        (pointerRadius || pointerHeight / 2) +
+                        10;
+                setPointerY2(y);
+                setPointerItem2(item);
+            }
+        }
+        if (data3 && data3.length) {
+            item = data3[factor];
+            if (item) {
+                y =
+                    containerHeight -
+                        (item.value * containerHeight) / maxValue -
+                        (pointerRadius || pointerHeight / 2) +
+                        10;
+                setPointerY3(y);
+                setPointerItem3(item);
+            }
+        }
+        if (data4 && data4.length) {
+            item = data4[factor];
+            if (item) {
+                y =
+                    containerHeight -
+                        (item.value * containerHeight) / maxValue -
+                        (pointerRadius || pointerHeight / 2) +
+                        10;
+                setPointerY4(y);
+                setPointerItem4(item);
+            }
+        }
+        if (data5 && data5.length) {
+            item = data5[factor];
+            if (item) {
+                y =
+                    containerHeight -
+                        (item.value * containerHeight) / maxValue -
+                        (pointerRadius || pointerHeight / 2) +
+                        10;
+                setPointerY5(y);
+                setPointerItem5(item);
+            }
+        }
+        if (secondaryData === null || secondaryData === void 0 ? void 0 : secondaryData.length) {
+            item = secondaryData[factor];
+            if (item) {
+                y =
+                    containerHeight -
+                        (item.value * containerHeight) / secondaryMaxValue -
+                        (pointerRadius || pointerHeight / 2) +
+                        10;
+                setSecondaryPointerY(y);
+                // @ts-ignore
+                setSecondaryPointerItem(item);
+            }
+        }
+        if (dataSet === null || dataSet === void 0 ? void 0 : dataSet.length) {
+            if (dataSet[0].data[factor]) {
+                var ysForDataSet = dataSet.map(function (set) {
+                    var item = set.data[factor];
+                    var y = item
+                        ? containerHeight -
+                            (item.value * containerHeight) / maxValue -
+                            (pointerRadius || pointerHeight / 2) +
+                            10
+                        : 0;
+                    return y;
+                });
+                setPointerYsForDataSet(ysForDataSet);
+            }
+        }
+    };
+    var renderLine = function (zIndex, points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, key) {
+        var _a, _b;
+        return (_jsx(View, { onMoveShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onResponderGrant: function (evt) {
+                if (!pointerConfig)
+                    return;
+                setResponderStartTime(evt.timeStamp);
+                if (activatePointersOnLongPress) {
+                    return;
+                }
+                var x = evt.nativeEvent.locationX;
+                activatePointers(x);
+            }, onResponderMove: function (evt) {
+                if (!pointerConfig)
+                    return;
+                if (activatePointersOnLongPress &&
+                    evt.timeStamp - responderStartTime < activatePointersDelay) {
+                    return;
+                }
+                else {
+                    setResponderActive(true);
+                }
+                var x = evt.nativeEvent.locationX;
+                if (!activatePointersOnLongPress &&
+                    x > (props.width || Dimensions.get('window').width))
+                    return;
+                var factor = (x - initialSpacing) / spacing;
+                factor = Math.round(factor);
+                factor = Math.min(factor, (data0 !== null && data0 !== void 0 ? data0 : data).length - 1);
+                factor = Math.max(factor, 0);
+                var z = initialSpacing +
+                    spacing * factor -
+                    (pointerRadius || pointerWidth / 2) -
+                    1;
+                var item, y;
+                setPointerX(z);
+                setPointerIndex(factor);
+                item = (data0 !== null && data0 !== void 0 ? data0 : data)[factor];
+                y =
+                    containerHeight -
+                        (item.value * containerHeight) / maxValue -
+                        (pointerRadius || pointerHeight / 2) +
+                        10;
+                setPointerY(y);
+                setPointerItem(item);
+                if (data2 && data2.length) {
+                    item = data2[factor];
+                    if (item) {
+                        y =
+                            containerHeight -
+                                (item.value * containerHeight) / maxValue -
+                                (pointerRadius || pointerHeight / 2) +
+                                10;
+                        setPointerY2(y);
+                        setPointerItem2(item);
+                    }
+                }
+                if (data3 && data3.length) {
+                    item = data3[factor];
+                    if (item) {
+                        y =
+                            containerHeight -
+                                (item.value * containerHeight) / maxValue -
+                                (pointerRadius || pointerHeight / 2) +
+                                10;
+                        setPointerY3(y);
+                        setPointerItem3(item);
+                    }
+                }
+                if (data4 && data4.length) {
+                    item = data4[factor];
+                    if (item) {
+                        y =
+                            containerHeight -
+                                (item.value * containerHeight) / maxValue -
+                                (pointerRadius || pointerHeight / 2) +
+                                10;
+                        setPointerY4(y);
+                        setPointerItem4(item);
+                    }
+                }
+                if (data5 && data5.length) {
+                    item = data5[factor];
+                    if (item) {
+                        y =
+                            containerHeight -
+                                (item.value * containerHeight) / maxValue -
+                                (pointerRadius || pointerHeight / 2) +
+                                10;
+                        setPointerY5(y);
+                        setPointerItem5(item);
+                    }
+                }
+                if (secondaryData === null || secondaryData === void 0 ? void 0 : secondaryData.length) {
+                    item = secondaryData[factor];
+                    if (item) {
+                        y =
+                            containerHeight -
+                                (item.value * containerHeight) / secondaryMaxValue -
+                                (pointerRadius || pointerHeight / 2) +
+                                10;
+                        setSecondaryPointerY(y);
+                        // @ts-ignore
+                        setSecondaryPointerItem(item);
+                    }
+                }
+                if (dataSet === null || dataSet === void 0 ? void 0 : dataSet.length) {
+                    var ysForDataSet = dataSet.map(function (set) {
+                        var item = set.data[factor];
+                        var y = item
+                            ? containerHeight -
+                                (item.value * containerHeight) / maxValue -
+                                (pointerRadius || pointerHeight / 2) +
+                                10
+                            : 0;
+                        return y;
+                    });
+                    setPointerYsForDataSet(ysForDataSet);
+                }
+            }, 
+            // onResponderReject={evt => {
+            //   console.log('evt...reject.......',evt);
+            // }}
+            onResponderEnd: function (evt) {
+                // console.log('evt...end.......',evt);
+                setResponderStartTime(0);
+                setPointerIndex(-1);
+                setResponderActive(false);
+                if (!persistPointer)
+                    setTimeout(function () { return setPointerX(0); }, pointerVanishDelay);
+            }, onResponderTerminationRequest: function (evt) { return false; }, 
+            // onResponderTerminate={evt => {
+            //   console.log('evt...terminate.......',evt);
+            // }}
+            // onResponderRelease={evt => {
+            //   setResponderStartTime(0);
+            //   setResponderActive(false);
+            //   setTimeout(() => setPointerX(0), pointerVanishDelay);
+            // }}
+            style: {
+                position: 'absolute',
+                height: containerHeightIncludingBelowXAxis +
+                    ((_a = props.overflowBottom) !== null && _a !== void 0 ? _a : dataPointsRadius1),
+                bottom: 60 +
+                    xAxisLabelsVerticalShift +
+                    labelsExtraHeight -
+                    xAxisThickness -
+                    ((_b = props.overflowBottom) !== null && _b !== void 0 ? _b : dataPointsRadius1),
+                zIndex: zIndex,
+                transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+                width: totalWidth,
+            }, children: lineSvgComponent(points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, key) }, key !== null && key !== void 0 ? key : 0));
+    };
+    var renderAnimatedLine = function (zIndex, points, animatedWidth, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, key) {
+        var _a, _b;
+        return (_jsx(Animated.View, { onStartShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onMoveShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onResponderGrant: function (evt) {
+                if (!pointerConfig)
+                    return;
+                setResponderStartTime(evt.timeStamp);
+                if (activatePointersOnLongPress) {
+                    return;
+                }
+                var x = evt.nativeEvent.locationX;
+                activatePointers(x);
+            }, onResponderMove: function (evt) {
+                if (!pointerConfig)
+                    return;
+                if (activatePointersOnLongPress &&
+                    evt.timeStamp - responderStartTime < activatePointersDelay) {
+                    return;
+                }
+                else {
+                    setResponderActive(true);
+                }
+                var x = evt.nativeEvent.locationX;
+                if (!activatePointersOnLongPress &&
+                    x > (props.width || Dimensions.get('window').width))
+                    return;
+                var factor = (x - initialSpacing) / spacing;
+                factor = Math.round(factor);
+                factor = Math.min(factor, (data0 !== null && data0 !== void 0 ? data0 : data).length - 1);
+                factor = Math.max(factor, 0);
+                var z = initialSpacing +
+                    spacing * factor -
+                    (pointerRadius || pointerWidth / 2) -
+                    1;
+                var item, y;
+                setPointerX(z);
+                setPointerIndex(factor);
+                item = (data0 !== null && data0 !== void 0 ? data0 : data)[factor];
+                y =
+                    containerHeight -
+                        (item.value * containerHeight) / maxValue -
+                        (pointerRadius || pointerHeight / 2) +
+                        10;
+                setPointerY(y);
+                setPointerItem(item);
+                if (data2 && data2.length) {
+                    item = data2[factor];
+                    if (item) {
+                        y =
+                            containerHeight -
+                                (item.value * containerHeight) / maxValue -
+                                (pointerRadius || pointerHeight / 2) +
+                                10;
+                        setPointerY2(y);
+                        setPointerItem2(item);
+                    }
+                }
+                if (data3 && data3.length) {
+                    item = data3[factor];
+                    if (item) {
+                        y =
+                            containerHeight -
+                                (item.value * containerHeight) / maxValue -
+                                (pointerRadius || pointerHeight / 2) +
+                                10;
+                        setPointerY3(y);
+                        setPointerItem3(item);
+                    }
+                }
+                if (data4 && data4.length) {
+                    item = data4[factor];
+                    if (item) {
+                        y =
+                            containerHeight -
+                                (item.value * containerHeight) / maxValue -
+                                (pointerRadius || pointerHeight / 2) +
+                                10;
+                        setPointerY4(y);
+                        setPointerItem4(item);
+                    }
+                }
+                if (data5 && data5.length) {
+                    item = data5[factor];
+                    if (item) {
+                        y =
+                            containerHeight -
+                                (item.value * containerHeight) / maxValue -
+                                (pointerRadius || pointerHeight / 2) +
+                                10;
+                        setPointerY5(y);
+                        setPointerItem5(item);
+                    }
+                }
+                if (secondaryData === null || secondaryData === void 0 ? void 0 : secondaryData.length) {
+                    item = secondaryData[factor];
+                    if (item) {
+                        y =
+                            containerHeight -
+                                (item.value * containerHeight) / secondaryMaxValue -
+                                (pointerRadius || pointerHeight / 2) +
+                                10;
+                        setSecondaryPointerY(y);
+                        // @ts-ignore
+                        setSecondaryPointerItem(item);
+                    }
+                }
+                if (dataSet === null || dataSet === void 0 ? void 0 : dataSet.length) {
+                    if (dataSet[0].data[factor]) {
+                        var ysForDataSet = dataSet.map(function (set) {
+                            var item = set.data[factor];
+                            var y = item
+                                ? containerHeight -
+                                    (item.value * containerHeight) / maxValue -
+                                    (pointerRadius || pointerHeight / 2) +
+                                    10
+                                : 0;
+                            return y;
+                        });
+                        setPointerYsForDataSet(ysForDataSet);
+                    }
+                }
+            }, 
+            // onResponderReject={evt => {
+            //   console.log('evt...reject.......',evt);
+            // }}
+            onResponderEnd: function (evt) {
+                // console.log('evt...end.......',evt);
+                setResponderStartTime(0);
+                setPointerIndex(-1);
+                setResponderActive(false);
+                if (!persistPointer)
+                    setTimeout(function () { return setPointerX(0); }, pointerVanishDelay);
+            }, onResponderTerminationRequest: function (evt) { return false; }, 
+            // onResponderTerminate={evt => {
+            //   console.log('evt...terminate.......',evt);
+            // }}
+            // onResponderRelease={evt => {
+            //   setResponderStartTime(0);
+            //   setResponderActive(false);
+            //   setTimeout(() => setPointerX(0), pointerVanishDelay);
+            // }}
+            style: {
+                position: 'absolute',
+                height: containerHeightIncludingBelowXAxis +
+                    ((_a = props.overflowBottom) !== null && _a !== void 0 ? _a : dataPointsRadius1),
+                bottom: 60 +
+                    xAxisLabelsVerticalShift +
+                    labelsExtraHeight -
+                    xAxisThickness -
+                    ((_b = props.overflowBottom) !== null && _b !== void 0 ? _b : dataPointsRadius1),
+                zIndex: zIndex,
+                transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+                width: animatedWidth,
+            }, children: lineSvgComponent(points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, key) }, key !== null && key !== void 0 ? key : 0));
+    };
+    var remainingScrollViewProps = {
+        onScroll: function (ev) {
+            var _a;
+            (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, ev);
+            if (pointerConfig &&
+                pointerConfig.activatePointersOnLongPress &&
+                pointerConfig.autoAdjustPointerLabelPosition) {
+                setScrollX(ev.nativeEvent.contentOffset.x);
+            }
+        },
+    };
+    var renderChartContent = function () {
+        var _a, _b, _c, _d, _e, _f;
+        return (_jsxs(_Fragment, { children: [dataSet
+                    ? pointsFromSet.length
+                        ? dataSet.map(function (set, index) {
+                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+                            if (isAnimated) {
+                                return renderAnimatedLine((_a = set.zIndex) !== null && _a !== void 0 ? _a : zIndex1, pointsFromSet[index], animatedWidth, (_b = set.thickness) !== null && _b !== void 0 ? _b : thickness1, (_c = set.color) !== null && _c !== void 0 ? _c : color1, fillPointsFromSet[index], (_d = set.startFillColor) !== null && _d !== void 0 ? _d : startFillColor1, (_e = set.endFillColor) !== null && _e !== void 0 ? _e : endFillColor1, (_f = set.startOpacity) !== null && _f !== void 0 ? _f : startOpacity1, (_g = set.endOpacity) !== null && _g !== void 0 ? _g : endOpacity1, (_h = set.strokeDashArray) !== null && _h !== void 0 ? _h : strokeDashArray1, set.showArrow || props.showArrows, arrowPointsFromSet[index], arrowStrokeWidthsFromSet === null || arrowStrokeWidthsFromSet === void 0 ? void 0 : arrowStrokeWidthsFromSet[index], arrowStrokeColorsFromSet === null || arrowStrokeColorsFromSet === void 0 ? void 0 : arrowStrokeColorsFromSet[index], arrowFillColorsFromSet === null || arrowFillColorsFromSet === void 0 ? void 0 : arrowFillColorsFromSet[index], index);
+                            }
+                            else {
+                                return renderLine((_j = set.zIndex) !== null && _j !== void 0 ? _j : zIndex1, pointsFromSet[index], (_k = set.thickness) !== null && _k !== void 0 ? _k : thickness1, (_l = set.color) !== null && _l !== void 0 ? _l : color1, fillPointsFromSet[index], (_m = set.startFillColor) !== null && _m !== void 0 ? _m : startFillColor1, (_o = set.endFillColor) !== null && _o !== void 0 ? _o : endFillColor1, (_p = set.startOpacity) !== null && _p !== void 0 ? _p : startOpacity1, (_q = set.endOpacity) !== null && _q !== void 0 ? _q : endOpacity1, (_r = set.strokeDashArray) !== null && _r !== void 0 ? _r : strokeDashArray1, set.showArrow || props.showArrows, arrowPointsFromSet[index], arrowStrokeWidthsFromSet === null || arrowStrokeWidthsFromSet === void 0 ? void 0 : arrowStrokeWidthsFromSet[index], arrowStrokeColorsFromSet === null || arrowStrokeColorsFromSet === void 0 ? void 0 : arrowStrokeColorsFromSet[index], arrowFillColorsFromSet === null || arrowFillColorsFromSet === void 0 ? void 0 : arrowFillColorsFromSet[index], index);
+                            }
+                        })
+                        : null
+                    : isAnimated
+                        ? renderAnimatedLine(zIndex1, points, animatedWidth, thickness1, color1, fillPoints, startFillColor1, endFillColor1, startOpacity1, endOpacity1, strokeDashArray1, props.showArrow1 || props.showArrows, arrow1Points, arrowStrokeWidth1, arrowStrokeColor1, arrowFillColor1, 0)
+                        : renderLine(zIndex1, points, thickness1, color1, fillPoints, startFillColor1, endFillColor1, startOpacity1, endOpacity1, strokeDashArray1, props.showArrow1 || props.showArrows, arrow1Points, arrowStrokeWidth1, arrowStrokeColor1, arrowFillColor1, 0), secondaryPoints
+                    ? isAnimated
+                        ? renderAnimatedLine(secondaryLineConfig.zIndex, secondaryPoints, animatedWidth, secondaryLineConfig.thickness, secondaryLineConfig.color, secondaryFillPoints, secondaryLineConfig.startFillColor, secondaryLineConfig.endFillColor, secondaryLineConfig.startOpacity, secondaryLineConfig.endOpacity, secondaryLineConfig.strokeDashArray, secondaryLineConfig.showArrow, secondaryArrowPoints, (_a = secondaryLineConfig.arrowConfig) === null || _a === void 0 ? void 0 : _a.strokeWidth, (_b = secondaryLineConfig.arrowConfig) === null || _b === void 0 ? void 0 : _b.strokeColor, (_c = secondaryLineConfig.arrowConfig) === null || _c === void 0 ? void 0 : _c.fillColor, 6)
+                        : renderLine(secondaryLineConfig.zIndex, secondaryPoints, secondaryLineConfig.thickness, secondaryLineConfig.color, secondaryFillPoints, secondaryLineConfig.startFillColor, secondaryLineConfig.endFillColor, secondaryLineConfig.startOpacity, secondaryLineConfig.endOpacity, secondaryLineConfig.strokeDashArray, secondaryLineConfig.showArrow, secondaryArrowPoints, (_d = secondaryLineConfig.arrowConfig) === null || _d === void 0 ? void 0 : _d.strokeWidth, (_e = secondaryLineConfig.arrowConfig) === null || _e === void 0 ? void 0 : _e.strokeColor, (_f = secondaryLineConfig.arrowConfig) === null || _f === void 0 ? void 0 : _f.fillColor, 6)
+                    : null, points2
+                    ? isAnimated
+                        ? renderAnimatedLine(zIndex2, points2, animatedWidth2, thickness2, color2, fillPoints2, startFillColor2, endFillColor2, startOpacity2, endOpacity2, strokeDashArray2, props.showArrow2 || props.showArrows, arrow2Points, arrowStrokeWidth2, arrowStrokeColor2, arrowFillColor2, 1)
+                        : renderLine(zIndex2, points2, thickness2, color2, fillPoints2, startFillColor2, endFillColor2, startOpacity2, endOpacity2, strokeDashArray2, props.showArrow2 || props.showArrows, arrow2Points, arrowStrokeWidth2, arrowStrokeColor2, arrowFillColor2, 1)
+                    : null, points3
+                    ? isAnimated
+                        ? renderAnimatedLine(zIndex3, points3, animatedWidth3, thickness3, color3, fillPoints3, startFillColor3, endFillColor3, startOpacity3, endOpacity3, strokeDashArray3, props.showArrow3 || props.showArrows, arrow3Points, arrowStrokeWidth3, arrowStrokeColor3, arrowFillColor3, 2)
+                        : renderLine(zIndex3, points3, thickness3, color3, fillPoints3, startFillColor3, endFillColor3, startOpacity3, endOpacity3, strokeDashArray3, props.showArrow3 || props.showArrows, arrow3Points, arrowStrokeWidth3, arrowStrokeColor3, arrowFillColor3, 2)
+                    : null, points4
+                    ? isAnimated
+                        ? renderAnimatedLine(zIndex4, points4, animatedWidth4, thickness4, color4, fillPoints4, startFillColor4, endFillColor4, startOpacity4, endOpacity4, strokeDashArray4, props.showArrow4 || props.showArrows, arrow4Points, arrowStrokeWidth4, arrowStrokeColor4, arrowFillColor4, 3)
+                        : renderLine(zIndex4, points4, thickness4, color4, fillPoints4, startFillColor4, endFillColor4, startOpacity4, endOpacity4, strokeDashArray4, props.showArrow4 || props.showArrows, arrow4Points, arrowStrokeWidth4, arrowStrokeColor4, arrowFillColor4, 3)
+                    : null, points5
+                    ? isAnimated
+                        ? renderAnimatedLine(zIndex5, points5, animatedWidth5, thickness5, color5, fillPoints5, startFillColor5, endFillColor5, startOpacity5, endOpacity5, strokeDashArray5, props.showArrow5 || props.showArrows, arrow5Points, arrowStrokeWidth5, arrowStrokeColor5, arrowFillColor5, 4)
+                        : renderLine(zIndex5, points5, thickness5, color5, fillPoints5, startFillColor5, endFillColor5, startOpacity5, endOpacity5, strokeDashArray5, props.showArrow5 || props.showArrows, arrow5Points, arrowStrokeWidth5, arrowStrokeColor5, arrowFillColor5, 4)
+                    : null, pointerX > 0 ? (_jsxs(View, { pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : 'none', style: {
+                        position: 'absolute',
+                        height: extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
+                        bottom: 58 + labelsExtraHeight + xAxisLabelsVerticalShift - overflowTop,
+                        // width: totalWidth,
+                        zIndex: 20,
+                    }, children: [!stripOverPointer && renderStripAndLabel(), dataSet ? (renderPointer(0, true)) : (
+                        // dataSet.map((set, index) => renderPointer(index))
+                        _jsxs(_Fragment, { children: [renderPointer(1), points2 ? renderPointer(2) : null, points3 ? renderPointer(3) : null, points4 ? renderPointer(4) : null, points5 ? renderPointer(5) : null, secondaryPoints ? renderPointer(6) : null, stripOverPointer && renderStripAndLabel()] }))] })) : null, (data0 !== null && data0 !== void 0 ? data0 : data).map(function (item, index) {
+                    var _a, _b, _c, _d, _e, _f;
+                    var secondaryLabel = (_c = (_a = item.secondaryLabel) !== null && _a !== void 0 ? _a : (_b = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelTexts) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : '';
+                    var secondaryLabelTextStyle = (_f = (_e = (_d = item.secondaryLabelTextStyle) !== null && _d !== void 0 ? _d : secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsTextStyle) !== null && _e !== void 0 ? _e : item.labelTextStyle) !== null && _f !== void 0 ? _f : props.xAxisLabelTextStyle;
+                    return (_jsxs(View, { children: [isAnimated
+                                ? renderAnimatedLabel(false, index, item.label ||
+                                    (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                                        ? props.xAxisLabelTexts[index]
+                                        : ''), item.labelTextStyle || props.xAxisLabelTextStyle, item.labelComponent)
+                                : renderLabel(false, index, item.label ||
+                                    (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                                        ? props.xAxisLabelTexts[index]
+                                        : ''), item.labelTextStyle || props.xAxisLabelTextStyle, item.labelComponent), secondaryXAxis
+                                ? isAnimated
+                                    ? renderAnimatedLabel(true, index, secondaryLabel, secondaryLabelTextStyle, item.secondaryLabelComponent)
+                                    : renderLabel(true, index, secondaryLabel, secondaryLabelTextStyle, item.secondaryLabelComponent)
+                                : null] }, index));
+                })] }));
+    };
+    return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { scrollRef: scrollRef, animatedWidth: animatedWidth, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps })));
+};