react-native-gifted-charts 1.4.47 → 1.4.49

package/dist/BarChart/Animated2DWithGradient.js

@@ -26,7 +26,7 @@ if (Platform.OS === 'android') {
 }
 var Animated2DWithGradient = function (props) {
     var _a, _b;
-    var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, bWidth = 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 barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, bWidth = props.barWidth, barStyle = props.barStyle, item = props.item, index = props.index, opacity = props.opacity, animationDuration = props.animationDuration, noGradient = props.noGradient, noAnimation = props.noAnimation, 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 _c = __read(useState(noAnimation ? props.height : 0.4), 2), height = _c[0], setHeight = _c[1]; // if animation fails, increase this constant value of 0.4
     var _d = __read(useState(!noAnimation), 2), initialRender = _d[0], setInitialRender = _d[1];
     var _e = __read(useState((_a = item.barWidth) !== null && _a !== void 0 ? _a : bWidth), 2), barWidth = _e[0], setBarWidth = _e[1]; // setting width in state for animation purpose
@@ -68,15 +68,15 @@ var Animated2DWithGradient = function (props) {
                     bottom: 0,
                     width: barWidth,
                     overflow: 'hidden',
-                    height: (noAnimation
+                    height: noAnimation
                         ? Math.max(props.minHeight, Math.abs(height))
-                        : height) - (barMarginBottom || 0),
+                        : height,
                 }, children: _jsxs(View, { style: [
                         {
                             width: '100%',
-                            height: (noAnimation
+                            height: noAnimation
                                 ? Math.max(props.minHeight, Math.abs(height))
-                                : height) - (barMarginBottom || 0),
+                                : height,
                         },
                         item.barStyle || barStyle,
                     ], children: [noGradient ? (_jsx(View, { style: barStyleWithBackground, 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 })) : (_jsx(LinearGradient, { style: commonStyleForBar, start: { x: 0, y: 0 }, end: { x: 1, y: 1 }, colors: [

package/dist/BarChart/RenderBars.js

@@ -13,14 +13,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { View, TouchableOpacity, Animated, Text } from 'react-native';
 import AnimatedThreeDBar from '../Components/AnimatedThreeDBar';
 import Animated2DWithGradient from './Animated2DWithGradient';
-import Cap from '../Components/BarSpecificComponents/cap';
-import BarBackgroundPattern from '../Components/BarSpecificComponents/barBackgroundPattern';
-import LinearGradient from '../Components/common/LinearGradient';
 import { getPropsForAnimated2DWithGradient, AxesAndRulesDefaults, } from 'gifted-charts-core';
 import Tooltip from '../Components/BarSpecificComponents/tooltip';
 var RenderBars = function (props) {
     var _a, _b, _c, _d, _e;
-    var item = props.item, index = props.index, containerHeight = props.containerHeight, maxValue = props.maxValue, minHeight = props.minHeight, spacing = props.spacing, propSpacing = props.propSpacing, side = props.side, data = props.data, barBorderWidth = props.barBorderWidth, barBorderColor = props.barBorderColor, isThreeD = props.isThreeD, isAnimated = props.isAnimated, rotateLabel = props.rotateLabel, appearingOpacity = props.appearingOpacity, animationDuration = props.animationDuration, autoShiftLabels = props.autoShiftLabels, label = props.label, secondaryLabel = props.secondaryLabel, labelTextStyle = props.labelTextStyle, secondaryLabelTextStyle = props.secondaryLabelTextStyle, xAxisTextNumberOfLines = props.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, renderTooltip = props.renderTooltip, leftShiftForTooltip = props.leftShiftForTooltip, leftShiftForLastIndexTooltip = props.leftShiftForLastIndexTooltip, initialSpacing = props.initialSpacing, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, _f = props.xAxisThickness, xAxisThickness = _f === void 0 ? AxesAndRulesDefaults.xAxisThickness : _f, horizontal = props.horizontal, rtl = props.rtl, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle, pointerConfig = props.pointerConfig, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, yAxisOffset = props.yAxisOffset, barWidth = props.barWidth, _g = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _g === void 0 ? 0 : _g, stepHeight = props.stepHeight, stepValue = props.stepValue, negativeStepHeight = props.negativeStepHeight, negativeStepValue = props.negativeStepValue, autoCenterTooltip = props.autoCenterTooltip, secondaryXAxis = props.secondaryXAxis, secondaryStepHeight = props.secondaryStepHeight, secondaryStepValue = props.secondaryStepValue, secondaryNegativeStepHeight = props.secondaryNegativeStepHeight, secondaryNegativeStepValue = props.secondaryNegativeStepValue, secondaryNoOfSectionsBelowXAxis = props.secondaryNoOfSectionsBelowXAxis;
+    var item = props.item, index = props.index, containerHeight = props.containerHeight, maxValue = props.maxValue, minHeight = props.minHeight, spacing = props.spacing, propSpacing = props.propSpacing, side = props.side, data = props.data, barBorderWidth = props.barBorderWidth, barBorderColor = props.barBorderColor, isThreeD = props.isThreeD, isAnimated = props.isAnimated, rotateLabel = props.rotateLabel, appearingOpacity = props.appearingOpacity, animationDuration = props.animationDuration, autoShiftLabels = props.autoShiftLabels, label = props.label, secondaryLabel = props.secondaryLabel, labelTextStyle = props.labelTextStyle, secondaryLabelTextStyle = props.secondaryLabelTextStyle, xAxisTextNumberOfLines = props.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, renderTooltip = props.renderTooltip, leftShiftForTooltip = props.leftShiftForTooltip, leftShiftForLastIndexTooltip = props.leftShiftForLastIndexTooltip, initialSpacing = props.initialSpacing, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, _f = props.xAxisThickness, xAxisThickness = _f === void 0 ? AxesAndRulesDefaults.xAxisThickness : _f, horizontal = props.horizontal, rtl = props.rtl, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle, pointerConfig = props.pointerConfig, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, yAxisOffset = props.yAxisOffset, barWidth = props.barWidth, _g = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _g === void 0 ? 0 : _g, stepHeight = props.stepHeight, stepValue = props.stepValue, negativeStepHeight = props.negativeStepHeight, negativeStepValue = props.negativeStepValue, autoCenterTooltip = props.autoCenterTooltip, secondaryXAxis = props.secondaryXAxis, secondaryStepHeight = props.secondaryStepHeight, secondaryStepValue = props.secondaryStepValue, secondaryNegativeStepHeight = props.secondaryNegativeStepHeight, secondaryNegativeStepValue = props.secondaryNegativeStepValue, secondaryNoOfSectionsBelowXAxis = props.secondaryNoOfSectionsBelowXAxis, _h = props.barMarginBottom, barMarginBottom = _h === void 0 ? 0 : _h;
     var heightFactor = item.isSecondary
         ? item.value < 0
             ? (secondaryNegativeStepHeight !== null && secondaryNegativeStepHeight !== void 0 ? secondaryNegativeStepHeight : secondaryStepHeight) /
@@ -30,14 +27,11 @@ 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 _j = getPropsForAnimated2DWithGradient(__assign(__assign({}, props), { barHeight: barHeight })), commonStyleForBar = _j.commonStyleForBar, barStyleWithBackground = _j.barStyleWithBackground, commonPropsFor2dAnd3dBars = _j.commonPropsFor2dAnd3dBars, isFocused = _j.isFocused, focusedBarConfig = _j.focusedBarConfig, localFrontColor = _j.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)
         : itemOrPropsBarInnerComponent;
-    var barMarginBottom = item.barMarginBottom === 0
-        ? 0
-        : item.barMarginBottom || props.barMarginBottom || 0;
     var renderLabel = function (top, label, labelTextStyle, value) {
         var _a, _b;
         return (_jsx(View, { style: [
@@ -156,31 +150,74 @@ var RenderBars = function (props) {
         leftSpacing +=
             ((_c = data[i].spacing) !== null && _c !== void 0 ? _c : propSpacing) + (data[i].barWidth || barWidth);
     }
-    var static2DWithGradient = function (item) {
-        var _a, _b;
-        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)
-                            : 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: [
-                        {
-                            position: 'absolute',
-                            top: (item.barWidth || barWidth) * -1,
-                            height: item.barWidth || barWidth,
-                            width: item.barWidth || barWidth,
-                            justifyContent: (horizontal && !intactTopLabel) || item.value < 0
-                                ? 'center'
-                                : 'flex-end',
-                            alignItems: 'center',
-                        },
-                        item.value < 0 && { transform: [{ rotate: '180deg' }] },
-                        horizontal &&
-                            !intactTopLabel && { transform: [{ rotate: '270deg' }] },
-                        topLabelContainerStyle !== null && topLabelContainerStyle !== void 0 ? topLabelContainerStyle : item.topLabelContainerStyle,
-                    ], children: showValuesAsTopLabel ? (_jsx(Text, { style: topLabelTextStyle, children: item.value + yAxisOffset })) : ((_b = item.topLabelComponent) === null || _b === void 0 ? void 0 : _b.call(item)) })), localBarInnerComponent ? (_jsx(View, { style: { height: '100%', width: '100%' }, children: localBarInnerComponent(item, index) })) : null] }));
-    };
+    // const static2DWithGradient = (item: barDataItem) => {
+    //   const localGradientColor =
+    //     item.gradientColor || props.gradientColor || 'white';
+    //   return (
+    //     <>
+    //       <LinearGradient
+    //         style={commonStyleForBar}
+    //         start={{x: 0, y: 0}}
+    //         end={{x: 0, y: 1}}
+    //         colors={[
+    //           isFocused
+    //             ? (focusedBarConfig?.gradientColor ?? localGradientColor)
+    //             : localGradientColor,
+    //           localFrontColor,
+    //         ]}>
+    //         {props.cappedBars && item.value ? (
+    //           <Cap
+    //             capThicknessFromItem={item.capThickness}
+    //             capThicknessFromProps={props.capThickness}
+    //             capColorFromItem={item.capColor}
+    //             capColorFromProps={props.capColor}
+    //             capRadiusFromItem={item.capRadius}
+    //             capRadiusFromProps={props.capRadius}
+    //           />
+    //         ) : null}
+    //       </LinearGradient>
+    //       {(item.barBackgroundPattern || props.barBackgroundPattern) && (
+    //         <BarBackgroundPattern
+    //           barBackgroundPatternFromItem={item.barBackgroundPattern}
+    //           barBackgroundPatternFromProps={props.barBackgroundPattern}
+    //           patternIdFromItem={item.patternId}
+    //           patternIdFromProps={props.patternId}
+    //         />
+    //       )}
+    //       {(item.topLabelComponent || showValuesAsTopLabel) && (
+    //         <View
+    //           style={[
+    //             {
+    //               position: 'absolute',
+    //               top: (item.barWidth || barWidth) * -1,
+    //               height: item.barWidth || barWidth,
+    //               width: item.barWidth || barWidth,
+    //               justifyContent:
+    //                 (horizontal && !intactTopLabel) || item.value < 0
+    //                   ? 'center'
+    //                   : 'flex-end',
+    //               alignItems: 'center',
+    //             },
+    //             item.value < 0 && {transform: [{rotate: '180deg'}]},
+    //             horizontal &&
+    //               !intactTopLabel && {transform: [{rotate: '270deg'}]},
+    //             topLabelContainerStyle ?? item.topLabelContainerStyle,
+    //           ]}>
+    //           {showValuesAsTopLabel ? (
+    //             <Text style={topLabelTextStyle}>{item.value + yAxisOffset}</Text>
+    //           ) : (
+    //             item.topLabelComponent?.()
+    //           )}
+    //         </View>
+    //       )}
+    //       {localBarInnerComponent ? (
+    //         <View style={{height: '100%', width: '100%'}}>
+    //           {localBarInnerComponent(item, index)}
+    //         </View>
+    //       ) : null}
+    //     </>
+    //   );
+    // };
     var barWrapperStyle = [
         {
             // overflow: 'visible',
@@ -216,7 +253,7 @@ var RenderBars = function (props) {
                         backgroundColor: props.xAxisIndicesColor,
                     } })), 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
+                        (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)) : (animated2DWithGradient(false, true))) : isAnimated ? (animated2DWithGradient(true, false)) : (animated2DWithGradient(true, true)), isAnimated
                     ? renderAnimatedLabel(false, label, labelTextStyle, item.value)
                     : renderLabel(false, label, labelTextStyle, item.value), secondaryXAxis
                     ? isAnimated

package/dist/BarChart/RenderStackBars.js

@@ -22,7 +22,7 @@ if (Platform.OS === 'android') {
 }
 var RenderStackBars = function (props) {
     var _a;
-    var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, stackData = props.stackData, 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, secondaryStepHeight = props.secondaryStepHeight, secondaryStepValue = props.secondaryStepValue, secondaryNegativeStepHeight = props.secondaryNegativeStepHeight, secondaryNegativeStepValue = props.secondaryNegativeStepValue;
+    var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, stackData = props.stackData, 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, secondaryStepHeight = props.secondaryStepHeight, secondaryStepValue = props.secondaryStepValue, secondaryNegativeStepHeight = props.secondaryNegativeStepHeight, secondaryNegativeStepValue = props.secondaryNegativeStepValue, barMarginBottom = props.barMarginBottom;
     var _e = useRenderStackBars(__assign(__assign({}, props), { secondaryStepHeight: secondaryStepHeight, secondaryStepValue: secondaryStepValue, secondaryNegativeStepHeight: secondaryNegativeStepHeight, secondaryNegativeStepValue: secondaryNegativeStepValue })), 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: [
@@ -35,8 +35,10 @@ var RenderStackBars = function (props) {
                         spacing / 2,
                     position: 'absolute',
                     bottom: autoShiftLabelsForNegativeStacks
-                        ? -6 - xAxisTextNumberOfLines * 18 + lowestBarPosition
-                        : -labelsDistanceFromXaxis,
+                        ? containsNegativeValue
+                            ? -0
+                            : -6 - xAxisTextNumberOfLines * 18
+                        : -labelsDistanceFromXaxis - 6 - xAxisTextNumberOfLines * 18,
                 },
                 rotateLabel
                     ? horizontal
@@ -69,6 +71,7 @@ var RenderStackBars = function (props) {
     };
     var static2DSimple = function () {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var remainingBarMarginBottom = barMarginBottom;
         return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { disabled: disablePress, activeOpacity: activeOpacity, onPress: function () {
                         setSelectedIndex(index);
                         if (item.onPress) {
@@ -101,11 +104,18 @@ var RenderStackBars = function (props) {
                             borderBottomLeftRadius: (_f = (_e = borderBottomLeftRadius !== null && borderBottomLeftRadius !== void 0 ? borderBottomLeftRadius : borderRadius) !== null && _e !== void 0 ? _e : stackBorderBottomLeftRadius) !== null && _f !== void 0 ? _f : stackBorderRadius,
                             borderBottomRightRadius: (_h = (_g = borderBottomRightRadius !== null && borderBottomRightRadius !== void 0 ? borderBottomRightRadius : borderRadius) !== null && _g !== void 0 ? _g : stackBorderBottomRightRadius) !== null && _h !== void 0 ? _h : stackBorderRadius,
                             overflow: lowestBarPosition ? 'visible' : 'hidden',
+                            // bottom: barMarginBottom
                         },
                     ], children: [item.stacks.map(function (stackItem, index) {
+                            var _a;
                             var borderRadii = getStackBorderRadii(item, index);
-                            var barHeight = getBarHeight(stackItem.value, stackItem.marginBottom);
-                            return (_jsxs(TouchableOpacity, { onPress: stackItem.onPress, activeOpacity: activeOpacity, disabled: disablePress || !stackItem.onPress, style: __assign({ position: 'absolute', bottom: getPosition(index) + (stackItem.marginBottom || 0), width: '100%', height: barHeight, backgroundColor: stackItem.color || item.color || props.color || 'black', borderWidth: barBorderWidth !== null && barBorderWidth !== void 0 ? barBorderWidth : 0, borderColor: barBorderColor }, borderRadii), children: [stackItem.showGradient ||
+                            // compute marginBottom here
+                            var barHeight = getBarHeight(stackItem.value, 0);
+                            var marginBottom = Math.max((_a = stackItem.marginBottom) !== null && _a !== void 0 ? _a : 0, remainingBarMarginBottom);
+                            var deductedMargin = Math.min(barHeight, marginBottom);
+                            remainingBarMarginBottom = Math.max(0, remainingBarMarginBottom - deductedMargin);
+                            barHeight -= deductedMargin;
+                            return (_jsxs(TouchableOpacity, { onPress: stackItem.onPress, activeOpacity: activeOpacity, disabled: disablePress || !stackItem.onPress, style: __assign({ position: 'absolute', bottom: getPosition(index, barHeight) + deductedMargin, width: '100%', height: barHeight, backgroundColor: stackItem.color || item.color || props.color || 'black', borderWidth: barBorderWidth !== null && barBorderWidth !== void 0 ? barBorderWidth : 0, borderColor: barBorderColor }, borderRadii), children: [stackItem.showGradient ||
                                         item.showGradient ||
                                         props.showGradient ? (_jsx(LinearGradient, { style: __assign({ position: 'absolute', width: '100%', height: '100%' }, borderRadii), start: { x: 0, y: 0 }, end: { x: 0, y: 1 }, colors: [
                                             stackItem.gradientColor ||

package/dist/BarChart/index.js

@@ -230,7 +230,7 @@ export var BarChart = function (props) {
         else {
             return data.map(function (item, index) {
                 var _a;
-                return (_jsx(RenderBars, __assign({ data: data, side: side, minHeight: (_a = props.minHeight) !== null && _a !== void 0 ? _a : (isAnimated && !isThreeD ? 0.1 : 0), sideWidth: props.sideWidth, labelWidth: labelWidth, isThreeD: isThreeD, isAnimated: isAnimated, animationDuration: animationDuration, animatedHeight: animatedHeight, appearingOpacity: appearingOpacity, roundedTop: props.roundedTop, roundedBottom: props.roundedBottom, frontColor: props.frontColor, sideColor: props.sideColor, topColor: props.topColor, cappedBars: props.cappedBars, capThickness: props.capThickness, capColor: props.capColor, capRadius: props.capRadius, autoShiftLabels: autoShiftLabels, barMarginBottom: props.barMarginBottom, barStyle: props.barStyle }, getPropsCommonForBarAndStack(item, index)), index));
+                return (_jsx(RenderBars, __assign({ data: data, side: side, minHeight: (_a = props.minHeight) !== null && _a !== void 0 ? _a : (isAnimated && !isThreeD ? 0.1 : 0), sideWidth: props.sideWidth, labelWidth: labelWidth, isThreeD: isThreeD, isAnimated: isAnimated, animationDuration: animationDuration, animatedHeight: animatedHeight, appearingOpacity: appearingOpacity, roundedTop: props.roundedTop, roundedBottom: props.roundedBottom, frontColor: props.frontColor, sideColor: props.sideColor, topColor: props.topColor, cappedBars: props.cappedBars, capThickness: props.capThickness, capColor: props.capColor, capRadius: props.capRadius, autoShiftLabels: autoShiftLabels, barStyle: props.barStyle }, getPropsCommonForBarAndStack(item, index)), index));
             });
         }
     };

package/dist/Components/BarAndLineChartsWrapper/renderHorizSections.js

@@ -29,16 +29,17 @@ import Rule from '../lineSvg';
 import { styles } from '../../LineChart/styles';
 import { getHorizSectionVals, yAxisSides, chartTypes, } from 'gifted-charts-core';
 export var renderHorizSections = function (props) {
-    var _a, _b, _c, _d;
-    var chartType = props.chartType, width = props.width, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, totalWidth = props.totalWidth, endSpacing = props.endSpacing, yAxisSide = props.yAxisSide, horizontalRulesStyle = props.horizontalRulesStyle, noOfSections = props.noOfSections, sectionColors = props.sectionColors, stepHeight = props.stepHeight, negativeStepHeight = props.negativeStepHeight, yAxisLabelWidth = props.yAxisLabelWidth, yAxisLabelContainerStyle = props.yAxisLabelContainerStyle, yAxisThickness = props.yAxisThickness, yAxisColor = props.yAxisColor, xAxisThickness = props.xAxisThickness, xAxisColor = props.xAxisColor, xAxisLength = props.xAxisLength, xAxisType = props.xAxisType, dashWidth = props.dashWidth, dashGap = props.dashGap, backgroundColor = props.backgroundColor, hideRules = props.hideRules, rulesLength = props.rulesLength, rulesType = props.rulesType, rulesThickness = props.rulesThickness, rulesColor = props.rulesColor, rulesConfigArray = props.rulesConfigArray, spacing = props.spacing, showYAxisIndices = props.showYAxisIndices, yAxisIndicesHeight = props.yAxisIndicesHeight, yAxisIndicesWidth = props.yAxisIndicesWidth, yAxisIndicesColor = props.yAxisIndicesColor, hideOrigin = props.hideOrigin, hideYAxisText = props.hideYAxisText, yAxisTextNumberOfLines = props.yAxisTextNumberOfLines, yAxisTextStyle = props.yAxisTextStyle, rotateYAxisTexts = props.rotateYAxisTexts, rtl = props.rtl, containerHeight = props.containerHeight, maxValue = props.maxValue, yAxisOffset = props.yAxisOffset, horizontal = props.horizontal, yAxisAtTop = props.yAxisAtTop, secondaryYAxis = props.secondaryYAxis, onlyReferenceLines = props.onlyReferenceLines, renderReferenceLines = props.renderReferenceLines, secondaryXAxis = props.secondaryXAxis;
-    var _e = getHorizSectionVals(props), secondaryYAxisConfig = _e.secondaryYAxisConfig, horizSections = _e.horizSections, yAxisExtraHeightAtTop = _e.yAxisExtraHeightAtTop, secondaryHorizSections = _e.secondaryHorizSections, showReferenceLine1 = _e.showReferenceLine1, referenceLine1Config = _e.referenceLine1Config, referenceLine1Position = _e.referenceLine1Position, showReferenceLine2 = _e.showReferenceLine2, referenceLine2Config = _e.referenceLine2Config, referenceLine2Position = _e.referenceLine2Position, showReferenceLine3 = _e.showReferenceLine3, referenceLine3Config = _e.referenceLine3Config, referenceLine3Position = _e.referenceLine3Position, horizSectionsBelow = _e.horizSectionsBelow, secondaryHorizSectionsBelow = _e.secondaryHorizSectionsBelow, getLabelTexts = _e.getLabelTexts, getLabelTextsForSecondaryYAxis = _e.getLabelTextsForSecondaryYAxis;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var chartType = props.chartType, width = props.width, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, totalWidth = props.totalWidth, endSpacing = props.endSpacing, yAxisSide = props.yAxisSide, horizontalRulesStyle = props.horizontalRulesStyle, noOfSections = props.noOfSections, sectionColors = props.sectionColors, stepHeight = props.stepHeight, negativeStepHeight = props.negativeStepHeight, yAxisLabelWidth = props.yAxisLabelWidth, yAxisLabelContainerStyle = props.yAxisLabelContainerStyle, yAxisThickness = props.yAxisThickness, yAxisColor = props.yAxisColor, xAxisThickness = props.xAxisThickness, xAxisColor = props.xAxisColor, xAxisLength = props.xAxisLength, xAxisType = props.xAxisType, dashWidth = props.dashWidth, dashGap = props.dashGap, backgroundColor = props.backgroundColor, hideRules = props.hideRules, rulesLength = props.rulesLength, rulesType = props.rulesType, rulesThickness = props.rulesThickness, rulesColor = props.rulesColor, rulesConfigArray = props.rulesConfigArray, spacing = props.spacing, showYAxisIndices = props.showYAxisIndices, yAxisIndicesHeight = props.yAxisIndicesHeight, yAxisIndicesWidth = props.yAxisIndicesWidth, yAxisIndicesColor = props.yAxisIndicesColor, hideOrigin = props.hideOrigin, hideYAxisText = props.hideYAxisText, yAxisTextNumberOfLines = props.yAxisTextNumberOfLines, yAxisTextStyle = props.yAxisTextStyle, rotateYAxisTexts = props.rotateYAxisTexts, rtl = props.rtl, containerHeight = props.containerHeight, maxValue = props.maxValue, yAxisOffset = props.yAxisOffset, horizontal = props.horizontal, yAxisAtTop = props.yAxisAtTop, secondaryYAxis = props.secondaryYAxis, onlyReferenceLines = props.onlyReferenceLines, renderReferenceLines = props.renderReferenceLines, secondaryXAxis = props.secondaryXAxis, customBackground = props.customBackground;
+    var _k = getHorizSectionVals(props), secondaryYAxisConfig = _k.secondaryYAxisConfig, horizSections = _k.horizSections, yAxisExtraHeightAtTop = _k.yAxisExtraHeightAtTop, secondaryHorizSections = _k.secondaryHorizSections, showReferenceLine1 = _k.showReferenceLine1, referenceLine1Config = _k.referenceLine1Config, referenceLine1Position = _k.referenceLine1Position, showReferenceLine2 = _k.showReferenceLine2, referenceLine2Config = _k.referenceLine2Config, referenceLine2Position = _k.referenceLine2Position, showReferenceLine3 = _k.showReferenceLine3, referenceLine3Config = _k.referenceLine3Config, referenceLine3Position = _k.referenceLine3Position, horizSectionsBelow = _k.horizSectionsBelow, secondaryHorizSectionsBelow = _k.secondaryHorizSectionsBelow, getLabelTexts = _k.getLabelTexts, getLabelTextsForSecondaryYAxis = _k.getLabelTextsForSecondaryYAxis;
     var secondaryYAxisExtraHeightAtBottom = 10;
     var negativeSectionsCountDiffPrimaryVsSecondary = secondaryHorizSectionsBelow.length - horizSectionsBelow.length;
     var isLineChart = chartType === chartTypes.LINE;
     var isLineBiColor = chartType === chartTypes.LINE_BI_COLOR;
     var renderAxesAndRules = function (index) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         var invertedIndex = horizSections.length - index - 1;
+        var rulesConfigArrayLocal = rulesConfigArray[invertedIndex - 1];
         return (_jsxs(View, { style: [
                 index === noOfSections
                     ? styles.lastLeftPart
@@ -63,12 +64,12 @@ export var renderHorizSections = function (props) {
                         dashGap: dashGap,
                         type: xAxisType,
                     } })) : hideRules ? null : (_jsx(Rule, { config: {
-                        thickness: (_c = (_b = rulesConfigArray[invertedIndex]) === null || _b === void 0 ? void 0 : _b.rulesThickness) !== null && _c !== void 0 ? _c : rulesThickness,
-                        color: (_e = (_d = rulesConfigArray[invertedIndex]) === null || _d === void 0 ? void 0 : _d.rulesColor) !== null && _e !== void 0 ? _e : rulesColor,
-                        width: (_h = (_g = (_f = rulesConfigArray[invertedIndex]) === null || _f === void 0 ? void 0 : _f.rulesLength) !== null && _g !== void 0 ? _g : rulesLength) !== null && _h !== void 0 ? _h : (props.width || totalWidth - spacing) + endSpacing,
-                        dashWidth: (_k = (_j = rulesConfigArray[invertedIndex]) === null || _j === void 0 ? void 0 : _j.dashWidth) !== null && _k !== void 0 ? _k : dashWidth,
-                        dashGap: (_m = (_l = rulesConfigArray[invertedIndex]) === null || _l === void 0 ? void 0 : _l.dashGap) !== null && _m !== void 0 ? _m : dashGap,
-                        type: (_p = (_o = rulesConfigArray[invertedIndex]) === null || _o === void 0 ? void 0 : _o.rulesType) !== null && _p !== void 0 ? _p : rulesType,
+                        thickness: (_b = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesThickness) !== null && _b !== void 0 ? _b : rulesThickness,
+                        color: (_c = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesColor) !== null && _c !== void 0 ? _c : rulesColor,
+                        width: (_e = (_d = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesLength) !== null && _d !== void 0 ? _d : rulesLength) !== null && _e !== void 0 ? _e : (props.width || totalWidth - spacing) + endSpacing,
+                        dashWidth: (_f = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.dashWidth) !== null && _f !== void 0 ? _f : dashWidth,
+                        dashGap: (_g = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.dashGap) !== null && _g !== void 0 ? _g : dashGap,
+                        type: (_h = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesType) !== null && _h !== void 0 ? _h : rulesType,
                     } })), showYAxisIndices && index !== noOfSections ? (_jsx(View, { style: {
                         position: 'absolute',
                         height: yAxisIndicesHeight,
@@ -255,7 +256,19 @@ export var renderHorizSections = function (props) {
             }, children: _jsx(View, { style: { width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing }, children: referenceLines() }) })) : (_jsxs(View, { pointerEvents: "none", style: {
                 flexDirection: 'row',
                 marginTop: stepHeight / -2,
-            }, children: [_jsxs(View, { style: { width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing }, children: [yAxisExtraHeightAtTop ? renderExtraHeightOfYAxisAtTop() : null, horizSections.map(function (sectionItems, index) {
+            }, children: [_jsxs(View, { style: { width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing }, children: [customBackground ? (_jsx(View, { style: {
+                                position: 'absolute',
+                                backgroundColor: customBackground.color,
+                                width: (_a = customBackground.width) !== null && _a !== void 0 ? _a : (width !== null && width !== void 0 ? width : totalWidth) +
+                                    endSpacing -
+                                    9 +
+                                    ((_b = customBackground.widthAdjustment) !== null && _b !== void 0 ? _b : 0),
+                                height: (_c = customBackground.height) !== null && _c !== void 0 ? _c : '100%',
+                                left: yAxisLabelWidth + ((_d = customBackground.horizontalShift) !== null && _d !== void 0 ? _d : 0),
+                                top: (_e = customBackground.verticalShift) !== null && _e !== void 0 ? _e : 0,
+                            }, children: customBackground.component
+                                ? customBackground.component()
+                                : null })) : null, yAxisExtraHeightAtTop ? renderExtraHeightOfYAxisAtTop() : null, horizSections.map(function (sectionItems, index) {
                             return (_jsxs(View, { style: [
                                     styles.horizBar,
                                     {
@@ -388,12 +401,12 @@ export var renderHorizSections = function (props) {
                 /*************************      Render the secondary Y Axis below origin   *********************/
                 /***********************************************************************************************/
                 secondaryYAxis && secondaryYAxisConfig.noOfSectionsBelowXAxis ? (_jsx(View, { style: {
-                        width: (_a = secondaryYAxisConfig.yAxisLabelWidth) !== null && _a !== void 0 ? _a : yAxisLabelWidth,
+                        width: (_f = secondaryYAxisConfig.yAxisLabelWidth) !== null && _f !== void 0 ? _f : yAxisLabelWidth,
                         left: (width ? yAxisLabelWidth : yAxisLabelWidth - spacing) -
-                            ((_b = secondaryYAxisConfig.yAxisLabelWidth) !== null && _b !== void 0 ? _b : yAxisLabelWidth),
+                            ((_g = secondaryYAxisConfig.yAxisLabelWidth) !== null && _g !== void 0 ? _g : yAxisLabelWidth),
                         borderColor: secondaryYAxisConfig.yAxisColor,
                         borderLeftWidth: secondaryYAxisConfig.yAxisThickness,
-                        height: ((_d = (_c = secondaryYAxisConfig.negativeStepHeight) !== null && _c !== void 0 ? _c : secondaryYAxisConfig.stepHeight) !== null && _d !== void 0 ? _d : stepHeight) *
+                        height: ((_j = (_h = secondaryYAxisConfig.negativeStepHeight) !== null && _h !== void 0 ? _h : secondaryYAxisConfig.stepHeight) !== null && _j !== void 0 ? _j : stepHeight) *
                             secondaryHorizSectionsBelow.length +
                             secondaryYAxisExtraHeightAtBottom,
                         bottom: -containerHeight - stepHeight / 2 - yAxisExtraHeightAtTop,

package/dist/Components/BarAndLineChartsWrapper/renderLineInBarChart/index.js

@@ -51,7 +51,7 @@ var RenderLineInBarChart = function (props) {
                 width: animatedWidth,
                 zIndex: lineBehindBars ? -1 : 100000,
                 // backgroundColor: 'wheat',
-            }, children: _jsxs(Svg, { children: [_jsx(Path, { d: points, fill: "none", stroke: lineConfig.color, strokeWidth: lineConfig.thickness }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
+            }, children: _jsxs(Svg, { children: [_jsx(Path, { d: points, fill: "none", stroke: lineConfig.color, strokeWidth: lineConfig.thickness, strokeDasharray: lineConfig.strokeDashArray }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
                         ? renderDataPoints(dataPointsProps)
                         : renderSpecificDataPoints(specificDataPointsProps), lineConfig.showArrow && (_jsx(Path, { d: arrowPoints, fill: (_a = lineConfig.arrowConfig) === null || _a === void 0 ? void 0 : _a.fillColor, stroke: (_b = lineConfig.arrowConfig) === null || _b === void 0 ? void 0 : _b.strokeColor, strokeWidth: (_c = lineConfig.arrowConfig) === null || _c === void 0 ? void 0 : _c.strokeWidth }))] }) }));
     };
@@ -65,7 +65,7 @@ var RenderLineInBarChart = function (props) {
                 width: totalWidth,
                 zIndex: lineBehindBars ? -1 : 100000,
                 // backgroundColor: 'rgba(200,150,150,0.1)'
-            }, children: _jsxs(Svg, { children: [_jsx(Path, { d: points, fill: "none", stroke: lineConfig.color, strokeWidth: lineConfig.thickness }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
+            }, children: _jsxs(Svg, { children: [_jsx(Path, { d: points, fill: "none", stroke: lineConfig.color, strokeWidth: lineConfig.thickness, strokeDasharray: lineConfig.strokeDashArray }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
                         ? renderDataPoints(dataPointsProps)
                         : renderSpecificDataPoints(specificDataPointsProps), lineConfig.showArrow && (_jsx(Path, { d: arrowPoints, fill: (_a = lineConfig.arrowConfig) === null || _a === void 0 ? void 0 : _a.fillColor, stroke: (_b = lineConfig.arrowConfig) === null || _b === void 0 ? void 0 : _b.strokeColor, strokeWidth: (_c = lineConfig.arrowConfig) === null || _c === void 0 ? void 0 : _c.strokeWidth }))] }) }));
     };

package/dist/Components/BarAndLineChartsWrapper/renderVerticalLines.js

@@ -26,7 +26,7 @@ var RenderVerticalLines = function (props) {
         : 0;
     return (_jsx(View, { style: {
             position: 'absolute',
-            height: extendedContainerHeight,
+            height: containerHeightIncludingBelowXAxis,
             bottom: 60 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
             left: 0,
             width: totalWidth,
@@ -89,7 +89,7 @@ var RenderVerticalLines = function (props) {
                             : index * spacing + (initialSpacing - 2));
                 return (_jsx(Line, { x1: x, y1: extendedContainerHeight -
                         getHeightOfVerticalLine(index) +
-                        heightAdjustmentDueToStrokeLinecap, x2: x, y2: extendedContainerHeight - heightAdjustmentDueToStrokeLinecap, stroke: verticalLinesColor || 'lightgray', strokeWidth: verticalLinesThickness || 2, strokeDasharray: verticalLinesStrokeDashArray !== null && verticalLinesStrokeDashArray !== void 0 ? verticalLinesStrokeDashArray : '', strokeLinecap: verticalLinesStrokeLinecap }, index));
+                        heightAdjustmentDueToStrokeLinecap, x2: x, y2: containerHeightIncludingBelowXAxis - heightAdjustmentDueToStrokeLinecap, stroke: verticalLinesColor || 'lightgray', strokeWidth: verticalLinesThickness || 2, strokeDasharray: verticalLinesStrokeDashArray !== null && verticalLinesStrokeDashArray !== void 0 ? verticalLinesStrokeDashArray : '', strokeLinecap: verticalLinesStrokeLinecap }, index));
             }) }) }));
 };
 export default RenderVerticalLines;

package/dist/Components/BarSpecificComponents/tooltip.js

@@ -32,9 +32,7 @@ var Tooltip = function (props) {
             if (!autoCenterTooltip)
                 return;
             var width = event.nativeEvent.layout.width;
-            var shift = (width - barWidth) / 2;
-            if (shift > 0)
-                setLeftShiftTooltipForCentering(shift);
+            setLeftShiftTooltipForCentering((width - barWidth) / 2);
         }, children: renderTooltip === null || renderTooltip === void 0 ? void 0 : renderTooltip(item, index) }));
 };
 export default Tooltip;

package/dist/LineChart/index.js

@@ -35,18 +35,18 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     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 { Fragment, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { View, Animated, Easing, Text, Dimensions, I18nManager, } from 'react-native';
 import { styles } from './styles';
 import { screenWidth, usePrevious } from '../utils';
-import Svg, { Path, LinearGradient, Stop, Circle, Rect, Text as CanvasText, Line, ClipPath, Use, } from 'react-native-svg';
+import Svg, { Path, LinearGradient, Stop, Circle, Rect, Text as CanvasText, Line, ClipPath, Use, ForeignObject, } from 'react-native-svg';
 import { getSegmentedPathObjects, getRegionPathObjects, RANGE_ENTER, RANGE_EXIT, SEGMENT_END, SEGMENT_START, STOP, useLineChart, adjustToOffset, LineDefaults, pointsWithPaddedRepititions, } from 'gifted-charts-core';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
 import { StripAndLabel } from '../Components/common/StripAndLabel';
 import { Pointer } from '../Components/common/Pointer';
 var AnimatedPath = Animated.createAnimatedComponent(Path);
 export var LineChart = function (props) {
-    var _a, _b;
+    var _a, _b, _c;
     var scrollRef = (_a = props.scrollRef) !== null && _a !== void 0 ? _a : useRef(null);
     var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
     var heightValue = useMemo(function () { return new Animated.Value(0); }, []);
@@ -55,7 +55,9 @@ export var LineChart = function (props) {
     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); }, []);
-    var _c = useLineChart(__assign(__assign({}, props), { parentWidth: (_b = props.parentWidth) !== null && _b !== void 0 ? _b : screenWidth })), curveType = _c.curveType, 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, pointerItemsForSet = _c.pointerItemsForSet, setPointerItemsForSet = _c.setPointerItemsForSet, secondaryPointerItemsForSet = _c.secondaryPointerItemsForSet, setSecondaryPointerItemsForSet = _c.setSecondaryPointerItemsForSet, 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, hidePointers = _c.hidePointers, hidePointer1 = _c.hidePointer1, hidePointer2 = _c.hidePointer2, hidePointer3 = _c.hidePointer3, hidePointer4 = _c.hidePointer4, hidePointer5 = _c.hidePointer5, cumulativeSpacing1 = _c.cumulativeSpacing1, cumulativeSpacing2 = _c.cumulativeSpacing2, cumulativeSpacing3 = _c.cumulativeSpacing3, cumulativeSpacing4 = _c.cumulativeSpacing4, cumulativeSpacing5 = _c.cumulativeSpacing5, cumulativeSpacingSecondary = _c.cumulativeSpacingSecondary, cumulativeSpacingForSet = _c.cumulativeSpacingForSet, hideSecondaryPointer = _c.hideSecondaryPointer, hidePointerDataPointForMissingValues = _c.hidePointerDataPointForMissingValues, pointerEvents = _c.pointerEvents, focusEnabled = _c.focusEnabled, showDataPointOnFocus = _c.showDataPointOnFocus, showStripOnFocus = _c.showStripOnFocus, stripOverDataPoints = _c.stripOverDataPoints, 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, _d = _c.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _d === void 0 ? 0 : _d, lineGradient = _c.lineGradient, lineGradientDirection = _c.lineGradientDirection, lineGradientStartColor = _c.lineGradientStartColor, lineGradientEndColor = _c.lineGradientEndColor, barAndLineChartsWrapperProps = _c.barAndLineChartsWrapperProps, areaChart = _c.areaChart, mostNegativeValue = _c.mostNegativeValue, strips = _c.strips;
+    var _d = useLineChart(__assign(__assign({}, props), { parentWidth: (_b = props.parentWidth) !== null && _b !== void 0 ? _b : screenWidth })), curveType = _d.curveType, scrollX = _d.scrollX, setScrollX = _d.setScrollX, arrow1Points = _d.arrow1Points, arrow2Points = _d.arrow2Points, arrow3Points = _d.arrow3Points, arrow4Points = _d.arrow4Points, arrow5Points = _d.arrow5Points, secondaryArrowPoints = _d.secondaryArrowPoints, pointerIndex = _d.pointerIndex, setPointerIndex = _d.setPointerIndex, pointerX = _d.pointerX, setPointerX = _d.setPointerX, pointerY = _d.pointerY, setPointerY = _d.setPointerY, pointerItem = _d.pointerItem, setPointerItem = _d.setPointerItem, pointerY2 = _d.pointerY2, setPointerY2 = _d.setPointerY2, pointerItem2 = _d.pointerItem2, setPointerItem2 = _d.setPointerItem2, pointerY3 = _d.pointerY3, setPointerY3 = _d.setPointerY3, pointerItem3 = _d.pointerItem3, setPointerItem3 = _d.setPointerItem3, pointerY4 = _d.pointerY4, setPointerY4 = _d.setPointerY4, pointerItem4 = _d.pointerItem4, setPointerItem4 = _d.setPointerItem4, pointerY5 = _d.pointerY5, setPointerY5 = _d.setPointerY5, pointerYsForDataSet = _d.pointerYsForDataSet, setPointerYsForDataSet = _d.setPointerYsForDataSet, pointerItem5 = _d.pointerItem5, setPointerItem5 = _d.setPointerItem5, secondaryPointerY = _d.secondaryPointerY, setSecondaryPointerY = _d.setSecondaryPointerY, secondaryPointerItem = _d.secondaryPointerItem, setSecondaryPointerItem = _d.setSecondaryPointerItem, pointerItemsForSet = _d.pointerItemsForSet, setPointerItemsForSet = _d.setPointerItemsForSet, secondaryPointerItemsForSet = _d.secondaryPointerItemsForSet, setSecondaryPointerItemsForSet = _d.setSecondaryPointerItemsForSet, responderStartTime = _d.responderStartTime, setResponderStartTime = _d.setResponderStartTime, setResponderActive = _d.setResponderActive, points = _d.points, points2 = _d.points2, points3 = _d.points3, points4 = _d.points4, points5 = _d.points5, secondaryPoints = _d.secondaryPoints, fillPoints = _d.fillPoints, fillPoints2 = _d.fillPoints2, fillPoints3 = _d.fillPoints3, fillPoints4 = _d.fillPoints4, fillPoints5 = _d.fillPoints5, secondaryFillPoints = _d.secondaryFillPoints, pointsFromSet = _d.pointsFromSet, fillPointsFromSet = _d.fillPointsFromSet, arrowPointsFromSet = _d.arrowPointsFromSet, selectedIndex = _d.selectedIndex, setSelectedIndex = _d.setSelectedIndex, containerHeight = _d.containerHeight, data = _d.data, data2 = _d.data2, data3 = _d.data3, data4 = _d.data4, data5 = _d.data5, secondaryData = _d.secondaryData, dataSet = _d.dataSet, data0 = _d.data0, labelsExtraHeight = _d.labelsExtraHeight, animationDuration = _d.animationDuration, onDataChangeAnimationDuration = _d.onDataChangeAnimationDuration, animateTogether = _d.animateTogether, renderDataPointsAfterAnimationEnds = _d.renderDataPointsAfterAnimationEnds, animateOnDataChange = _d.animateOnDataChange, startIndex1 = _d.startIndex1, startIndex2 = _d.startIndex2, endIndex1 = _d.endIndex1, endIndex2 = _d.endIndex2, startIndex3 = _d.startIndex3, endIndex3 = _d.endIndex3, startIndex4 = _d.startIndex4, endIndex4 = _d.endIndex4, startIndex5 = _d.startIndex5, endIndex5 = _d.endIndex5, initialSpacing = _d.initialSpacing, thickness = _d.thickness, yAxisLabelWidth = _d.yAxisLabelWidth, spacing = _d.spacing, xAxisThickness = _d.xAxisThickness, dataPointsHeight1 = _d.dataPointsHeight1, dataPointsWidth1 = _d.dataPointsWidth1, dataPointsRadius1 = _d.dataPointsRadius1, dataPointsColor1 = _d.dataPointsColor1, dataPointsShape1 = _d.dataPointsShape1, dataPointsHeight2 = _d.dataPointsHeight2, dataPointsWidth2 = _d.dataPointsWidth2, dataPointsRadius2 = _d.dataPointsRadius2, dataPointsColor2 = _d.dataPointsColor2, dataPointsShape2 = _d.dataPointsShape2, dataPointsHeight3 = _d.dataPointsHeight3, dataPointsWidth3 = _d.dataPointsWidth3, dataPointsRadius3 = _d.dataPointsRadius3, dataPointsColor3 = _d.dataPointsColor3, dataPointsShape3 = _d.dataPointsShape3, dataPointsHeight4 = _d.dataPointsHeight4, dataPointsWidth4 = _d.dataPointsWidth4, dataPointsRadius4 = _d.dataPointsRadius4, dataPointsColor4 = _d.dataPointsColor4, dataPointsShape4 = _d.dataPointsShape4, dataPointsHeight5 = _d.dataPointsHeight5, dataPointsWidth5 = _d.dataPointsWidth5, dataPointsRadius5 = _d.dataPointsRadius5, dataPointsColor5 = _d.dataPointsColor5, dataPointsShape5 = _d.dataPointsShape5, getIsNthAreaChart = _d.getIsNthAreaChart, textFontSize1 = _d.textFontSize1, textFontSize2 = _d.textFontSize2, textFontSize3 = _d.textFontSize3, textFontSize4 = _d.textFontSize4, textFontSize5 = _d.textFontSize5, textColor1 = _d.textColor1, textColor2 = _d.textColor2, textColor3 = _d.textColor3, textColor4 = _d.textColor4, textColor5 = _d.textColor5, totalWidth = _d.totalWidth, maxValue = _d.maxValue, overflowTop = _d.overflowTop, extendedContainerHeight = _d.extendedContainerHeight, getX = _d.getX, getY = _d.getY, getSecondaryY = _d.getSecondaryY, secondaryMaxValue = _d.secondaryMaxValue, showValuesAsDataPointsText = _d.showValuesAsDataPointsText, thickness1 = _d.thickness1, thickness2 = _d.thickness2, thickness3 = _d.thickness3, thickness4 = _d.thickness4, thickness5 = _d.thickness5, zIndex1 = _d.zIndex1, zIndex2 = _d.zIndex2, zIndex3 = _d.zIndex3, zIndex4 = _d.zIndex4, zIndex5 = _d.zIndex5, strokeDashArray1 = _d.strokeDashArray1, strokeDashArray2 = _d.strokeDashArray2, strokeDashArray3 = _d.strokeDashArray3, strokeDashArray4 = _d.strokeDashArray4, strokeDashArray5 = _d.strokeDashArray5, rotateLabel = _d.rotateLabel, isAnimated = _d.isAnimated, hideDataPoints1 = _d.hideDataPoints1, hideDataPoints2 = _d.hideDataPoints2, hideDataPoints3 = _d.hideDataPoints3, hideDataPoints4 = _d.hideDataPoints4, hideDataPoints5 = _d.hideDataPoints5, color1 = _d.color1, color2 = _d.color2, color3 = _d.color3, color4 = _d.color4, color5 = _d.color5, startFillColor1 = _d.startFillColor1, endFillColor1 = _d.endFillColor1, startOpacity1 = _d.startOpacity1, endOpacity1 = _d.endOpacity1, startFillColor2 = _d.startFillColor2, endFillColor2 = _d.endFillColor2, startOpacity2 = _d.startOpacity2, endOpacity2 = _d.endOpacity2, startFillColor3 = _d.startFillColor3, endFillColor3 = _d.endFillColor3, startOpacity3 = _d.startOpacity3, endOpacity3 = _d.endOpacity3, startFillColor4 = _d.startFillColor4, endFillColor4 = _d.endFillColor4, startOpacity4 = _d.startOpacity4, endOpacity4 = _d.endOpacity4, startFillColor5 = _d.startFillColor5, endFillColor5 = _d.endFillColor5, startOpacity5 = _d.startOpacity5, endOpacity5 = _d.endOpacity5, arrowStrokeWidth1 = _d.arrowStrokeWidth1, arrowStrokeColor1 = _d.arrowStrokeColor1, arrowFillColor1 = _d.arrowFillColor1, arrowStrokeWidth2 = _d.arrowStrokeWidth2, arrowStrokeColor2 = _d.arrowStrokeColor2, arrowFillColor2 = _d.arrowFillColor2, arrowStrokeWidth3 = _d.arrowStrokeWidth3, arrowStrokeColor3 = _d.arrowStrokeColor3, arrowFillColor3 = _d.arrowFillColor3, arrowStrokeWidth4 = _d.arrowStrokeWidth4, arrowStrokeColor4 = _d.arrowStrokeColor4, arrowFillColor4 = _d.arrowFillColor4, arrowStrokeWidth5 = _d.arrowStrokeWidth5, arrowStrokeColor5 = _d.arrowStrokeColor5, arrowFillColor5 = _d.arrowFillColor5, arrowStrokeWidthsFromSet = _d.arrowStrokeWidthsFromSet, arrowStrokeColorsFromSet = _d.arrowStrokeColorsFromSet, arrowFillColorsFromSet = _d.arrowFillColorsFromSet, secondaryLineConfig = _d.secondaryLineConfig, gradientDirection = _d.gradientDirection, stepHeight = _d.stepHeight, noOfSectionsBelowXAxis = _d.noOfSectionsBelowXAxis, xAxisTextNumberOfLines = _d.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = _d.xAxisLabelsVerticalShift, pointerConfig = _d.pointerConfig, pointerHeight = _d.pointerHeight, pointerWidth = _d.pointerWidth, pointerRadius = _d.pointerRadius, pointerColor = _d.pointerColor, pointerComponent = _d.pointerComponent, showPointerStrip = _d.showPointerStrip, pointerStripHeight = _d.pointerStripHeight, pointerStripWidth = _d.pointerStripWidth, pointerStripColor = _d.pointerStripColor, pointerStripUptoDataPoint = _d.pointerStripUptoDataPoint, pointerLabelComponent = _d.pointerLabelComponent, stripOverPointer = _d.stripOverPointer, shiftPointerLabelX = _d.shiftPointerLabelX, shiftPointerLabelY = _d.shiftPointerLabelY, pointerLabelWidth = _d.pointerLabelWidth, pointerLabelHeight = _d.pointerLabelHeight, autoAdjustPointerLabelPosition = _d.autoAdjustPointerLabelPosition, pointerVanishDelay = _d.pointerVanishDelay, activatePointersOnLongPress = _d.activatePointersOnLongPress, activatePointersInstantlyOnTouch = _d.activatePointersInstantlyOnTouch, activatePointersDelay = _d.activatePointersDelay, persistPointer = _d.persistPointer, resetPointerIndexOnRelease = _d.resetPointerIndexOnRelease, hidePointers = _d.hidePointers, hidePointer1 = _d.hidePointer1, hidePointer2 = _d.hidePointer2, hidePointer3 = _d.hidePointer3, hidePointer4 = _d.hidePointer4, hidePointer5 = _d.hidePointer5, cumulativeSpacing1 = _d.cumulativeSpacing1, cumulativeSpacing2 = _d.cumulativeSpacing2, cumulativeSpacing3 = _d.cumulativeSpacing3, cumulativeSpacing4 = _d.cumulativeSpacing4, cumulativeSpacing5 = _d.cumulativeSpacing5, cumulativeSpacingSecondary = _d.cumulativeSpacingSecondary, cumulativeSpacingForSet = _d.cumulativeSpacingForSet, hideSecondaryPointer = _d.hideSecondaryPointer, hidePointerDataPointForMissingValues = _d.hidePointerDataPointForMissingValues, pointerEvents = _d.pointerEvents, focusEnabled = _d.focusEnabled, showDataPointOnFocus = _d.showDataPointOnFocus, showStripOnFocus = _d.showStripOnFocus, stripOverDataPoints = _d.stripOverDataPoints, showTextOnFocus = _d.showTextOnFocus, showDataPointLabelOnFocus = _d.showDataPointLabelOnFocus, stripHeight = _d.stripHeight, stripWidth = _d.stripWidth, stripColor = _d.stripColor, stripOpacity = _d.stripOpacity, stripStrokeDashArray = _d.stripStrokeDashArray, unFocusOnPressOut = _d.unFocusOnPressOut, delayBeforeUnFocus = _d.delayBeforeUnFocus, _e = _d.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _e === void 0 ? 0 : _e, lineGradient = _d.lineGradient, lineGradientDirection = _d.lineGradientDirection, lineGradientStartColor = _d.lineGradientStartColor, lineGradientEndColor = _d.lineGradientEndColor, barAndLineChartsWrapperProps = _d.barAndLineChartsWrapperProps, areaChart = _d.areaChart, mostNegativeValue = _d.mostNegativeValue, strips = _d.strips, lastLineNumber = _d.lastLineNumber, focusTogether = _d.focusTogether, focusProximity = _d.focusProximity;
+    var svgHeight = containerHeightIncludingBelowXAxis +
+        ((_c = props.overflowBottom) !== null && _c !== void 0 ? _c : dataPointsRadius1);
     var secondaryXAxis = props.secondaryXAxis, intersectionAreaConfig = props.intersectionAreaConfig;
     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);
@@ -199,7 +201,7 @@ export var LineChart = function (props) {
     ]);
     var svgWrapperViewStyle = {
         position: 'absolute',
-        bottom: 62 + xAxisLabelsVerticalShift + labelsExtraHeight - xAxisThickness,
+        bottom: 61 + xAxisLabelsVerticalShift + labelsExtraHeight - xAxisThickness,
         left: 0,
         zIndex: 1,
         transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
@@ -257,18 +259,19 @@ export var LineChart = function (props) {
             props.onFocus(item, index);
         }
     };
+    var _f = __read(useState(-1), 2), selectedLineNumber = _f[0], setSelectedLineNumber = _f[1];
     var renderDataPoints = function (hideDataPoints, dataForRender, originalDataFromProps, dataPtsShape, dataPtsWidth, dataPtsHeight, dataPtsColor, dataPtsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key) {
         var getYOrSecondaryY = isSecondary ? getSecondaryY : getY;
         return dataForRender.map(function (item, index) {
-            var _a;
-            var _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e;
             if (index < startIndex || index > endIndex)
                 return null;
             if (item.hideDataPoint) {
                 return null;
             }
             var dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, text, customDataPoint, dataPointLabelComponent;
-            if (index === selectedIndex) {
+            if (index === selectedIndex &&
+                (focusTogether || key === selectedLineNumber)) {
                 dataPointsShape =
                     item.focusedDataPointShape ||
                         props.focusedDataPointShape ||
@@ -289,7 +292,7 @@ export var LineChart = function (props) {
                         props.focusedDataPointColor ||
                         LineDefaults.focusedDataPointColor;
                 dataPointsRadius =
-                    (_d = (_c = (_b = item.focusedDataPointRadius) !== null && _b !== void 0 ? _b : props.focusedDataPointRadius) !== null && _c !== void 0 ? _c : item.dataPointRadius) !== null && _d !== void 0 ? _d : dataPtsRadius;
+                    (_c = (_b = (_a = item.focusedDataPointRadius) !== null && _a !== void 0 ? _a : props.focusedDataPointRadius) !== null && _b !== void 0 ? _b : item.dataPointRadius) !== null && _c !== void 0 ? _c : dataPtsRadius;
                 if (showTextOnFocus) {
                     text = item.dataPointText;
                 }
@@ -306,7 +309,7 @@ export var LineChart = function (props) {
                 dataPointsWidth = item.dataPointWidth || dataPtsWidth;
                 dataPointsHeight = item.dataPointHeight || dataPtsHeight;
                 dataPointsColor = item.dataPointColor || dataPtsColor;
-                dataPointsRadius = (_e = item.dataPointRadius) !== null && _e !== void 0 ? _e : dataPtsRadius;
+                dataPointsRadius = (_d = item.dataPointRadius) !== null && _d !== void 0 ? _d : dataPtsRadius;
                 if (showTextOnFocus) {
                     text = '';
                 }
@@ -316,21 +319,82 @@ export var LineChart = function (props) {
             if (showValuesAsDataPointsText) {
                 text = originalDataFromProps[index].value;
             }
-            var position = I18nManager.isRTL ? 'right' : 'left';
-            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, 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(spacingArray, index) - dataPointsWidth / 2, y: getYOrSecondaryY(item.value) - dataPointsHeight / 2, width: dataPointsWidth, height: dataPointsHeight, fill: showDataPointOnFocus
+            return (_jsxs(Fragment, { children: [focusEnabled ? (_jsx(_Fragment, { children: key === lastLineNumber - 1 ? (_jsx(Rect, { x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight - 0, fill: 'none', onPressIn: function (evt) {
+                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                                var locationY = evt.nativeEvent.locationY; // Note that we have another property named pageY which can be useful
+                                var lineNumber = 0;
+                                if (dataSet) {
+                                    var minDistance_1 = Infinity;
+                                    dataSet.forEach(function (setItem, setIndex) {
+                                        var _a;
+                                        var distance = Math.abs(getY((_a = setItem.data[index]) === null || _a === void 0 ? void 0 : _a.value) - locationY);
+                                        if (distance < minDistance_1) {
+                                            minDistance_1 = distance;
+                                            lineNumber = setIndex + 1;
+                                        }
+                                    });
+                                }
+                                else {
+                                    var distance1 = void 0, distance2 = void 0, distance3 = void 0, distance4 = void 0, distance5 = void 0, distance6 = void 0;
+                                    var minDistance = Infinity;
+                                    if (typeof ((_a = data[index]) === null || _a === void 0 ? void 0 : _a.value) === 'number') {
+                                        distance1 = Math.abs(getY((_b = data[index]) === null || _b === void 0 ? void 0 : _b.value) - locationY);
+                                        minDistance = distance1;
+                                        if (distance1 < focusProximity)
+                                            lineNumber = 1;
+                                    }
+                                    if (typeof ((_c = data2[index]) === null || _c === void 0 ? void 0 : _c.value) === 'number') {
+                                        distance2 = Math.abs(getY((_d = data2[index]) === null || _d === void 0 ? void 0 : _d.value) - locationY);
+                                        if (minDistance > distance2 &&
+                                            distance2 < focusProximity) {
+                                            minDistance = distance2;
+                                            lineNumber = 2;
+                                        }
+                                    }
+                                    if (typeof ((_e = data3[index]) === null || _e === void 0 ? void 0 : _e.value) === 'number') {
+                                        distance3 = Math.abs(getY((_f = data3[index]) === null || _f === void 0 ? void 0 : _f.value) - locationY);
+                                        if (minDistance > distance3 &&
+                                            distance3 < focusProximity) {
+                                            minDistance = distance3;
+                                            lineNumber = 3;
+                                        }
+                                    }
+                                    if (typeof ((_g = data4[index]) === null || _g === void 0 ? void 0 : _g.value) === 'number') {
+                                        distance4 = Math.abs(getY((_h = data4[index]) === null || _h === void 0 ? void 0 : _h.value) - locationY);
+                                        if (minDistance > distance4 &&
+                                            distance4 < focusProximity) {
+                                            minDistance = distance4;
+                                            lineNumber = 4;
+                                        }
+                                    }
+                                    if (typeof ((_j = data5[index]) === null || _j === void 0 ? void 0 : _j.value) === 'number') {
+                                        distance5 = Math.abs(getY((_k = data5[index]) === null || _k === void 0 ? void 0 : _k.value) - locationY);
+                                        if (minDistance > distance5 &&
+                                            distance5 < focusProximity) {
+                                            minDistance = distance5;
+                                            lineNumber = 5;
+                                        }
+                                    }
+                                    if (typeof ((_l = secondaryData[index]) === null || _l === void 0 ? void 0 : _l.value) === 'number') {
+                                        distance6 = Math.abs(getY((_m = secondaryData[index]) === null || _m === void 0 ? void 0 : _m.value) - locationY);
+                                        if (minDistance > distance6 &&
+                                            distance6 < focusProximity) {
+                                            minDistance = distance6;
+                                            lineNumber = 6666;
+                                        }
+                                    }
+                                }
+                                setSelectedLineNumber(lineNumber - 1);
+                                if (lineNumber) {
+                                    onStripPress(item, index);
+                                }
+                            }, onPressOut: function () {
+                                if (unFocusOnPressOut) {
+                                    setTimeout(function () { return setSelectedIndex(-1); }, delayBeforeUnFocus);
+                                }
+                            } })) : null })) : null, hideDataPoints ? null : (_jsxs(_Fragment, { children: [customDataPoint ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: initialSpacing -
+                                    dataPointsWidth / 2 +
+                                    ((_e = spacingArray[index - 1]) !== null && _e !== void 0 ? _e : 0), y: getYOrSecondaryY(item.value) - dataPointsHeight / 2, children: customDataPoint(item, index) })) : null, dataPointsShape === 'rectangular' ? (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(Rect, { x: getX(spacingArray, index) - dataPointsWidth / 2, y: getYOrSecondaryY(item.value) - dataPointsHeight / 2, width: dataPointsWidth, height: dataPointsHeight, fill: showDataPointOnFocus
                                         ? index === selectedIndex
                                             ? dataPointsColor
                                             : 'none'
@@ -372,7 +436,8 @@ export var LineChart = function (props) {
                                             spacing * index,
                                     },
                                 ], children: showDataPointLabelOnFocus
-                                    ? index === selectedIndex
+                                    ? index === selectedIndex &&
+                                        (focusTogether || key == selectedLineNumber)
                                         ? dataPointLabelComponent()
                                         : null
                                     : dataPointLabelComponent() })) : null) : text || item.dataPointText ? (!showTextOnFocus || index === selectedIndex ? (_jsx(CanvasText, { fill: item.textColor || textColor, fontSize: item.textFontSize || textFontSize, x: getX(spacingArray, index) -
@@ -389,9 +454,13 @@ export var LineChart = function (props) {
             var _a, _b, _c;
             if (item.showVerticalLine) {
                 var x = getX(spacingArray, 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 (_jsx(Line, { x1: x, y1: extendedContainerHeight, x2: x, y2: item.verticalLineHeight
+                        ? extendedContainerHeight - item.verticalLineHeight
+                        : props.verticalLinesHeight
+                            ? extendedContainerHeight - props.verticalLinesHeight
+                            : ((_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;
         });
@@ -436,8 +505,8 @@ export var LineChart = function (props) {
             return;
         if (lineNumber === 5 && hidePointer5)
             return;
-        // 6 is for secondaryData
-        if (lineNumber === 6 && hideSecondaryPointer)
+        // 6666 is for secondaryData
+        if (lineNumber === 6666 && hideSecondaryPointer)
             return;
         var pointerItemLocal, pointerYLocal, pointerColorLocal;
         switch (lineNumber) {
@@ -466,7 +535,7 @@ export var LineChart = function (props) {
                 pointerYLocal = pointerY5;
                 pointerColorLocal = (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.pointer5Color) || pointerColor;
                 break;
-            case 6:
+            case 6666:
                 pointerItemLocal = secondaryPointerItem;
                 pointerYLocal = secondaryPointerY;
                 pointerColorLocal =
@@ -563,8 +632,28 @@ export var LineChart = function (props) {
         var _a;
         return (_jsx(View, { style: [svgWrapperViewStyle, { width: totalWidth }], children: _jsxs(Svg, { children: [_jsx(Path, { id: "path1", d: fillPoints, fill: "none", stroke: 'none' }), _jsx(Path, { id: "path2", d: fillPoints2, fill: "none", stroke: 'none' }), _jsx(ClipPath, { id: "clip", children: _jsx(Use, { href: "#path1" }) }), _jsx(Path, { d: fillPoints2, clipPath: "url(#clip)", fill: (_a = intersectionAreaConfig === null || intersectionAreaConfig === void 0 ? void 0 : intersectionAreaConfig.fillColor) !== null && _a !== void 0 ? _a : 'white' }), _jsx(Path, { d: points, stroke: color1, strokeWidth: thickness1 !== null && thickness1 !== void 0 ? thickness1 : thickness, fill: 'none' })] }) }));
     };
+    var renderDataPointsForEachLine = function () {
+        if (dataSet && pointsFromSet.length) {
+            return (_jsx(_Fragment, { children: dataSet.map(function (set, index) {
+                    var _a;
+                    var hideDataPoints = set.hideDataPoints, data = set.data, dataPointsShape = set.dataPointsShape, dataPointsWidth = set.dataPointsWidth, dataPointsHeight = set.dataPointsHeight, dataPointsColor = set.dataPointsColor, dataPointsRadius = set.dataPointsRadius, textColor = set.textColor, textFontSize = set.textFontSize, startIndex = set.startIndex, endIndex = set.endIndex, isSecondary = set.isSecondary;
+                    return renderDataPoints(hideDataPoints !== null && hideDataPoints !== void 0 ? hideDataPoints : hideDataPoints1, data, adjustToOffset(data, -((_a = props.yAxisOffset) !== null && _a !== void 0 ? _a : 0)), dataPointsShape !== null && dataPointsShape !== void 0 ? dataPointsShape : dataPointsShape1, dataPointsWidth !== null && dataPointsWidth !== void 0 ? dataPointsWidth : dataPointsWidth1, dataPointsHeight !== null && dataPointsHeight !== void 0 ? dataPointsHeight : dataPointsHeight1, dataPointsColor !== null && dataPointsColor !== void 0 ? dataPointsColor : dataPointsColor1, dataPointsRadius !== null && dataPointsRadius !== void 0 ? dataPointsRadius : dataPointsRadius1, textColor !== null && textColor !== void 0 ? textColor : textColor1, textFontSize !== null && textFontSize !== void 0 ? textFontSize : textFontSize1, startIndex !== null && startIndex !== void 0 ? startIndex : 0, endIndex !== null && endIndex !== void 0 ? endIndex : set.data.length - 1, isSecondary, showValuesAsDataPointsText, cumulativeSpacingForSet[index], index);
+                }) }));
+        }
+        return (_jsxs(_Fragment, { children: [renderDataPoints(hideDataPoints1, data, props.data, dataPointsShape1, dataPointsWidth1, dataPointsHeight1, dataPointsColor1, dataPointsRadius1, textColor1, textFontSize1, startIndex1, endIndex1, false, showValuesAsDataPointsText, cumulativeSpacing1, 0), points2
+                    ? renderDataPoints(hideDataPoints2, data2, props.data2, dataPointsShape2, dataPointsWidth2, dataPointsHeight2, dataPointsColor2, dataPointsRadius2, textColor2, textFontSize2, startIndex2, endIndex2, false, showValuesAsDataPointsText, cumulativeSpacing2, 1)
+                    : null, points3
+                    ? renderDataPoints(hideDataPoints3, data3, props.data3, dataPointsShape3, dataPointsWidth3, dataPointsHeight3, dataPointsColor3, dataPointsRadius3, textColor3, textFontSize3, startIndex3, endIndex3, false, showValuesAsDataPointsText, cumulativeSpacing3, 2)
+                    : null, points4
+                    ? renderDataPoints(hideDataPoints4, data4, props.data4, dataPointsShape4, dataPointsWidth4, dataPointsHeight4, dataPointsColor4, dataPointsRadius4, textColor4, textFontSize4, startIndex4, endIndex4, false, showValuesAsDataPointsText, cumulativeSpacing4, 3)
+                    : null, points5
+                    ? renderDataPoints(hideDataPoints5, data5, props.data5, dataPointsShape5, dataPointsWidth5, dataPointsHeight5, dataPointsColor5, dataPointsRadius5, textColor5, textFontSize5, startIndex5, endIndex5, false, showValuesAsDataPointsText, cumulativeSpacing5, 4)
+                    : null, secondaryPoints
+                    ? 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, cumulativeSpacingSecondary, 6666)
+                    : null] }));
+    };
     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, spacingArray) {
-        var _a, _b, _c;
+        var _a, _b;
         if (!points)
             return null;
         var isCurved = points.includes('C') || points.includes('Q');
@@ -594,8 +683,7 @@ export var LineChart = function (props) {
             typeof strokeDashArray[1] === 'number') {
             lineSvgPropsOuter.strokeDasharray = strokeDashArray;
         }
-        return (_jsxs(Svg, { height: containerHeightIncludingBelowXAxis +
-                ((_b = props.overflowBottom) !== null && _b !== void 0 ? _b : dataPointsRadius1), 
+        return (_jsxs(Svg, { height: svgHeight, 
             // width={widthValue}
             onPress: props.onBackgroundPress, children: [lineGradient && getLineGradientComponent(), points.includes(SEGMENT_START) || points.includes(RANGE_ENTER) ? (ar.map(function (item, index) {
                     var lineSvgProps = {
@@ -621,9 +709,13 @@ export var LineChart = function (props) {
                         ? "url(#".concat(props.areaGradientId, ")")
                         : "url(#Gradient)", stroke: 'none', strokeWidth: currentLineThickness || thickness })) : (_jsx(Path, { onPress: props.onChartAreaPress, d: fillPoints, fill: props.areaGradientId
                         ? "url(#".concat(props.areaGradientId, ")")
-                        : "url(#Gradient)", stroke: 'none', strokeWidth: currentLineThickness || thickness }))) : null, renderSpecificVerticalLines(data, cumulativeSpacing1), renderSpecificVerticalLines(data2, cumulativeSpacing2), renderSpecificVerticalLines(data3, cumulativeSpacing3), renderSpecificVerticalLines(data4, cumulativeSpacing4), renderSpecificVerticalLines(data5, cumulativeSpacing5), (_c = dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set, index) {
+                        : "url(#Gradient)", stroke: 'none', strokeWidth: currentLineThickness || thickness }))) : null, renderSpecificVerticalLines(data, cumulativeSpacing1), renderSpecificVerticalLines(data2, cumulativeSpacing2), renderSpecificVerticalLines(data3, cumulativeSpacing3), renderSpecificVerticalLines(data4, cumulativeSpacing4), renderSpecificVerticalLines(data5, cumulativeSpacing5), (_b = dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set, index) {
                     return renderSpecificVerticalLines(set === null || set === void 0 ? void 0 : set.data, cumulativeSpacingForSet[index]);
-                })) !== null && _c !== void 0 ? _c : null, renderDataPoints(hideDataPoints, data, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key), showArrow && (_jsx(Path, { d: arrowPoints, fill: arrowFillColor, stroke: arrowStrokeColor, strokeWidth: arrowStrokeWidth }))] }));
+                })) !== null && _b !== void 0 ? _b : null, isAnimated && !renderDataPointsAfterAnimationEnds // in this condition onPress won't work properly in case of multi-line, so it's suggested to use either renderDataPointsAfterAnimationEnds prop if you want to use onPress for data points
+                    ? renderDataPoints(hideDataPoints, data, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key)
+                    : key === lastLineNumber - 1
+                        ? renderDataPointsForEachLine()
+                        : null, showArrow && (_jsx(Path, { d: arrowPoints, fill: arrowFillColor, stroke: arrowStrokeColor, strokeWidth: arrowStrokeWidth }))] }));
     };
     // const getClosestValueFromSpacingArray = (spacingArray:number[],x:number):number => {
     //   let dif=0,prevDif=0,i;
@@ -641,23 +733,25 @@ export var LineChart = function (props) {
         factor = Math.round(factor);
         factor = Math.min(factor, (data0 !== null && data0 !== void 0 ? data0 : data).length - 1);
         factor = Math.max(factor, 0);
-        var z = getX(cumulativeSpacing1, 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 (!item.hidePointer) {
+            var z = getX((dataSet === null || dataSet === void 0 ? void 0 : dataSet.length) ? cumulativeSpacingForSet[0] : cumulativeSpacing1, factor) -
+                (pointerRadius || pointerWidth / 2) -
+                1;
+            setPointerX(Math.max(0.1, z)); // 0.1 is to avoid pointer going out of the chart, See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/925
+            setPointerIndex(factor);
+            y =
+                containerHeight -
+                    (item.value * containerHeight) / maxValue -
+                    (pointerRadius || pointerHeight / 2) +
+                    10;
+            setPointerY(y);
+            setPointerItem(item);
+        }
         if (data2 && data2.length) {
             item = data2[factor];
-            if (item) {
+            if (item && !item.hidePointer) {
                 y =
                     containerHeight -
                         (item.value * containerHeight) / maxValue -
@@ -669,7 +763,7 @@ export var LineChart = function (props) {
         }
         if (data3 && data3.length) {
             item = data3[factor];
-            if (item) {
+            if (item && !item.hidePointer) {
                 y =
                     containerHeight -
                         (item.value * containerHeight) / maxValue -
@@ -681,7 +775,7 @@ export var LineChart = function (props) {
         }
         if (data4 && data4.length) {
             item = data4[factor];
-            if (item) {
+            if (item && !item.hidePointer) {
                 y =
                     containerHeight -
                         (item.value * containerHeight) / maxValue -
@@ -693,7 +787,7 @@ export var LineChart = function (props) {
         }
         if (data5 && data5.length) {
             item = data5[factor];
-            if (item) {
+            if (item && !item.hidePointer) {
                 y =
                     containerHeight -
                         (item.value * containerHeight) / maxValue -
@@ -742,7 +836,9 @@ export var LineChart = function (props) {
         }
     };
     var renderLine = function (containerHeightIncludingBelowXAxis, 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, spacingArray, key) {
-        return (_jsx(View, { onMoveShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onResponderGrant: function (evt) {
+        return (_jsx(View, { onMoveShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onStartShouldSetResponder: function (evt) {
+                return pointerConfig && activatePointersInstantlyOnTouch ? true : false;
+            }, onResponderGrant: function (evt) {
                 if (!pointerConfig)
                     return;
                 setResponderStartTime(evt.timeStamp);
@@ -771,9 +867,9 @@ export var LineChart = function (props) {
             //   console.log('evt...reject.......',evt);
             // }}
             onResponderEnd: function (evt) {
-                // console.log('evt...end.......',evt);
                 setResponderStartTime(0);
-                // setPointerIndex(-1);
+                if (resetPointerIndexOnRelease)
+                    setPointerIndex(-1);
                 setResponderActive(false);
                 if (!persistPointer)
                     setTimeout(function () { return setPointerX(0); }, pointerVanishDelay);
@@ -796,7 +892,9 @@ export var LineChart = function (props) {
             ], 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, spacingArray) }, key !== null && key !== void 0 ? key : 0));
     };
     var renderAnimatedLine = function (containerHeightIncludingBelowXAxis, 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, spacingArray, key) {
-        return (_jsx(Animated.View, { onStartShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onMoveShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onResponderGrant: function (evt) {
+        return (_jsx(Animated.View, { onMoveShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onStartShouldSetResponder: function (evt) {
+                return pointerConfig && activatePointersInstantlyOnTouch ? true : false;
+            }, onResponderGrant: function (evt) {
                 if (!pointerConfig)
                     return;
                 setResponderStartTime(evt.timeStamp);
@@ -827,7 +925,8 @@ export var LineChart = function (props) {
             onResponderEnd: function (evt) {
                 // console.log('evt...end.......',evt);
                 setResponderStartTime(0);
-                // setPointerIndex(-1);
+                if (resetPointerIndexOnRelease)
+                    setPointerIndex(-1);
                 setResponderActive(false);
                 if (!persistPointer)
                     setTimeout(function () { return setPointerX(0); }, pointerVanishDelay);
@@ -861,7 +960,7 @@ export var LineChart = function (props) {
         },
     };
     var renderStrips = function (item, index, ind) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (item.showStrip || index === selectedIndex) {
             var currentStripHeight = (_a = item.stripHeight) !== null && _a !== void 0 ? _a : stripHeight;
             var currentStripWidth = (_b = item.stripWidth) !== null && _b !== void 0 ? _b : stripWidth;
@@ -873,9 +972,9 @@ export var LineChart = function (props) {
                 : containerHeight -
                     ((_f = item.dataPointHeight) !== null && _f !== void 0 ? _f : dataPointsHeight1) / 2 +
                     14 -
-                    (item.value * containerHeight) / maxValue;
+                    (((_g = item.value) !== null && _g !== void 0 ? _g : 0) * containerHeight) / maxValue;
             var actualStripHeight = currentStripHeight ||
-                (item.value * containerHeight) / maxValue - 2 + overflowTop;
+                (((_h = item.value) !== null && _h !== void 0 ? _h : 0) * containerHeight) / maxValue - 2 + overflowTop;
             return (_jsx(Line, { x1: initialSpacing + spacing * index, y1: y1, x2: initialSpacing + spacing * index, y2: y1 + actualStripHeight + 2, strokeWidth: currentStripWidth, stroke: currentStripColor, strokeDasharray: currentStripStrokeDashArray, opacity: currentStripOpacity }, 'strip' + (ind * 10000 + index)));
         }
         return null;
@@ -933,8 +1032,8 @@ export var LineChart = function (props) {
                         ? renderAnimatedLine(containerHeightIncludingBelowXAxis, zIndex1, points, widthValue, 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, cumulativeSpacing1, 0)
                         : renderLine(containerHeightIncludingBelowXAxis, 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, cumulativeSpacing1, 0), secondaryPoints
                     ? isAnimated
-                        ? renderAnimatedLine(containerHeightIncludingBelowXAxis, secondaryLineConfig.zIndex, secondaryPoints, widthValue, secondaryLineConfig.thickness, secondaryLineConfig.color, secondaryFillPoints, secondaryLineConfig.startFillColor, secondaryLineConfig.endFillColor, secondaryLineConfig.startOpacity, secondaryLineConfig.endOpacity, secondaryLineConfig.strokeDashArray, secondaryLineConfig.showArrow, secondaryArrowPoints, (_h = secondaryLineConfig.arrowConfig) === null || _h === void 0 ? void 0 : _h.strokeWidth, (_j = secondaryLineConfig.arrowConfig) === null || _j === void 0 ? void 0 : _j.strokeColor, (_k = secondaryLineConfig.arrowConfig) === null || _k === void 0 ? void 0 : _k.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, cumulativeSpacingSecondary, 6)
-                        : renderLine(containerHeightIncludingBelowXAxis, secondaryLineConfig.zIndex, secondaryPoints, secondaryLineConfig.thickness, secondaryLineConfig.color, secondaryFillPoints, secondaryLineConfig.startFillColor, secondaryLineConfig.endFillColor, secondaryLineConfig.startOpacity, secondaryLineConfig.endOpacity, secondaryLineConfig.strokeDashArray, secondaryLineConfig.showArrow, secondaryArrowPoints, (_l = secondaryLineConfig.arrowConfig) === null || _l === void 0 ? void 0 : _l.strokeWidth, (_m = secondaryLineConfig.arrowConfig) === null || _m === void 0 ? void 0 : _m.strokeColor, (_o = secondaryLineConfig.arrowConfig) === null || _o === void 0 ? void 0 : _o.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, cumulativeSpacingSecondary, 6)
+                        ? renderAnimatedLine(containerHeightIncludingBelowXAxis, secondaryLineConfig.zIndex, secondaryPoints, widthValue, secondaryLineConfig.thickness, secondaryLineConfig.color, secondaryFillPoints, secondaryLineConfig.startFillColor, secondaryLineConfig.endFillColor, secondaryLineConfig.startOpacity, secondaryLineConfig.endOpacity, secondaryLineConfig.strokeDashArray, secondaryLineConfig.showArrow, secondaryArrowPoints, (_h = secondaryLineConfig.arrowConfig) === null || _h === void 0 ? void 0 : _h.strokeWidth, (_j = secondaryLineConfig.arrowConfig) === null || _j === void 0 ? void 0 : _j.strokeColor, (_k = secondaryLineConfig.arrowConfig) === null || _k === void 0 ? void 0 : _k.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, cumulativeSpacingSecondary, 6666)
+                        : renderLine(containerHeightIncludingBelowXAxis, secondaryLineConfig.zIndex, secondaryPoints, secondaryLineConfig.thickness, secondaryLineConfig.color, secondaryFillPoints, secondaryLineConfig.startFillColor, secondaryLineConfig.endFillColor, secondaryLineConfig.startOpacity, secondaryLineConfig.endOpacity, secondaryLineConfig.strokeDashArray, secondaryLineConfig.showArrow, secondaryArrowPoints, (_l = secondaryLineConfig.arrowConfig) === null || _l === void 0 ? void 0 : _l.strokeWidth, (_m = secondaryLineConfig.arrowConfig) === null || _m === void 0 ? void 0 : _m.strokeColor, (_o = secondaryLineConfig.arrowConfig) === null || _o === void 0 ? void 0 : _o.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, cumulativeSpacingSecondary, 6666)
                     : null, points2
                     ? isAnimated
                         ? renderAnimatedLine(containerHeightIncludingBelowXAxis, zIndex2, points2, widthValue2, 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, cumulativeSpacing2, 1)
@@ -962,7 +1061,7 @@ export var LineChart = function (props) {
                         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) {
+                        _jsxs(_Fragment, { children: [renderPointer(1), points2 ? renderPointer(2) : null, points3 ? renderPointer(3) : null, points4 ? renderPointer(4) : null, points5 ? renderPointer(5) : null, secondaryPoints ? renderPointer(6666) : 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;
@@ -992,5 +1091,5 @@ export var LineChart = function (props) {
                             pointerItem5,
                         ].filter(function (item) { return !!item; }), pointerIndex) })) : null] }));
     };
-    return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { dataSet: props.dataSet, scrollRef: scrollRef, animatedWidth: widthValue, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps })));
+    return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { dataSet: dataSet, scrollRef: scrollRef, animatedWidth: widthValue, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps })));
 };

package/dist/PieChart/index.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Platform, View } from 'react-native';
 import { PieChartMain } from './main';
-import { pieColors, usePieChart } from 'gifted-charts-core';
+import { usePieChart } from 'gifted-charts-core';
 export var PieChart = function (props) {
     var _a = usePieChart(props), radius = _a.radius, extraRadius = _a.extraRadius, selectedIndex = _a.selectedIndex, setSelectedIndex = _a.setSelectedIndex, startAngle = _a.startAngle, total = _a.total, donut = _a.donut, isThreeD = _a.isThreeD, semiCircle = _a.semiCircle, inwardExtraLengthForFocused = _a.inwardExtraLengthForFocused, canvasWidth = _a.canvasWidth, canvasHeight = _a.canvasHeight, innerRadius = _a.innerRadius, innerCircleColor = _a.innerCircleColor, innerCircleBorderWidth = _a.innerCircleBorderWidth, innerCircleBorderColor = _a.innerCircleBorderColor, shiftInnerCenterX = _a.shiftInnerCenterX, shiftInnerCenterY = _a.shiftInnerCenterY, tiltAngle = _a.tiltAngle, isDataShifted = _a.isDataShifted, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical;
     var renderInnerCircle = function (innerRadius, innerCircleBorderWidth) {
@@ -79,17 +79,7 @@ export var PieChart = function (props) {
                     left: -extraRadius,
                     zIndex: Platform.OS === 'web' ? -1 : 0, // was not getting displayed in web (using Expo)
                 }, children: _jsx(PieChartMain, __assign({}, props, { data: [
-                        {
-                            value: props.data[selectedIndex].value,
-                            text: props.data[selectedIndex].text,
-                            color: props.data[selectedIndex].color ||
-                                pieColors[selectedIndex % 9],
-                            strokeColor: props.data[selectedIndex].strokeColor || undefined,
-                            strokeWidth: props.data[selectedIndex].strokeWidth || undefined,
-                            gradientCenterColor: props.data[selectedIndex].gradientCenterColor || undefined,
-                            shiftTextX: props.data[selectedIndex].shiftTextX || undefined,
-                            shiftTextY: props.data[selectedIndex].shiftTextY || undefined,
-                        },
+                        __assign({}, props.data[selectedIndex]),
                         {
                             value: total - props.data[selectedIndex].value,
                             // onPress: () => alert('black'),

package/dist/index.d.ts

@@ -4,4 +4,4 @@ export { PieChartPro } from './PieChartPro';
 export { LineChart } from './LineChart';
 export { LineChartBicolor } from './LineChart/LineChartBicolor';
 export { PopulationPyramid } from './PopulationPyramid';
-export { type barDataItem, type stackDataItem, type BarChartPropsType, type StackedBarChartPropsType, type pieDataItem, type PieChartPropsType, type lineDataItem, type bicolorLineDataItem, type LineChartPropsType, type LineChartBicolorPropsType, type popnPyramidDataItem, type PopulationPyramidPropsType, chartTypes, ruleTypes, yAxisSides, EdgePosition, type DataSet, type Linecap } from 'gifted-charts-core';
+export { type barDataItem, type barDataItemNullSafe, type stackDataItem, type BarChartPropsType, type StackedBarChartPropsType, type pieDataItem, type PieChartPropsType, type lineDataItem, type lineDataItemNullSafe, type bicolorLineDataItem, type LineChartPropsType, type LineChartBicolorPropsType, type popnPyramidDataItem, type PopulationPyramidPropsType, chartTypes, ruleTypes, yAxisSides, EdgePosition, type DataSet, type DataSetNullSafe, type Linecap, } from 'gifted-charts-core';

package/dist/index.js

@@ -4,4 +4,4 @@ export { PieChartPro } from './PieChartPro';
 export { LineChart } from './LineChart';
 export { LineChartBicolor } from './LineChart/LineChartBicolor';
 export { PopulationPyramid } from './PopulationPyramid';
-export { chartTypes, ruleTypes, yAxisSides, EdgePosition } from 'gifted-charts-core';
+export { chartTypes, ruleTypes, yAxisSides, EdgePosition, } from 'gifted-charts-core';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.47",
+  "version": "1.4.49",
   "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": [
@@ -9,6 +9,7 @@
   "scripts": {
     "android": "react-native run-android",
     "build": "rm -rf ./dist && tsc -p . && ./build.sh",
+    "prepare": "npm run build",
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
@@ -25,7 +26,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "0.1.47"
+    "gifted-charts-core": "0.1.50"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",