react-native-gifted-charts 1.4.22 → 1.4.24

package/dist/BarChart/Animated2DWithGradient.js

@@ -28,7 +28,7 @@ var Animated2DWithGradient = function (props) {
     var _a;
     var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, barWidth = props.barWidth, barStyle = props.barStyle, item = props.item, index = props.index, opacity = props.opacity, animationDuration = props.animationDuration, noGradient = props.noGradient, noAnimation = props.noAnimation, barMarginBottom = props.barMarginBottom, barInnerComponent = props.barInnerComponent, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle, commonStyleForBar = props.commonStyleForBar, barStyleWithBackground = props.barStyleWithBackground, yAxisOffset = props.yAxisOffset;
     var _b = __read(useState(noAnimation ? props.height : 0.2), 2), height = _b[0], setHeight = _b[1];
-    var _c = __read(useState(noAnimation ? false : true), 2), initialRender = _c[0], setInitialRender = _c[1];
+    var _c = __read(useState(!noAnimation), 2), initialRender = _c[0], setInitialRender = _c[1];
     useEffect(function () {
         if (!noAnimation) {
             if (initialRender) {

package/dist/BarChart/RenderBars.js

@@ -25,10 +25,10 @@ var RenderBars = function (props) {
         ? negativeStepHeight / negativeStepValue
         : stepHeight / stepValue;
     var barHeight = Math.max(minHeight, Math.abs(item.value) * heightFactor - xAxisThickness);
-    var _h = getPropsForAnimated2DWithGradient(__assign(__assign({}, props), { barHeight: barHeight })), commonStyleForBar = _h.commonStyleForBar, barStyleWithBackground = _h.barStyleWithBackground, commonPropsFor2Dand3Dbars = _h.commonPropsFor2Dand3Dbars, isFocused = _h.isFocused, focusedBarConfig = _h.focusedBarConfig, localFrontColor = _h.localFrontColor;
+    var _h = getPropsForAnimated2DWithGradient(__assign(__assign({}, props), { barHeight: barHeight })), commonStyleForBar = _h.commonStyleForBar, barStyleWithBackground = _h.barStyleWithBackground, commonPropsFor2dAnd3dBars = _h.commonPropsFor2dAnd3dBars, isFocused = _h.isFocused, focusedBarConfig = _h.focusedBarConfig, localFrontColor = _h.localFrontColor;
     var itemOrPropsBarInnerComponent = (_a = item.barInnerComponent) !== null && _a !== void 0 ? _a : props.barInnerComponent;
     var localBarInnerComponent = isFocused
-        ? (_b = focusedBarConfig === null || focusedBarConfig === void 0 ? void 0 : focusedBarConfig.barInnerComponent) !== null && _b !== void 0 ? _b : itemOrPropsBarInnerComponent
+        ? ((_b = focusedBarConfig === null || focusedBarConfig === void 0 ? void 0 : focusedBarConfig.barInnerComponent) !== null && _b !== void 0 ? _b : itemOrPropsBarInnerComponent)
         : itemOrPropsBarInnerComponent;
     var barMarginBottom = item.barMarginBottom === 0
         ? 0
@@ -149,7 +149,7 @@ var RenderBars = function (props) {
         var localGradientColor = item.gradientColor || props.gradientColor || 'white';
         return (_jsxs(_Fragment, { children: [_jsx(LinearGradient, { style: commonStyleForBar, start: { x: 0, y: 0 }, end: { x: 0, y: 1 }, colors: [
                         isFocused
-                            ? (_a = focusedBarConfig === null || focusedBarConfig === void 0 ? void 0 : focusedBarConfig.gradientColor) !== null && _a !== void 0 ? _a : localGradientColor
+                            ? ((_a = focusedBarConfig === null || focusedBarConfig === void 0 ? void 0 : focusedBarConfig.gradientColor) !== null && _a !== void 0 ? _a : localGradientColor)
                             : localGradientColor,
                         localFrontColor,
                     ], children: props.cappedBars && item.value ? (_jsx(Cap, { capThicknessFromItem: item.capThickness, capThicknessFromProps: props.capThickness, capColorFromItem: item.capColor, capColorFromProps: props.capColor, capRadiusFromItem: item.capRadius, capRadiusFromProps: props.capRadius })) : null }), (item.barBackgroundPattern || props.barBackgroundPattern) && (_jsx(BarBackgroundPattern, { barBackgroundPatternFromItem: item.barBackgroundPattern, barBackgroundPatternFromProps: props.barBackgroundPattern, patternIdFromItem: item.patternId, patternIdFromProps: props.patternId })), (item.topLabelComponent || showValuesAsTopLabel) && (_jsx(View, { style: [
@@ -173,7 +173,7 @@ var RenderBars = function (props) {
         {
             // overflow: 'visible',
             marginBottom: 60 + barMarginBottom + xAxisLabelsVerticalShift - 0.5,
-            width: commonPropsFor2Dand3Dbars.barWidth,
+            width: commonPropsFor2dAnd3dBars.barWidth,
             height: barHeight,
             marginRight: spacing,
         },
@@ -204,7 +204,7 @@ var RenderBars = function (props) {
         (pointerConfig && pointerConfig.barTouchable !== true);
     var barContent = function () {
         var isBarBelowXaxisAndInvisible = item.value < 0 && !noOfSectionsBelowXAxis;
-        var animated2DWithGradient = function (noGradient, noAnimation) { return (_jsx(Animated2DWithGradient, __assign({}, commonPropsFor2Dand3Dbars, { animationDuration: animationDuration || 800, roundedBottom: props.roundedBottom || false, roundedTop: props.roundedTop || false, noGradient: noGradient, noAnimation: noAnimation, containerHeight: containerHeight, maxValue: maxValue, minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : 0, barMarginBottom: barMarginBottom, cappedBars: props.cappedBars, capThickness: props.capThickness, capColor: props.capColor, capRadius: props.capRadius, horizontal: horizontal, barBorderWidth: barBorderWidth, barBorderColor: barBorderColor, commonStyleForBar: commonStyleForBar, barStyleWithBackground: barStyleWithBackground }))); };
+        var animated2DWithGradient = function (noGradient, noAnimation) { return (_jsx(Animated2DWithGradient, __assign({}, commonPropsFor2dAnd3dBars, { animationDuration: animationDuration || 800, roundedBottom: props.roundedBottom || false, roundedTop: props.roundedTop || false, noGradient: noGradient, noAnimation: noAnimation, containerHeight: containerHeight, maxValue: maxValue, minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : 0, barMarginBottom: barMarginBottom, cappedBars: props.cappedBars, capThickness: props.capThickness, capColor: props.capColor, capRadius: props.capRadius, horizontal: horizontal, barBorderWidth: barBorderWidth, barBorderColor: barBorderColor, commonStyleForBar: commonStyleForBar, barStyleWithBackground: barStyleWithBackground }))); };
         return (_jsxs(_Fragment, { children: [(props.showXAxisIndices || item.showXAxisIndex) && (_jsx(View, { style: {
                         zIndex: 2,
                         position: 'absolute',
@@ -213,7 +213,7 @@ var RenderBars = function (props) {
                         bottom: props.xAxisIndicesHeight / -2,
                         left: ((item.barWidth || barWidth) - props.xAxisIndicesWidth) / 2,
                         backgroundColor: props.xAxisIndicesColor,
-                    } })), isBarBelowXaxisAndInvisible ? null : isThreeD ? (_jsx(AnimatedThreeDBar, __assign({}, commonPropsFor2Dand3Dbars, { sideWidth: item.sideWidth ||
+                    } })), isBarBelowXaxisAndInvisible ? null : isThreeD ? (_jsx(AnimatedThreeDBar, __assign({}, commonPropsFor2dAnd3dBars, { sideWidth: item.sideWidth ||
                         props.sideWidth ||
                         (item.barWidth || barWidth) / 2, side: side || 'left', sideColor: item.sideColor || props.sideColor || '', topColor: item.topColor || props.topColor || '', horizontal: horizontal, isAnimated: isAnimated, animationDuration: animationDuration || 800, selectedIndex: selectedIndex }))) : item.showGradient || props.showGradient ? (isAnimated ? (animated2DWithGradient(false, false)) : (static2DWithGradient(item))) : isAnimated ? (animated2DWithGradient(true, false)) : (animated2DWithGradient(true, true)), isAnimated
                     ? renderAnimatedLabel(false, label, labelTextStyle, item.value)

package/dist/BarChart/RenderStackBars.js

@@ -23,11 +23,16 @@ if (Platform.OS === 'android') {
 var RenderStackBars = function (props) {
     var _a;
     var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, item = props.item, index = props.index, containerHeight = props.containerHeight, spacing = props.spacing, rotateLabel = props.rotateLabel, label = props.label, labelTextStyle = props.labelTextStyle, xAxisTextNumberOfLines = props.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, renderTooltip = props.renderTooltip, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, activeOpacity = props.activeOpacity, _b = props.animationDuration, animationDuration = _b === void 0 ? BarDefaults.animationDuration : _b, barBorderWidth = props.barBorderWidth, barBorderColor = props.barBorderColor, stackBorderRadius = props.stackBorderRadius, stackBorderTopLeftRadius = props.stackBorderTopLeftRadius, stackBorderTopRightRadius = props.stackBorderTopRightRadius, stackBorderBottomLeftRadius = props.stackBorderBottomLeftRadius, stackBorderBottomRightRadius = props.stackBorderBottomRightRadius, showValuesAsTopLabel = props.showValuesAsTopLabel, _c = props.autoShiftLabelsForNegativeStacks, autoShiftLabelsForNegativeStacks = _c === void 0 ? true : _c, _d = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _d === void 0 ? 0 : _d, horizontal = props.horizontal;
-    var _e = useRenderStackBars(props), cotainsNegative = _e.cotainsNegative, noAnimation = _e.noAnimation, localBarInnerComponent = _e.localBarInnerComponent, borderRadius = _e.borderRadius, borderTopLeftRadius = _e.borderTopLeftRadius, borderTopRightRadius = _e.borderTopRightRadius, borderBottomLeftRadius = _e.borderBottomLeftRadius, borderBottomRightRadius = _e.borderBottomRightRadius, disablePress = _e.disablePress, totalHeight = _e.totalHeight, height = _e.height, setHeight = _e.setHeight, getBarHeight = _e.getBarHeight, getPosition = _e.getPosition, lowestBarPosition = _e.lowestBarPosition, getStackBorderRadii = _e.getStackBorderRadii, tooltipProps = _e.tooltipProps;
+    var _e = useRenderStackBars(props), containsNegativeValue = _e.containsNegativeValue, noAnimation = _e.noAnimation, localBarInnerComponent = _e.localBarInnerComponent, borderRadius = _e.borderRadius, borderTopLeftRadius = _e.borderTopLeftRadius, borderTopRightRadius = _e.borderTopRightRadius, borderBottomLeftRadius = _e.borderBottomLeftRadius, borderBottomRightRadius = _e.borderBottomRightRadius, disablePress = _e.disablePress, totalHeight = _e.totalHeight, height = _e.height, setHeight = _e.setHeight, getBarHeight = _e.getBarHeight, getPosition = _e.getPosition, lowestBarPosition = _e.lowestBarPosition, getStackBorderRadii = _e.getStackBorderRadii, tooltipProps = _e.tooltipProps;
     var renderLabel = function (label, labelTextStyle) {
         return (_jsx(View, { style: [
                 {
-                    width: (item.stacks[0].barWidth || props.barWidth || 30) + spacing / 2,
+                    width: (item.labelWidth ||
+                        props.labelWidth ||
+                        item.stacks[0].barWidth ||
+                        props.barWidth ||
+                        30) +
+                        spacing / 2,
                     position: 'absolute',
                     bottom: autoShiftLabelsForNegativeStacks
                         ? -6 - xAxisTextNumberOfLines * 18 + lowestBarPosition
@@ -114,7 +119,7 @@ var RenderStackBars = function (props) {
                                         : barBackgroundPattern === null || barBackgroundPattern === void 0 ? void 0 : barBackgroundPattern() }), _jsx(Rect, { stroke: "transparent", x: "1", y: "1", width: "100%", height: "100%", fill: "url(#".concat(item.patternId || patternId, ")") })] }))] }), localBarInnerComponent ? (_jsx(View, { style: { height: '100%', width: '100%' }, children: localBarInnerComponent(item, index) })) : null, (item.topLabelComponent || showValuesAsTopLabel) && (_jsx(View, { style: [
                         {
                             position: 'absolute',
-                            top: cotainsNegative
+                            top: containsNegativeValue
                                 ? 0
                                 : (item.barWidth || props.barWidth || 30) * -1,
                             height: item.barWidth || props.barWidth || 30,
@@ -122,7 +127,9 @@ var RenderStackBars = function (props) {
                             justifyContent: 'center',
                             alignItems: 'center',
                         },
-                        cotainsNegative && { transform: [{ translateY: totalHeight * 2 }] },
+                        containsNegativeValue && {
+                            transform: [{ translateY: totalHeight * 2 }],
+                        },
                         horizontal &&
                             !props.intactTopLabel && { transform: [{ rotate: '270deg' }] },
                         item.topLabelContainerStyle,
@@ -138,7 +145,7 @@ var RenderStackBars = function (props) {
             }, children: static2DSimple() }));
     };
     return (_jsxs(_Fragment, { children: [_jsxs(View, { pointerEvents: props.pointerConfig
-                    ? (_a = props.pointerConfig.pointerEvents) !== null && _a !== void 0 ? _a : 'none'
+                    ? ((_a = props.pointerConfig.pointerEvents) !== null && _a !== void 0 ? _a : 'none')
                     : 'auto', style: [
                     {
                         // overflow: 'visible',

package/dist/BarChart/index.js

@@ -22,7 +22,7 @@ import { screenWidth } from '../utils';
 export var BarChart = function (props) {
     var _a, _b;
     var heightValue = useMemo(function () { return new Animated.Value(0); }, []);
-    var opacValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
     var widthValue = useMemo(function () { return new Animated.Value(0); }, []);
     var scrollRef = (_a = props.scrollRef) !== null && _a !== void 0 ? _a : useRef(null);
     var remainingScrollViewProps = {
@@ -33,16 +33,16 @@ export var BarChart = function (props) {
             }
         },
     };
-    var _c = useBarChart(__assign(__assign({}, props), { heightValue: heightValue, widthValue: widthValue, opacValue: opacValue, parentWidth: (_b = props.parentWidth) !== null && _b !== void 0 ? _b : screenWidth })), lineConfig = _c.lineConfig, hidePointer1 = _c.hidePointer1, pointerItem = _c.pointerItem, pointerY = _c.pointerY, pointerConfig = _c.pointerConfig, pointerColor = _c.pointerColor, pointerX = _c.pointerX, pointerComponent = _c.pointerComponent, pointerHeight = _c.pointerHeight, pointerRadius = _c.pointerRadius, pointerWidth = _c.pointerWidth, autoAdjustPointerLabelPosition = _c.autoAdjustPointerLabelPosition, pointerLabelWidth = _c.pointerLabelWidth, activatePointersOnLongPress = _c.activatePointersOnLongPress, yAxisLabelWidth = _c.yAxisLabelWidth, shiftPointerLabelX = _c.shiftPointerLabelX, pointerLabelHeight = _c.pointerLabelHeight, pointerStripUptoDataPoint = _c.pointerStripUptoDataPoint, pointerStripHeight = _c.pointerStripHeight, shiftPointerLabelY = _c.shiftPointerLabelY, showPointerStrip = _c.showPointerStrip, pointerStripWidth = _c.pointerStripWidth, containerHeight = _c.containerHeight, xAxisThickness = _c.xAxisThickness, pointerStripColor = _c.pointerStripColor, pointerEvents = _c.pointerEvents, setResponderStartTime = _c.setResponderStartTime, setPointerY = _c.setPointerY, setPointerItem = _c.setPointerItem, initialSpacing = _c.initialSpacing, spacing = _c.spacing, data = _c.data, barWidth = _c.barWidth, setPointerX = _c.setPointerX, setPointerIndex = _c.setPointerIndex, maxValue = _c.maxValue, responderStartTime = _c.responderStartTime, setResponderActive = _c.setResponderActive, activatePointersDelay = _c.activatePointersDelay, persistPointer = _c.persistPointer, pointerVanishDelay = _c.pointerVanishDelay, containerHeightIncludingBelowXAxis = _c.containerHeightIncludingBelowXAxis, extendedContainerHeight = _c.extendedContainerHeight, totalWidth = _c.totalWidth, stripBehindBars = _c.stripBehindBars, noOfSectionsBelowXAxis = _c.noOfSectionsBelowXAxis, stepHeight = _c.stepHeight, xAxisLabelsVerticalShift = _c.xAxisLabelsVerticalShift, labelsExtraHeight = _c.labelsExtraHeight, stripOverPointer = _c.stripOverPointer, pointerLabelComponent = _c.pointerLabelComponent, setSelectedIndex = _c.setSelectedIndex, isAnimated = _c.isAnimated, animationDuration = _c.animationDuration, side = _c.side, labelWidth = _c.labelWidth, isThreeD = _c.isThreeD, animatedHeight = _c.animatedHeight, appearingOpacity = _c.appearingOpacity, autoShiftLabels = _c.autoShiftLabels, getPropsCommonForBarAndStack = _c.getPropsCommonForBarAndStack, barAndLineChartsWrapperProps = _c.barAndLineChartsWrapperProps, autoShiftLabelsForNegativeStacks = _c.autoShiftLabelsForNegativeStacks;
+    var _c = useBarChart(__assign(__assign({}, props), { heightValue: heightValue, widthValue: widthValue, opacityValue: opacityValue, parentWidth: (_b = props.parentWidth) !== null && _b !== void 0 ? _b : screenWidth })), lineConfig = _c.lineConfig, hidePointer1 = _c.hidePointer1, pointerItem = _c.pointerItem, pointerY = _c.pointerY, pointerConfig = _c.pointerConfig, pointerColor = _c.pointerColor, pointerX = _c.pointerX, pointerComponent = _c.pointerComponent, pointerHeight = _c.pointerHeight, pointerRadius = _c.pointerRadius, pointerWidth = _c.pointerWidth, autoAdjustPointerLabelPosition = _c.autoAdjustPointerLabelPosition, pointerLabelWidth = _c.pointerLabelWidth, activatePointersOnLongPress = _c.activatePointersOnLongPress, yAxisLabelWidth = _c.yAxisLabelWidth, shiftPointerLabelX = _c.shiftPointerLabelX, pointerLabelHeight = _c.pointerLabelHeight, pointerStripUptoDataPoint = _c.pointerStripUptoDataPoint, pointerStripHeight = _c.pointerStripHeight, shiftPointerLabelY = _c.shiftPointerLabelY, showPointerStrip = _c.showPointerStrip, pointerStripWidth = _c.pointerStripWidth, containerHeight = _c.containerHeight, xAxisThickness = _c.xAxisThickness, pointerStripColor = _c.pointerStripColor, pointerEvents = _c.pointerEvents, setResponderStartTime = _c.setResponderStartTime, setPointerY = _c.setPointerY, setPointerItem = _c.setPointerItem, initialSpacing = _c.initialSpacing, spacing = _c.spacing, data = _c.data, barWidth = _c.barWidth, setPointerX = _c.setPointerX, pointerIndex = _c.pointerIndex, setPointerIndex = _c.setPointerIndex, maxValue = _c.maxValue, responderStartTime = _c.responderStartTime, setResponderActive = _c.setResponderActive, activatePointersDelay = _c.activatePointersDelay, persistPointer = _c.persistPointer, pointerVanishDelay = _c.pointerVanishDelay, containerHeightIncludingBelowXAxis = _c.containerHeightIncludingBelowXAxis, extendedContainerHeight = _c.extendedContainerHeight, totalWidth = _c.totalWidth, stripBehindBars = _c.stripBehindBars, noOfSectionsBelowXAxis = _c.noOfSectionsBelowXAxis, stepHeight = _c.stepHeight, xAxisLabelsVerticalShift = _c.xAxisLabelsVerticalShift, labelsExtraHeight = _c.labelsExtraHeight, stripOverPointer = _c.stripOverPointer, pointerLabelComponent = _c.pointerLabelComponent, setSelectedIndex = _c.setSelectedIndex, isAnimated = _c.isAnimated, animationDuration = _c.animationDuration, side = _c.side, labelWidth = _c.labelWidth, isThreeD = _c.isThreeD, animatedHeight = _c.animatedHeight, appearingOpacity = _c.appearingOpacity, autoShiftLabels = _c.autoShiftLabels, getPropsCommonForBarAndStack = _c.getPropsCommonForBarAndStack, barAndLineChartsWrapperProps = _c.barAndLineChartsWrapperProps, autoShiftLabelsForNegativeStacks = _c.autoShiftLabelsForNegativeStacks;
     var labelsAppear = useCallback(function () {
-        opacValue.setValue(0);
-        Animated.timing(opacValue, {
+        opacityValue.setValue(0);
+        Animated.timing(opacityValue, {
             toValue: 1,
             duration: 500,
             easing: Easing.ease,
             useNativeDriver: false,
         }).start();
-    }, [opacValue]);
+    }, [opacityValue]);
     var decreaseWidth = useCallback(function () {
         widthValue.setValue(0);
         Animated.timing(widthValue, {
@@ -103,11 +103,14 @@ export var BarChart = function (props) {
             scrollX: 0,
             pointerEvents: pointerEvents,
             isBarChart: true,
+            pointerIndex: pointerIndex,
+            width: totalWidth,
+            screenWidth: screenWidth,
         });
     };
     var renderChartContent = function () {
         if (pointerConfig) {
-            return (_jsxs(View, { onStartShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onMoveShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onResponderGrant: function (evt) {
+            return (_jsxs(View, { onStartShouldSetResponder: function () { return !!pointerConfig; }, onMoveShouldSetResponder: function () { return !!pointerConfig; }, onResponderGrant: function (evt) {
                     var _a;
                     if (!pointerConfig)
                         return;

package/dist/Components/common/StripAndLabel.d.ts

@@ -1 +1,2 @@
-export declare const StripAndLabel: (props: any) => import("react/jsx-runtime").JSX.Element;
+import { StripAndLabelProps } from 'gifted-charts-core';
+export declare const StripAndLabel: (props: StripAndLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/common/StripAndLabel.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View } from 'react-native';
 import Svg, { Line } from 'react-native-svg';
-import { getTopAndLeftForStripAndLabel } from 'gifted-charts-core';
+import { getTopAndLeftForStripAndLabel, } from 'gifted-charts-core';
 export var StripAndLabel = function (props) {
     var _a;
-    var pointerX = props.pointerX, pointerLabelWidth = props.pointerLabelWidth, pointerRadius = props.pointerRadius, pointerWidth = props.pointerWidth, pointerYLocal = props.pointerYLocal, pointerStripUptoDataPoint = props.pointerStripUptoDataPoint, pointerStripHeight = props.pointerStripHeight, pointerItemLocal = props.pointerItemLocal, showPointerStrip = props.showPointerStrip, pointerStripWidth = props.pointerStripWidth, containerHeight = props.containerHeight, xAxisThickness = props.xAxisThickness, pointerStripColor = props.pointerStripColor, pointerConfig = props.pointerConfig, pointerLabelComponent = props.pointerLabelComponent, secondaryPointerItem = props.secondaryPointerItem, pointerEvents = props.pointerEvents, isBarChart = props.isBarChart;
+    var pointerX = props.pointerX, pointerLabelWidth = props.pointerLabelWidth, pointerRadius = props.pointerRadius, pointerWidth = props.pointerWidth, pointerYLocal = props.pointerYLocal, pointerStripUptoDataPoint = props.pointerStripUptoDataPoint, pointerStripHeight = props.pointerStripHeight, pointerItemLocal = props.pointerItemLocal, showPointerStrip = props.showPointerStrip, pointerStripWidth = props.pointerStripWidth, containerHeight = props.containerHeight, xAxisThickness = props.xAxisThickness, pointerStripColor = props.pointerStripColor, pointerConfig = props.pointerConfig, pointerLabelComponent = props.pointerLabelComponent, secondaryPointerItem = props.secondaryPointerItem, pointerEvents = props.pointerEvents, isBarChart = props.isBarChart, pointerIndex = props.pointerIndex;
     var _b = getTopAndLeftForStripAndLabel(props), top = _b.top, left = _b.left;
     return (_jsxs(View, { style: {
             position: 'absolute',
@@ -39,5 +39,5 @@ export var StripAndLabel = function (props) {
                             : containerHeight - pointerStripHeight,
                         width: pointerLabelWidth,
                     },
-                ], children: pointerLabelComponent === null || pointerLabelComponent === void 0 ? void 0 : pointerLabelComponent(pointerItemLocal, secondaryPointerItem) })) : null] }));
+                ], children: pointerLabelComponent === null || pointerLabelComponent === void 0 ? void 0 : pointerLabelComponent(pointerItemLocal, secondaryPointerItem, pointerIndex) })) : null] }));
 };

package/dist/LineChart/LineChartBicolor.js

@@ -22,18 +22,18 @@ export var LineChartBicolor = function (props) {
     var scrollRef = useRef();
     // const heightValue = useMemo(() => new Animated.Value(0), []);
     var widthValue = useMemo(function () { return new Animated.Value(0); }, []);
-    var opacValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
     var _b = useLineChartBiColor(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : screenWidth })), pointsArray = _b.pointsArray, fillPointsArray = _b.fillPointsArray, selectedIndex = _b.selectedIndex, setSelectedIndex = _b.setSelectedIndex, containerHeight = _b.containerHeight, data = _b.data, labelsExtraHeight = _b.labelsExtraHeight, animationDuration = _b.animationDuration, startIndex1 = _b.startIndex1, endIndex1 = _b.endIndex1, initialSpacing = _b.initialSpacing, thickness = _b.thickness, spacing = _b.spacing, xAxisThickness = _b.xAxisThickness, dataPointsHeight1 = _b.dataPointsHeight1, dataPointsWidth1 = _b.dataPointsWidth1, dataPointsRadius1 = _b.dataPointsRadius1, dataPointsColor1 = _b.dataPointsColor1, dataPointsShape1 = _b.dataPointsShape1, areaChart = _b.areaChart, textFontSize1 = _b.textFontSize1, textColor1 = _b.textColor1, totalWidth = _b.totalWidth, maxValue = _b.maxValue, extendedContainerHeight = _b.extendedContainerHeight, getX = _b.getX, getY = _b.getY, stepHeight = _b.stepHeight, noOfSectionsBelowXAxis = _b.noOfSectionsBelowXAxis, thickness1 = _b.thickness1, zIndex = _b.zIndex, strokeDashArray1 = _b.strokeDashArray1, rotateLabel = _b.rotateLabel, isAnimated = _b.isAnimated, hideDataPoints1 = _b.hideDataPoints1, color = _b.color, colorNegative = _b.colorNegative, startFillColor = _b.startFillColor, endFillColor = _b.endFillColor, startOpacity = _b.startOpacity, endOpacity = _b.endOpacity, startFillColorNegative = _b.startFillColorNegative, endFillColorNegative = _b.endFillColorNegative, startOpacityNegative = _b.startOpacityNegative, endOpacityNegative = _b.endOpacityNegative, gradientDirection = _b.gradientDirection, xAxisTextNumberOfLines = _b.xAxisTextNumberOfLines, focusEnabled = _b.focusEnabled, showDataPointOnFocus = _b.showDataPointOnFocus, showStripOnFocus = _b.showStripOnFocus, showTextOnFocus = _b.showTextOnFocus, stripHeight = _b.stripHeight, stripWidth = _b.stripWidth, stripColor = _b.stripColor, stripOpacity = _b.stripOpacity, unFocusOnPressOut = _b.unFocusOnPressOut, delayBeforeUnFocus = _b.delayBeforeUnFocus, barAndLineChartsWrapperProps = _b.barAndLineChartsWrapperProps;
     var labelsAppear = useCallback(function () {
-        opacValue.setValue(0);
-        Animated.timing(opacValue, {
+        opacityValue.setValue(0);
+        Animated.timing(opacityValue, {
             toValue: 1,
             duration: 500,
             easing: Easing.ease,
             useNativeDriver: false,
         }).start();
-    }, [opacValue]);
-    var appearingOpacity = opacValue.interpolate({
+    }, [opacityValue]);
+    var appearingOpacity = opacityValue.interpolate({
         inputRange: [0, 1],
         outputRange: [0, 1],
     });

package/dist/LineChart/index.js

@@ -36,57 +36,72 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 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 { View, Animated, Easing, Text, Dimensions, I18nManager, } from 'react-native';
 import { styles } from './styles';
-import { screenWidth } from '../utils';
+import { screenWidth, usePrevious } 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 = [];
+var AnimatedPath = Animated.createAnimatedComponent(Path);
 export var LineChart = function (props) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
     var scrollRef = (_a = props.scrollRef) !== null && _a !== void 0 ? _a : useRef(null);
-    var opacValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var opacityValue = 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 _c = useLineChart(__assign(__assign({}, props), { parentWidth: (_b = props.parentWidth) !== null && _b !== void 0 ? _b : screenWidth })), scrollX = _c.scrollX, setScrollX = _c.setScrollX, arrow1Points = _c.arrow1Points, arrow2Points = _c.arrow2Points, arrow3Points = _c.arrow3Points, arrow4Points = _c.arrow4Points, arrow5Points = _c.arrow5Points, secondaryArrowPoints = _c.secondaryArrowPoints, pointerIndex = _c.pointerIndex, setPointerIndex = _c.setPointerIndex, pointerX = _c.pointerX, setPointerX = _c.setPointerX, pointerY = _c.pointerY, setPointerY = _c.setPointerY, pointerItem = _c.pointerItem, setPointerItem = _c.setPointerItem, pointerY2 = _c.pointerY2, setPointerY2 = _c.setPointerY2, pointerItem2 = _c.pointerItem2, setPointerItem2 = _c.setPointerItem2, pointerY3 = _c.pointerY3, setPointerY3 = _c.setPointerY3, pointerItem3 = _c.pointerItem3, setPointerItem3 = _c.setPointerItem3, pointerY4 = _c.pointerY4, setPointerY4 = _c.setPointerY4, pointerItem4 = _c.pointerItem4, setPointerItem4 = _c.setPointerItem4, pointerY5 = _c.pointerY5, setPointerY5 = _c.setPointerY5, pointerYsForDataSet = _c.pointerYsForDataSet, setPointerYsForDataSet = _c.setPointerYsForDataSet, pointerItem5 = _c.pointerItem5, setPointerItem5 = _c.setPointerItem5, secondaryPointerY = _c.secondaryPointerY, setSecondaryPointerY = _c.setSecondaryPointerY, secondaryPointerItem = _c.secondaryPointerItem, setSecondaryPointerItem = _c.setSecondaryPointerItem, responderStartTime = _c.responderStartTime, setResponderStartTime = _c.setResponderStartTime, setResponderActive = _c.setResponderActive, points = _c.points, points2 = _c.points2, points3 = _c.points3, points4 = _c.points4, points5 = _c.points5, secondaryPoints = _c.secondaryPoints, fillPoints = _c.fillPoints, fillPoints2 = _c.fillPoints2, fillPoints3 = _c.fillPoints3, fillPoints4 = _c.fillPoints4, fillPoints5 = _c.fillPoints5, secondaryFillPoints = _c.secondaryFillPoints, pointsFromSet = _c.pointsFromSet, fillPointsFromSet = _c.fillPointsFromSet, arrowPointsFromSet = _c.arrowPointsFromSet, selectedIndex = _c.selectedIndex, setSelectedIndex = _c.setSelectedIndex, containerHeight = _c.containerHeight, data = _c.data, data2 = _c.data2, data3 = _c.data3, data4 = _c.data4, data5 = _c.data5, secondaryData = _c.secondaryData, dataSet = _c.dataSet, data0 = _c.data0, labelsExtraHeight = _c.labelsExtraHeight, animationDuration = _c.animationDuration, onDataChangeAnimationDuration = _c.onDataChangeAnimationDuration, animateTogether = _c.animateTogether, animateOnDataChange = _c.animateOnDataChange, startIndex1 = _c.startIndex1, startIndex2 = _c.startIndex2, endIndex1 = _c.endIndex1, endIndex2 = _c.endIndex2, startIndex3 = _c.startIndex3, endIndex3 = _c.endIndex3, startIndex4 = _c.startIndex4, endIndex4 = _c.endIndex4, startIndex5 = _c.startIndex5, endIndex5 = _c.endIndex5, initialSpacing = _c.initialSpacing, thickness = _c.thickness, yAxisLabelWidth = _c.yAxisLabelWidth, spacing = _c.spacing, xAxisThickness = _c.xAxisThickness, dataPointsHeight1 = _c.dataPointsHeight1, dataPointsWidth1 = _c.dataPointsWidth1, dataPointsRadius1 = _c.dataPointsRadius1, dataPointsColor1 = _c.dataPointsColor1, dataPointsShape1 = _c.dataPointsShape1, dataPointsHeight2 = _c.dataPointsHeight2, dataPointsWidth2 = _c.dataPointsWidth2, dataPointsRadius2 = _c.dataPointsRadius2, dataPointsColor2 = _c.dataPointsColor2, dataPointsShape2 = _c.dataPointsShape2, dataPointsHeight3 = _c.dataPointsHeight3, dataPointsWidth3 = _c.dataPointsWidth3, dataPointsRadius3 = _c.dataPointsRadius3, dataPointsColor3 = _c.dataPointsColor3, dataPointsShape3 = _c.dataPointsShape3, dataPointsHeight4 = _c.dataPointsHeight4, dataPointsWidth4 = _c.dataPointsWidth4, dataPointsRadius4 = _c.dataPointsRadius4, dataPointsColor4 = _c.dataPointsColor4, dataPointsShape4 = _c.dataPointsShape4, dataPointsHeight5 = _c.dataPointsHeight5, dataPointsWidth5 = _c.dataPointsWidth5, dataPointsRadius5 = _c.dataPointsRadius5, dataPointsColor5 = _c.dataPointsColor5, dataPointsShape5 = _c.dataPointsShape5, getIsNthAreaChart = _c.getIsNthAreaChart, textFontSize1 = _c.textFontSize1, textFontSize2 = _c.textFontSize2, textFontSize3 = _c.textFontSize3, textFontSize4 = _c.textFontSize4, textFontSize5 = _c.textFontSize5, textColor1 = _c.textColor1, textColor2 = _c.textColor2, textColor3 = _c.textColor3, textColor4 = _c.textColor4, textColor5 = _c.textColor5, totalWidth = _c.totalWidth, maxValue = _c.maxValue, overflowTop = _c.overflowTop, extendedContainerHeight = _c.extendedContainerHeight, getX = _c.getX, getY = _c.getY, getSecondaryY = _c.getSecondaryY, secondaryMaxValue = _c.secondaryMaxValue, showValuesAsDataPointsText = _c.showValuesAsDataPointsText, thickness1 = _c.thickness1, thickness2 = _c.thickness2, thickness3 = _c.thickness3, thickness4 = _c.thickness4, thickness5 = _c.thickness5, zIndex1 = _c.zIndex1, zIndex2 = _c.zIndex2, zIndex3 = _c.zIndex3, zIndex4 = _c.zIndex4, zIndex5 = _c.zIndex5, strokeDashArray1 = _c.strokeDashArray1, strokeDashArray2 = _c.strokeDashArray2, strokeDashArray3 = _c.strokeDashArray3, strokeDashArray4 = _c.strokeDashArray4, strokeDashArray5 = _c.strokeDashArray5, rotateLabel = _c.rotateLabel, isAnimated = _c.isAnimated, hideDataPoints1 = _c.hideDataPoints1, hideDataPoints2 = _c.hideDataPoints2, hideDataPoints3 = _c.hideDataPoints3, hideDataPoints4 = _c.hideDataPoints4, hideDataPoints5 = _c.hideDataPoints5, color1 = _c.color1, color2 = _c.color2, color3 = _c.color3, color4 = _c.color4, color5 = _c.color5, startFillColor1 = _c.startFillColor1, endFillColor1 = _c.endFillColor1, startOpacity1 = _c.startOpacity1, endOpacity1 = _c.endOpacity1, startFillColor2 = _c.startFillColor2, endFillColor2 = _c.endFillColor2, startOpacity2 = _c.startOpacity2, endOpacity2 = _c.endOpacity2, startFillColor3 = _c.startFillColor3, endFillColor3 = _c.endFillColor3, startOpacity3 = _c.startOpacity3, endOpacity3 = _c.endOpacity3, startFillColor4 = _c.startFillColor4, endFillColor4 = _c.endFillColor4, startOpacity4 = _c.startOpacity4, endOpacity4 = _c.endOpacity4, startFillColor5 = _c.startFillColor5, endFillColor5 = _c.endFillColor5, startOpacity5 = _c.startOpacity5, endOpacity5 = _c.endOpacity5, arrowStrokeWidth1 = _c.arrowStrokeWidth1, arrowStrokeColor1 = _c.arrowStrokeColor1, arrowFillColor1 = _c.arrowFillColor1, arrowStrokeWidth2 = _c.arrowStrokeWidth2, arrowStrokeColor2 = _c.arrowStrokeColor2, arrowFillColor2 = _c.arrowFillColor2, arrowStrokeWidth3 = _c.arrowStrokeWidth3, arrowStrokeColor3 = _c.arrowStrokeColor3, arrowFillColor3 = _c.arrowFillColor3, arrowStrokeWidth4 = _c.arrowStrokeWidth4, arrowStrokeColor4 = _c.arrowStrokeColor4, arrowFillColor4 = _c.arrowFillColor4, arrowStrokeWidth5 = _c.arrowStrokeWidth5, arrowStrokeColor5 = _c.arrowStrokeColor5, arrowFillColor5 = _c.arrowFillColor5, arrowStrokeWidthsFromSet = _c.arrowStrokeWidthsFromSet, arrowStrokeColorsFromSet = _c.arrowStrokeColorsFromSet, arrowFillColorsFromSet = _c.arrowFillColorsFromSet, secondaryLineConfig = _c.secondaryLineConfig, gradientDirection = _c.gradientDirection, stepHeight = _c.stepHeight, noOfSectionsBelowXAxis = _c.noOfSectionsBelowXAxis, xAxisTextNumberOfLines = _c.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = _c.xAxisLabelsVerticalShift, pointerConfig = _c.pointerConfig, pointerHeight = _c.pointerHeight, pointerWidth = _c.pointerWidth, pointerRadius = _c.pointerRadius, pointerColor = _c.pointerColor, pointerComponent = _c.pointerComponent, showPointerStrip = _c.showPointerStrip, pointerStripHeight = _c.pointerStripHeight, pointerStripWidth = _c.pointerStripWidth, pointerStripColor = _c.pointerStripColor, pointerStripUptoDataPoint = _c.pointerStripUptoDataPoint, pointerLabelComponent = _c.pointerLabelComponent, stripOverPointer = _c.stripOverPointer, shiftPointerLabelX = _c.shiftPointerLabelX, shiftPointerLabelY = _c.shiftPointerLabelY, pointerLabelWidth = _c.pointerLabelWidth, pointerLabelHeight = _c.pointerLabelHeight, autoAdjustPointerLabelPosition = _c.autoAdjustPointerLabelPosition, pointerVanishDelay = _c.pointerVanishDelay, activatePointersOnLongPress = _c.activatePointersOnLongPress, activatePointersDelay = _c.activatePointersDelay, persistPointer = _c.persistPointer, hidePointer1 = _c.hidePointer1, hidePointer2 = _c.hidePointer2, hidePointer3 = _c.hidePointer3, hidePointer4 = _c.hidePointer4, hidePointer5 = _c.hidePointer5, hideSecondaryPointer = _c.hideSecondaryPointer, pointerEvents = _c.pointerEvents, focusEnabled = _c.focusEnabled, showDataPointOnFocus = _c.showDataPointOnFocus, showStripOnFocus = _c.showStripOnFocus, showTextOnFocus = _c.showTextOnFocus, showDataPointLabelOnFocus = _c.showDataPointLabelOnFocus, stripHeight = _c.stripHeight, stripWidth = _c.stripWidth, stripColor = _c.stripColor, stripOpacity = _c.stripOpacity, stripStrokeDashArray = _c.stripStrokeDashArray, unFocusOnPressOut = _c.unFocusOnPressOut, delayBeforeUnFocus = _c.delayBeforeUnFocus, containerHeightIncludingBelowXAxis = _c.containerHeightIncludingBelowXAxis, lineGradient = _c.lineGradient, lineGradientDirection = _c.lineGradientDirection, lineGradientStartColor = _c.lineGradientStartColor, lineGradientEndColor = _c.lineGradientEndColor, barAndLineChartsWrapperProps = _c.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); }); }, []);
+    var animatedPoints = new Animated.Value(0);
+    var animatedFillPoints = new Animated.Value(0);
+    var oldPoints = usePrevious(points);
+    var oldFillPoints = usePrevious(fillPoints);
+    var animatedPath = animateOnDataChange && points && oldPoints
+        ? animatedPoints.interpolate({
+            inputRange: [0, 1],
+            outputRange: [oldPoints, points],
+        })
+        : '';
+    var animatedFillPath = animateOnDataChange && fillPoints && oldFillPoints
+        ? animatedFillPoints.interpolate({
+            inputRange: [0, 1],
+            outputRange: [oldFillPoints, fillPoints],
+        })
+        : '';
     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
+            Animated.timing(animatedPoints, {
+                toValue: 1,
+                duration: onDataChangeAnimationDuration,
+                useNativeDriver: true,
+                easing: Easing.ease,
+            }).start();
+            if (props.areaChart || props.areaChart1) {
+                Animated.timing(animatedFillPoints, {
+                    toValue: 1,
                     duration: onDataChangeAnimationDuration,
-                });
-            })).start();
+                    useNativeDriver: true,
+                    easing: Easing.ease,
+                }).start();
+            }
         }
-    }, [animateOnDataChange, data, onDataChangeAnimationDuration]);
+    }, [animatedPoints]);
     var labelsAppear = useCallback(function () {
-        opacValue.setValue(0);
-        Animated.timing(opacValue, {
+        opacityValue.setValue(0);
+        Animated.timing(opacityValue, {
             toValue: 1,
             duration: 500,
             easing: Easing.ease,
             useNativeDriver: false,
         }).start();
-    }, [opacValue]);
-    var appearingOpacity = opacValue.interpolate({
+    }, [opacityValue]);
+    var appearingOpacity = opacityValue.interpolate({
         inputRange: [0, 1],
         outputRange: [0, 1],
     });
@@ -205,7 +220,7 @@ export var LineChart = function (props) {
                 {
                     height: rotateLabel
                         ? 40
-                        : (_a = props.xAxisLabelsHeight) !== null && _a !== void 0 ? _a : xAxisTextNumberOfLines * 18,
+                        : ((_a = props.xAxisLabelsHeight) !== null && _a !== void 0 ? _a : xAxisTextNumberOfLines * 18),
                     position: 'absolute',
                     bottom: top
                         ? containerHeight +
@@ -542,6 +557,10 @@ export var LineChart = function (props) {
             secondaryPointerItem: secondaryPointerItem,
             scrollX: scrollX,
             pointerEvents: pointerEvents,
+            isBarChart: false,
+            pointerIndex: pointerIndex,
+            width: totalWidth,
+            screenWidth: screenWidth,
         });
     };
     var getLineGradientComponent = function () {
@@ -550,8 +569,8 @@ export var LineChart = function (props) {
     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;
+    var lineSvgComponent = function (points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, key, hideDataPoints, data, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText) {
+        var _a;
         if (!points)
             return null;
         var isCurved = points.includes('C');
@@ -564,7 +583,7 @@ export var LineChart = function (props) {
             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,
+            d: animateOnDataChange && animatedPath ? animatedPath : points,
             fill: 'none',
             stroke: lineGradient
                 ? props.lineGradientId
@@ -597,16 +616,12 @@ export var LineChart = function (props) {
                         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
+                })) : animateOnDataChange && animatedPath ? (_jsx(AnimatedPath, __assign({}, lineSvgPropsOuter))) : (_jsx(Path, __assign({}, lineSvgPropsOuter))), isNthAreaChart &&
+                    getAreaGradientComponent(startFillColor, endFillColor, startOpacity, endOpacity), isNthAreaChart ? (animateOnDataChange && animatedFillPath ? (_jsx(AnimatedPath, { onPress: props.onChartAreaPress, d: animatedFillPath, 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 }))] }));
+                        : "url(#Gradient)", stroke: 'transparent', strokeWidth: currentLineThickness || thickness })) : (_jsx(Path, { onPress: props.onChartAreaPress, d: fillPoints, fill: props.areaGradientId
+                        ? "url(#".concat(props.areaGradientId, ")")
+                        : "url(#Gradient)", stroke: 'transparent', strokeWidth: currentLineThickness || thickness }))) : null, 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, renderDataPoints(hideDataPoints, data, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText), showArrow && (_jsx(Path, { d: arrowPoints, fill: arrowFillColor, stroke: arrowStrokeColor, strokeWidth: arrowStrokeWidth }))] }));
     };
     var activatePointers = function (x) {
         var factor = (x - initialSpacing) / spacing;
@@ -705,7 +720,7 @@ export var LineChart = function (props) {
             }
         }
     };
-    var renderLine = function (zIndex, points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, key) {
+    var renderLine = function (zIndex, points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, hideDataPoints, paramData, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, key) {
         var _a, _b;
         return (_jsx(View, { onMoveShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onResponderGrant: function (evt) {
                 if (!pointerConfig)
@@ -815,7 +830,8 @@ export var LineChart = function (props) {
                         var item = set.data[factor];
                         var y = item
                             ? containerHeight -
-                                (item.value * containerHeight) / maxValue -
+                                (item.value * containerHeight) /
+                                    (set.isSecondary ? secondaryMaxValue : maxValue) -
                                 (pointerRadius || pointerHeight / 2) +
                                 10
                             : 0;
@@ -855,9 +871,9 @@ export var LineChart = function (props) {
                 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));
+            }, children: lineSvgComponent(points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, key, hideDataPoints, paramData, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText) }, 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 renderAnimatedLine = function (zIndex, points, animatedWidth, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, hideDataPoints, paramsData, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, 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)
@@ -968,7 +984,8 @@ export var LineChart = function (props) {
                             var item = set.data[factor];
                             var y = item
                                 ? containerHeight -
-                                    (item.value * containerHeight) / maxValue -
+                                    (item.value * containerHeight) /
+                                        (set.isSecondary ? secondaryMaxValue : maxValue) -
                                     (pointerRadius || pointerHeight / 2) +
                                     10
                                 : 0;
@@ -1009,7 +1026,7 @@ export var LineChart = function (props) {
                 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));
+            }, children: lineSvgComponent(points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, key, hideDataPoints, paramsData, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText) }, key !== null && key !== void 0 ? key : 0));
     };
     var remainingScrollViewProps = {
         onScroll: function (ev) {
@@ -1027,37 +1044,39 @@ export var LineChart = function (props) {
         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;
+                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
                             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);
+                                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], (_j = set.hideDataPoints) !== null && _j !== void 0 ? _j : hideDataPoints1, set.data, adjustToOffset(set.data, -((_k = props.yAxisOffset) !== null && _k !== void 0 ? _k : 0)), // need the actual values passed by user
+                                (_l = set.dataPointsShape) !== null && _l !== void 0 ? _l : dataPointsShape1, (_m = set.dataPointsWidth) !== null && _m !== void 0 ? _m : dataPointsWidth1, (_o = set.dataPointsHeight) !== null && _o !== void 0 ? _o : dataPointsHeight1, (_p = set.dataPointsColor) !== null && _p !== void 0 ? _p : dataPointsColor1, (_q = set.dataPointsRadius) !== null && _q !== void 0 ? _q : dataPointsRadius1, (_r = set.textColor) !== null && _r !== void 0 ? _r : textColor1, (_s = set.textFontSize) !== null && _s !== void 0 ? _s : textFontSize1, (_t = set.startIndex) !== null && _t !== void 0 ? _t : 0, (_u = set.endIndex) !== null && _u !== void 0 ? _u : set.data.length - 1, set.isSecondary, showValuesAsDataPointsText, 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);
+                                return renderLine((_v = set.zIndex) !== null && _v !== void 0 ? _v : zIndex1, pointsFromSet[index], (_w = set.thickness) !== null && _w !== void 0 ? _w : thickness1, (_x = set.color) !== null && _x !== void 0 ? _x : color1, fillPointsFromSet[index], (_y = set.startFillColor) !== null && _y !== void 0 ? _y : startFillColor1, (_z = set.endFillColor) !== null && _z !== void 0 ? _z : endFillColor1, (_0 = set.startOpacity) !== null && _0 !== void 0 ? _0 : startOpacity1, (_1 = set.endOpacity) !== null && _1 !== void 0 ? _1 : endOpacity1, (_2 = set.strokeDashArray) !== null && _2 !== void 0 ? _2 : 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], (_3 = set.hideDataPoints) !== null && _3 !== void 0 ? _3 : hideDataPoints1, set.data, adjustToOffset(set.data, -((_4 = props.yAxisOffset) !== null && _4 !== void 0 ? _4 : 0)), // need the actual values passed by user
+                                (_5 = set.dataPointsShape) !== null && _5 !== void 0 ? _5 : dataPointsShape1, (_6 = set.dataPointsWidth) !== null && _6 !== void 0 ? _6 : dataPointsWidth1, (_7 = set.dataPointsHeight) !== null && _7 !== void 0 ? _7 : dataPointsHeight1, (_8 = set.dataPointsColor) !== null && _8 !== void 0 ? _8 : dataPointsColor1, (_9 = set.dataPointsRadius) !== null && _9 !== void 0 ? _9 : dataPointsRadius1, (_10 = set.textColor) !== null && _10 !== void 0 ? _10 : textColor1, (_11 = set.textFontSize) !== null && _11 !== void 0 ? _11 : textFontSize1, (_12 = set.startIndex) !== null && _12 !== void 0 ? _12 : 0, (_13 = set.endIndex) !== null && _13 !== void 0 ? _13 : set.data.length - 1, set.isSecondary, showValuesAsDataPointsText, 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
+                        ? renderAnimatedLine(zIndex1, points, animatedWidth, thickness1, color1, fillPoints, startFillColor1, endFillColor1, startOpacity1, endOpacity1, strokeDashArray1, props.showArrow1 || props.showArrows, arrow1Points, arrowStrokeWidth1, arrowStrokeColor1, arrowFillColor1, hideDataPoints1, data, props.data, dataPointsShape1, dataPointsWidth1, dataPointsHeight1, dataPointsColor1, dataPointsRadius1, textColor1, textFontSize1, startIndex1, endIndex1, false, showValuesAsDataPointsText, 0)
+                        : renderLine(zIndex1, points, thickness1, color1, fillPoints, startFillColor1, endFillColor1, startOpacity1, endOpacity1, strokeDashArray1, props.showArrow1 || props.showArrows, arrow1Points, arrowStrokeWidth1, arrowStrokeColor1, arrowFillColor1, hideDataPoints1, data, props.data, dataPointsShape1, dataPointsWidth1, dataPointsHeight1, dataPointsColor1, dataPointsRadius1, textColor1, textFontSize1, startIndex1, endIndex1, false, showValuesAsDataPointsText, 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)
+                        ? 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, 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, 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, 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, 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)
+                        ? renderAnimatedLine(zIndex2, points2, animatedWidth2, thickness2, color2, fillPoints2, startFillColor2, endFillColor2, startOpacity2, endOpacity2, strokeDashArray2, props.showArrow2 || props.showArrows, arrow2Points, arrowStrokeWidth2, arrowStrokeColor2, arrowFillColor2, hideDataPoints2, data2, props.data2, dataPointsShape2, dataPointsWidth2, dataPointsHeight2, dataPointsColor2, dataPointsRadius2, textColor2, textFontSize2, startIndex2, endIndex2, false, showValuesAsDataPointsText, 1)
+                        : renderLine(zIndex2, points2, thickness2, color2, fillPoints2, startFillColor2, endFillColor2, startOpacity2, endOpacity2, strokeDashArray2, props.showArrow2 || props.showArrows, arrow2Points, arrowStrokeWidth2, arrowStrokeColor2, arrowFillColor2, hideDataPoints2, data2, props.data2, dataPointsShape2, dataPointsWidth2, dataPointsHeight2, dataPointsColor2, dataPointsRadius2, textColor2, textFontSize2, startIndex2, endIndex2, false, showValuesAsDataPointsText, 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)
+                        ? renderAnimatedLine(zIndex3, points3, animatedWidth3, thickness3, color3, fillPoints3, startFillColor3, endFillColor3, startOpacity3, endOpacity3, strokeDashArray3, props.showArrow3 || props.showArrows, arrow3Points, arrowStrokeWidth3, arrowStrokeColor3, arrowFillColor3, hideDataPoints3, data3, props.data3, dataPointsShape3, dataPointsWidth3, dataPointsHeight3, dataPointsColor3, dataPointsRadius3, textColor3, textFontSize3, startIndex3, endIndex3, false, showValuesAsDataPointsText, 2)
+                        : renderLine(zIndex3, points3, thickness3, color3, fillPoints3, startFillColor3, endFillColor3, startOpacity3, endOpacity3, strokeDashArray3, props.showArrow3 || props.showArrows, arrow3Points, arrowStrokeWidth3, arrowStrokeColor3, arrowFillColor3, hideDataPoints3, data3, props.data3, dataPointsShape3, dataPointsWidth3, dataPointsHeight3, dataPointsColor3, dataPointsRadius3, textColor3, textFontSize3, startIndex3, endIndex3, false, showValuesAsDataPointsText, 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)
+                        ? renderAnimatedLine(zIndex4, points4, animatedWidth4, thickness4, color4, fillPoints4, startFillColor4, endFillColor4, startOpacity4, endOpacity4, strokeDashArray4, props.showArrow4 || props.showArrows, arrow4Points, arrowStrokeWidth4, arrowStrokeColor4, arrowFillColor4, hideDataPoints4, data4, props.data4, dataPointsShape4, dataPointsWidth4, dataPointsHeight4, dataPointsColor4, dataPointsRadius4, textColor4, textFontSize4, startIndex4, endIndex4, false, showValuesAsDataPointsText, 3)
+                        : renderLine(zIndex4, points4, thickness4, color4, fillPoints4, startFillColor4, endFillColor4, startOpacity4, endOpacity4, strokeDashArray4, props.showArrow4 || props.showArrows, arrow4Points, arrowStrokeWidth4, arrowStrokeColor4, arrowFillColor4, hideDataPoints4, data4, props.data4, dataPointsShape4, dataPointsWidth4, dataPointsHeight4, dataPointsColor4, dataPointsRadius4, textColor4, textFontSize4, startIndex4, endIndex4, false, showValuesAsDataPointsText, 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)
+                        ? renderAnimatedLine(zIndex5, points5, animatedWidth5, thickness5, color5, fillPoints5, startFillColor5, endFillColor5, startOpacity5, endOpacity5, strokeDashArray5, props.showArrow5 || props.showArrows, arrow5Points, arrowStrokeWidth5, arrowStrokeColor5, arrowFillColor5, hideDataPoints5, data5, props.data5, dataPointsShape5, dataPointsWidth5, dataPointsHeight5, dataPointsColor5, dataPointsRadius5, textColor5, textFontSize5, startIndex5, endIndex5, false, showValuesAsDataPointsText, 4)
+                        : renderLine(zIndex5, points5, thickness5, color5, fillPoints5, startFillColor5, endFillColor5, startOpacity5, endOpacity5, strokeDashArray5, props.showArrow5 || props.showArrows, arrow5Points, arrowStrokeWidth5, arrowStrokeColor5, arrowFillColor5, hideDataPoints5, data5, props.data5, dataPointsShape5, dataPointsWidth5, dataPointsHeight5, dataPointsColor5, dataPointsRadius5, textColor5, textFontSize5, startIndex5, endIndex5, false, showValuesAsDataPointsText, 4)
                     : null, pointerX > 0 ? (_jsxs(View, { pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : 'none', style: {
                         position: 'absolute',
                         height: extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export declare const rnVersion: number;
 export declare const screenWidth: number;
+export declare function usePrevious(value: string): string;

package/dist/utils/index.js

@@ -1,4 +1,5 @@
 var _a, _b;
+import { useEffect, useRef } from 'react';
 import { Dimensions } from 'react-native';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 var versionString = require('react-native/package.json').version;
@@ -10,3 +11,10 @@ export var rnVersion = (!isNaN(msb) ? msb : 0) * 1000000 +
     (!isNaN(mid) ? mid : 0) * 10000 +
     (!isNaN(lsb) ? lsb : 0);
 export var screenWidth = Dimensions.get('window').width;
+export function usePrevious(value) {
+    var ref = useRef('');
+    useEffect(function () {
+        ref.current = value; //assign the value of ref to the argument
+    }, [value]); //this code will run when the value of 'value' changes
+    return ref.current; //in the end, return the current ref value.
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.22",
+  "version": "1.4.24",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "dist/index.js",
   "files": [
@@ -25,7 +25,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "^0.1.21"
+    "gifted-charts-core": "^0.1.26"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",