react-native-gifted-charts 1.4.55 → 1.4.57

package/README.md

@@ -31,7 +31,7 @@ The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Populati
 The web counterpart of this library is public now. Try out our new reactJS library- [react-gifted-charts](https://www.npmjs.com/package/react-gifted-charts) <br />
 The exact same piece of code that you write to render charts in react-native, can be used to render charts in reactJS using this library!
 
-## [Release notes 🎉](release-notes/release-notes.md)
+## [Release notes (Changelog) 🎉](release-notes/release-notes.md)
 
 See the **[release changes by version here.](release-notes/release-notes.md)**
 

package/dist/BarChart/RenderBars.js

@@ -17,7 +17,7 @@ import { getPropsForAnimated2DWithGradient, useRenderBars, } from 'gifted-charts
 import Tooltip from '../Components/BarSpecificComponents/tooltip';
 var RenderBars = function (props) {
     var _a, _b;
-    var item = props.item, index = props.index, containerHeight = props.containerHeight, maxValue = props.maxValue, minHeight = props.minHeight, spacing = props.spacing, 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, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, horizontal = props.horizontal, rtl = props.rtl, pointerConfig = props.pointerConfig, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, barWidth = props.barWidth, _c = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _c === void 0 ? 0 : _c, secondaryXAxis = props.secondaryXAxis, secondaryNoOfSectionsBelowXAxis = props.secondaryNoOfSectionsBelowXAxis, _d = props.barMarginBottom, barMarginBottom = _d === void 0 ? 0 : _d;
+    var item = props.item, index = props.index, containerHeight = props.containerHeight, maxValue = props.maxValue, minHeight = props.minHeight, spacing = props.spacing, 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, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, horizontal = props.horizontal, rtl = props.rtl, pointerConfig = props.pointerConfig, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, barWidth = props.barWidth, _c = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _c === void 0 ? 0 : _c, secondaryXAxis = props.secondaryXAxis, secondaryNoOfSectionsBelowXAxis = props.secondaryNoOfSectionsBelowXAxis, _d = props.barMarginBottom, barMarginBottom = _d === void 0 ? 0 : _d, highlightEnabled = props.highlightEnabled, highlightedBarIndex = props.highlightedBarIndex, lowlightOpacity = props.lowlightOpacity;
     var _e = useRenderBars(props), heightFactor = _e.heightFactor, barHeight = _e.barHeight, tooltipProps = _e.tooltipProps;
     var _f = getPropsForAnimated2DWithGradient(__assign(__assign({}, props), { barHeight: barHeight })), commonStyleForBar = _f.commonStyleForBar, barStyleWithBackground = _f.barStyleWithBackground, commonPropsFor2dAnd3dBars = _f.commonPropsFor2dAnd3dBars, isFocused = _f.isFocused, focusedBarConfig = _f.focusedBarConfig, localFrontColor = _f.localFrontColor;
     var itemOrPropsBarInnerComponent = (_a = item.barInnerComponent) !== null && _a !== void 0 ? _a : props.barInnerComponent;
@@ -140,6 +140,13 @@ var RenderBars = function (props) {
     var barWrapperStyle = [
         {
             // overflow: 'visible',
+            opacity: highlightEnabled
+                ? highlightedBarIndex === -1
+                    ? 1
+                    : highlightedBarIndex === index
+                        ? 1
+                        : lowlightOpacity
+                : 1,
             marginBottom: 60 + barMarginBottom + xAxisLabelsVerticalShift - 0.5,
             width: commonPropsFor2dAnd3dBars.barWidth,
             height: barHeight,
@@ -181,7 +188,7 @@ var RenderBars = function (props) {
                     : null] }));
     };
     return (_jsxs(_Fragment, { children: [pressDisabled ? (_jsx(View, { pointerEvents: "none", style: barWrapperStyle, children: barContent() })) : (_jsx(TouchableOpacity, { activeOpacity: props.activeOpacity || 0.2, onPress: function () {
-                    if (renderTooltip || props.focusBarOnPress) {
+                    if (renderTooltip || props.focusBarOnPress || highlightEnabled) {
                         if (props.focusedBarIndex === undefined || !props.onPress) {
                             setSelectedIndex(index);
                         }

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, barMarginBottom = props.barMarginBottom;
+    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, highlightEnabled = props.highlightEnabled, highlightedBarIndex = props.highlightedBarIndex, lowlightOpacity = props.lowlightOpacity, stackHighlightEnabled = props.stackHighlightEnabled, selectedStackIndex = props.selectedStackIndex, setSelectedStackIndex = props.setSelectedStackIndex;
     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: [
@@ -72,7 +72,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 () {
+        return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { disabled: disablePress || (stackHighlightEnabled && !highlightEnabled), activeOpacity: activeOpacity, onPress: function () {
                         setSelectedIndex(index);
                         if (item.onPress) {
                             item.onPress();
@@ -115,7 +115,19 @@ var RenderStackBars = function (props) {
                             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 ||
+                            return (_jsxs(TouchableOpacity, { onPress: function (e) {
+                                    var _a;
+                                    if (stackHighlightEnabled) {
+                                        setSelectedStackIndex(index);
+                                    }
+                                    (_a = stackItem.onPress) === null || _a === void 0 ? void 0 : _a.call(stackItem, e);
+                                }, activeOpacity: activeOpacity, disabled: disablePress ||
+                                    highlightEnabled ||
+                                    (!stackHighlightEnabled && !stackItem.onPress), style: __assign({ opacity: stackHighlightEnabled
+                                        ? selectedStackIndex === index || selectedStackIndex === -1
+                                            ? 1
+                                            : lowlightOpacity
+                                        : 1, 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 ||
@@ -158,6 +170,13 @@ var RenderStackBars = function (props) {
                     : 'auto', style: [
                     {
                         // overflow: 'visible',
+                        opacity: highlightEnabled
+                            ? highlightedBarIndex === -1
+                                ? 1
+                                : highlightedBarIndex === index
+                                    ? 1
+                                    : lowlightOpacity
+                            : 1,
                         marginBottom: 60 + xAxisLabelsVerticalShift,
                         width: item.stacks[0].barWidth || props.barWidth || 30,
                         height: totalHeight,

package/dist/BarChart/index.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { Animated, Easing, View } from 'react-native';
+import { Animated, Easing, Pressable, View } from 'react-native';
 import RenderBars from './RenderBars';
 import RenderStackBars from './RenderStackBars';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
@@ -33,7 +33,7 @@ export var BarChart = function (props) {
             }
         },
     };
-    var _c = useBarChart(__assign(__assign({}, props), { heightValue: heightValue, widthValue: widthValue, opacityValue: opacityValue, parentWidth: (_b = props.parentWidth) !== null && _b !== void 0 ? _b : screenWidth })), lineConfig = _c.lineConfig, hidePointer1 = _c.hidePointer1, pointerItem = _c.pointerItem, pointerY = _c.pointerY, pointerConfig = _c.pointerConfig, pointerColor = _c.pointerColor, pointerX = _c.pointerX, pointerComponent = _c.pointerComponent, pointerHeight = _c.pointerHeight, pointerRadius = _c.pointerRadius, pointerWidth = _c.pointerWidth, autoAdjustPointerLabelPosition = _c.autoAdjustPointerLabelPosition, pointerLabelWidth = _c.pointerLabelWidth, activatePointersOnLongPress = _c.activatePointersOnLongPress, yAxisLabelWidth = _c.yAxisLabelWidth, shiftPointerLabelX = _c.shiftPointerLabelX, pointerLabelHeight = _c.pointerLabelHeight, pointerStripUptoDataPoint = _c.pointerStripUptoDataPoint, pointerStripHeight = _c.pointerStripHeight, shiftPointerLabelY = _c.shiftPointerLabelY, showPointerStrip = _c.showPointerStrip, pointerStripWidth = _c.pointerStripWidth, containerHeight = _c.containerHeight, xAxisThickness = _c.xAxisThickness, pointerStripColor = _c.pointerStripColor, pointerEvents = _c.pointerEvents, setResponderStartTime = _c.setResponderStartTime, setPointerY = _c.setPointerY, setPointerItem = _c.setPointerItem, initialSpacing = _c.initialSpacing, spacing = _c.spacing, data = _c.data, barWidth = _c.barWidth, setPointerX = _c.setPointerX, pointerIndex = _c.pointerIndex, setPointerIndex = _c.setPointerIndex, maxValue = _c.maxValue, responderStartTime = _c.responderStartTime, setResponderActive = _c.setResponderActive, activatePointersDelay = _c.activatePointersDelay, persistPointer = _c.persistPointer, pointerVanishDelay = _c.pointerVanishDelay, containerHeightIncludingBelowXAxis = _c.containerHeightIncludingBelowXAxis, extendedContainerHeight = _c.extendedContainerHeight, totalWidth = _c.totalWidth, stripBehindBars = _c.stripBehindBars, noOfSectionsBelowXAxis = _c.noOfSectionsBelowXAxis, stepHeight = _c.stepHeight, xAxisLabelsVerticalShift = _c.xAxisLabelsVerticalShift, labelsExtraHeight = _c.labelsExtraHeight, stripOverPointer = _c.stripOverPointer, pointerLabelComponent = _c.pointerLabelComponent, setSelectedIndex = _c.setSelectedIndex, isAnimated = _c.isAnimated, animationDuration = _c.animationDuration, side = _c.side, labelWidth = _c.labelWidth, isThreeD = _c.isThreeD, animatedHeight = _c.animatedHeight, appearingOpacity = _c.appearingOpacity, autoShiftLabels = _c.autoShiftLabels, getPropsCommonForBarAndStack = _c.getPropsCommonForBarAndStack, barAndLineChartsWrapperProps = _c.barAndLineChartsWrapperProps, autoShiftLabelsForNegativeStacks = _c.autoShiftLabelsForNegativeStacks;
+    var _c = useBarChart(__assign(__assign({}, props), { heightValue: heightValue, widthValue: widthValue, opacityValue: opacityValue, parentWidth: (_b = props.parentWidth) !== null && _b !== void 0 ? _b : screenWidth })), lineConfig = _c.lineConfig, hidePointer1 = _c.hidePointer1, pointerItem = _c.pointerItem, pointerY = _c.pointerY, pointerConfig = _c.pointerConfig, pointerColor = _c.pointerColor, pointerX = _c.pointerX, pointerComponent = _c.pointerComponent, pointerHeight = _c.pointerHeight, pointerRadius = _c.pointerRadius, pointerWidth = _c.pointerWidth, autoAdjustPointerLabelPosition = _c.autoAdjustPointerLabelPosition, pointerLabelWidth = _c.pointerLabelWidth, activatePointersOnLongPress = _c.activatePointersOnLongPress, yAxisLabelWidth = _c.yAxisLabelWidth, shiftPointerLabelX = _c.shiftPointerLabelX, pointerLabelHeight = _c.pointerLabelHeight, pointerStripUptoDataPoint = _c.pointerStripUptoDataPoint, pointerStripHeight = _c.pointerStripHeight, shiftPointerLabelY = _c.shiftPointerLabelY, showPointerStrip = _c.showPointerStrip, pointerStripWidth = _c.pointerStripWidth, containerHeight = _c.containerHeight, xAxisThickness = _c.xAxisThickness, pointerStripColor = _c.pointerStripColor, pointerEvents = _c.pointerEvents, setResponderStartTime = _c.setResponderStartTime, setPointerY = _c.setPointerY, setPointerItem = _c.setPointerItem, initialSpacing = _c.initialSpacing, spacing = _c.spacing, data = _c.data, barWidth = _c.barWidth, setPointerX = _c.setPointerX, pointerIndex = _c.pointerIndex, setPointerIndex = _c.setPointerIndex, maxValue = _c.maxValue, responderStartTime = _c.responderStartTime, setResponderActive = _c.setResponderActive, activatePointersDelay = _c.activatePointersDelay, persistPointer = _c.persistPointer, pointerVanishDelay = _c.pointerVanishDelay, containerHeightIncludingBelowXAxis = _c.containerHeightIncludingBelowXAxis, extendedContainerHeight = _c.extendedContainerHeight, totalWidth = _c.totalWidth, stripBehindBars = _c.stripBehindBars, noOfSectionsBelowXAxis = _c.noOfSectionsBelowXAxis, stepHeight = _c.stepHeight, xAxisLabelsVerticalShift = _c.xAxisLabelsVerticalShift, labelsExtraHeight = _c.labelsExtraHeight, stripOverPointer = _c.stripOverPointer, pointerLabelComponent = _c.pointerLabelComponent, selectedIndex = _c.selectedIndex, setSelectedIndex = _c.setSelectedIndex, selectedStackIndex = _c.selectedStackIndex, setSelectedStackIndex = _c.setSelectedStackIndex, isAnimated = _c.isAnimated, animationDuration = _c.animationDuration, side = _c.side, labelWidth = _c.labelWidth, isThreeD = _c.isThreeD, animatedHeight = _c.animatedHeight, appearingOpacity = _c.appearingOpacity, autoShiftLabels = _c.autoShiftLabels, getPropsCommonForBarAndStack = _c.getPropsCommonForBarAndStack, barAndLineChartsWrapperProps = _c.barAndLineChartsWrapperProps, autoShiftLabelsForNegativeStacks = _c.autoShiftLabelsForNegativeStacks;
     var stackData = barAndLineChartsWrapperProps.stackData;
     var labelsAppear = useCallback(function () {
         opacityValue.setValue(0);
@@ -118,46 +118,48 @@ export var BarChart = function (props) {
         width: totalWidth,
         flexDirection: 'row',
     };
+    var activatePointer = function (x) {
+        var _a;
+        var factor = (x - initialSpacing - barWidth / 2) / (spacing + barWidth);
+        factor = Math.round(factor);
+        factor = Math.min(factor, data.length - 1);
+        factor = Math.max(factor, 0);
+        var z = initialSpacing +
+            (spacing + barWidth) * factor -
+            (pointerRadius || pointerWidth / 2) +
+            barWidth / 2;
+        setPointerX(z);
+        setPointerIndex(factor);
+        var item, y;
+        item = (stackData !== null && stackData !== void 0 ? stackData : data)[factor];
+        var stackSum = 0;
+        if ('stacks' in item) {
+            stackSum = item.stacks.reduce(function (acc, stack) { var _a; return acc + ((_a = stack.value) !== null && _a !== void 0 ? _a : 0); }, 0);
+        }
+        y =
+            containerHeight -
+                ((stackSum !== null && stackSum !== void 0 ? stackSum : item.value) * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+        setPointerY(y);
+        setPointerItem(item);
+        (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onResponderGrant) === null || _a === void 0 ? void 0 : _a.call(pointerConfig);
+    };
     var renderChartContent = function () {
         if (pointerConfig) {
-            return (_jsxs(View, { onStartShouldSetResponder: function () { return !!pointerConfig; }, onMoveShouldSetResponder: function () { return !!pointerConfig; }, onResponderGrant: function (evt) {
-                    if (!pointerConfig)
-                        return;
+            return (_jsxs(View, { onPointerEnter: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onPointerEnter) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onPointerLeave: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onPointerLeave) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onTouchStart: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onTouchStart) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onTouchEnd: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onTouchEnd) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onStartShouldSetResponder: function () { return !!pointerConfig; }, onMoveShouldSetResponder: function () { return !!pointerConfig; }, onResponderGrant: function (evt) {
                     setResponderStartTime(evt.timeStamp);
-                    if (activatePointersOnLongPress) {
+                    if (activatePointersOnLongPress ||
+                        !(pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.activatePointersInstantlyOnTouch)) {
                         return;
                     }
                     var x = evt.nativeEvent.locationX;
                     if (!activatePointersOnLongPress &&
                         x > (props.width || screenWidth))
                         return;
-                    var factor = (x - initialSpacing - barWidth / 2) / (spacing + barWidth);
-                    factor = Math.round(factor);
-                    factor = Math.min(factor, data.length - 1);
-                    factor = Math.max(factor, 0);
-                    var z = initialSpacing +
-                        (spacing + barWidth) * factor -
-                        (pointerRadius || pointerWidth / 2) +
-                        barWidth / 2;
-                    setPointerX(z);
-                    setPointerIndex(factor);
-                    var item, y;
-                    item = (stackData !== null && stackData !== void 0 ? stackData : data)[factor];
-                    var stackSum = 0;
-                    if ('stacks' in item) {
-                        stackSum = item.stacks.reduce(function (acc, stack) { var _a; return acc + ((_a = stack.value) !== null && _a !== void 0 ? _a : 0); }, 0);
-                    }
-                    y =
-                        containerHeight -
-                            ((stackSum !== null && stackSum !== void 0 ? stackSum : item.value) * containerHeight) / maxValue -
-                            (pointerRadius || pointerHeight / 2) +
-                            10;
-                    setPointerY(y);
-                    setPointerItem(item);
+                    setResponderActive(true);
+                    activatePointer(x);
                 }, onResponderMove: function (evt) {
-                    var _a;
-                    if (!pointerConfig)
-                        return;
                     if (activatePointersOnLongPress &&
                         evt.timeStamp - responderStartTime < activatePointersDelay) {
                         return;
@@ -169,35 +171,15 @@ export var BarChart = function (props) {
                     if (!activatePointersOnLongPress &&
                         x > (props.width || screenWidth))
                         return;
-                    var factor = (x - initialSpacing - barWidth / 2) / (spacing + barWidth);
-                    factor = Math.round(factor);
-                    factor = Math.min(factor, (stackData !== null && stackData !== void 0 ? stackData : data).length - 1);
-                    factor = Math.max(factor, 0);
-                    var z = initialSpacing +
-                        (spacing + barWidth) * factor -
-                        (pointerRadius || pointerWidth / 2) +
-                        barWidth / 2;
-                    var item, y;
-                    setPointerX(z);
-                    setPointerIndex(factor);
-                    item = (stackData !== null && stackData !== void 0 ? stackData : data)[factor];
-                    var stackSum = 0;
-                    if ('stacks' in item) {
-                        (_a = item.stacks) === null || _a === void 0 ? void 0 : _a.reduce(function (acc, stack) { var _a; return acc + ((_a = stack.value) !== null && _a !== void 0 ? _a : 0); }, 0);
-                    }
-                    y =
-                        containerHeight -
-                            ((stackSum !== null && stackSum !== void 0 ? stackSum : item.value) * containerHeight) / maxValue -
-                            (pointerRadius || pointerHeight / 2) +
-                            10;
-                    setPointerY(y);
-                    setPointerItem(item);
+                    activatePointer(x);
                 }, onResponderEnd: function (evt) {
+                    var _a;
                     setResponderStartTime(0);
                     setPointerIndex(-1);
                     setResponderActive(false);
                     if (!persistPointer)
                         setTimeout(function () { return setPointerX(0); }, pointerVanishDelay);
+                    (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onResponderEnd) === null || _a === void 0 ? void 0 : _a.call(pointerConfig);
                 }, onResponderTerminationRequest: function (evt) { return false; }, style: contentContainerStyle, children: [pointerX > 0 && stripBehindBars ? (_jsx(View, { pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : 'none', style: {
                             position: 'absolute',
                             height: extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
@@ -218,13 +200,20 @@ export var BarChart = function (props) {
                         ] })) : null] }));
         }
         else {
-            return _jsx(View, { style: contentContainerStyle, children: renderChart() });
+            return (_jsx(Pressable, { style: contentContainerStyle, onPress: function () {
+                    if (props.highlightEnabled && selectedIndex !== -1)
+                        setSelectedIndex(-1);
+                    if (props.stackHighlightEnabled && selectedStackIndex !== -1) {
+                        setSelectedStackIndex(-1);
+                        // props.setHighlightedStackIndex?.(-1)
+                    }
+                }, children: renderChart() }));
         }
     };
     var renderChart = function () {
         if (stackData) {
             return stackData.map(function (item, index) {
-                return (_jsx(RenderStackBars, __assign({ stackData: props.stackData || [], isAnimated: isAnimated, animationDuration: animationDuration, stackBorderRadius: props.stackBorderRadius, stackBorderTopLeftRadius: props.stackBorderTopLeftRadius, stackBorderTopRightRadius: props.stackBorderTopRightRadius, stackBorderBottomLeftRadius: props.stackBorderBottomLeftRadius, stackBorderBottomRightRadius: props.stackBorderBottomRightRadius, autoShiftLabelsForNegativeStacks: autoShiftLabelsForNegativeStacks }, getPropsCommonForBarAndStack(item, index)), index));
+                return (_jsx(RenderStackBars, __assign({ stackData: props.stackData || [], isAnimated: isAnimated, animationDuration: animationDuration, stackBorderRadius: props.stackBorderRadius, stackBorderTopLeftRadius: props.stackBorderTopLeftRadius, stackBorderTopRightRadius: props.stackBorderTopRightRadius, stackBorderBottomLeftRadius: props.stackBorderBottomLeftRadius, stackBorderBottomRightRadius: props.stackBorderBottomRightRadius, autoShiftLabelsForNegativeStacks: autoShiftLabelsForNegativeStacks, selectedStackIndex: selectedStackIndex, setSelectedStackIndex: setSelectedStackIndex }, getPropsCommonForBarAndStack(item, index)), index));
             });
         }
         else {

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

@@ -6,8 +6,13 @@ import { renderDataPoints } from './renderDataPoints';
 import { renderSpecificDataPoints } from './renderSpecificDataPoints';
 var RenderLineInBarChart = function (props) {
     var _a;
-    var yAxisLabelWidth = props.yAxisLabelWidth, initialSpacing = props.initialSpacing, spacing = props.spacing, containerHeight = props.containerHeight, lineConfig = props.lineConfig, maxValue = props.maxValue, animatedWidth = props.animatedWidth, lineBehindBars = props.lineBehindBars, points = props.points, arrowPoints = props.arrowPoints, data = props.data, totalWidth = props.totalWidth, barWidth = props.barWidth, labelsExtraHeight = props.labelsExtraHeight, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, selectedIndex = props.selectedIndex, containerHeightIncludingBelowXAxis = props.containerHeightIncludingBelowXAxis, yAxisOffset = props.yAxisOffset;
+    var yAxisLabelWidth = props.yAxisLabelWidth, initialSpacing = props.initialSpacing, spacing = props.spacing, containerHeight = props.containerHeight, lineConfig = props.lineConfig, maxValue = props.maxValue, animatedWidth = props.animatedWidth, lineBehindBars = props.lineBehindBars, points = props.points, arrowPoints = props.arrowPoints, data = props.data, totalWidth = props.totalWidth, barWidth = props.barWidth, labelsExtraHeight = props.labelsExtraHeight, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, selectedIndex = props.selectedIndex, containerHeightIncludingBelowXAxis = props.containerHeightIncludingBelowXAxis, yAxisOffset = props.yAxisOffset, highlightEnabled = props.highlightEnabled, lowlightOpacity = props.lowlightOpacity;
     var firstBarWidth = (_a = data[0].barWidth) !== null && _a !== void 0 ? _a : barWidth;
+    var opacity = highlightEnabled
+        ? selectedIndex === -1
+            ? 1
+            : lowlightOpacity
+        : 1;
     var dataPointsProps = {
         data: data,
         lineConfig: lineConfig,
@@ -19,6 +24,7 @@ var RenderLineInBarChart = function (props) {
         spacing: spacing,
         selectedIndex: selectedIndex,
         yAxisOffset: yAxisOffset,
+        opacity: opacity,
     };
     var specificVerticalLinesProps = {
         data: data,
@@ -51,7 +57,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, strokeDasharray: lineConfig.strokeDashArray }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
+            }, children: _jsxs(Svg, { children: [_jsx(Path, { d: points, fill: "none", opacity: opacity, 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 +71,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, strokeDasharray: lineConfig.strokeDashArray }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
+            }, children: _jsxs(Svg, { children: [_jsx(Path, { d: points, fill: "none", opacity: opacity, 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/renderLineInBarChart/renderDataPoints.js

@@ -5,7 +5,7 @@ import { View } from 'react-native';
 import { getXForLineInBar, getYForLineInBar } from 'gifted-charts-core';
 import { Rect, Text as CanvasText, Circle } from 'react-native-svg';
 export var renderDataPoints = function (props) {
-    var data = props.data, lineConfig = props.lineConfig, barWidth = props.barWidth, containerHeight = props.containerHeight, maxValue = props.maxValue, firstBarWidth = props.firstBarWidth, yAxisLabelWidth = props.yAxisLabelWidth, spacing = props.spacing, selectedIndex = props.selectedIndex, yAxisOffset = props.yAxisOffset;
+    var data = props.data, lineConfig = props.lineConfig, barWidth = props.barWidth, containerHeight = props.containerHeight, maxValue = props.maxValue, firstBarWidth = props.firstBarWidth, yAxisLabelWidth = props.yAxisLabelWidth, spacing = props.spacing, selectedIndex = props.selectedIndex, yAxisOffset = props.yAxisOffset, opacity = props.opacity;
     return data.map(function (item, index) {
         var _a, _b, _c, _d, _e;
         if (index < lineConfig.startIndex ||
@@ -28,6 +28,7 @@ export var renderDataPoints = function (props) {
             return (_jsx(View, { style: [
                     styles.customDataPointContainer,
                     {
+                        opacity: opacity,
                         height: lineConfig.dataPointsHeight,
                         width: lineConfig.dataPointsWidth,
                         top: containerHeight -
@@ -39,11 +40,11 @@ export var renderDataPoints = function (props) {
         }
         if (lineConfig.dataPointsShape === 'rectangular') {
             return (_jsxs(Fragment, { children: [_jsx(Rect, { x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset) -
-                            lineConfig.dataPointsHeight / 2, width: lineConfig.dataPointsWidth, height: lineConfig.dataPointsHeight, fill: dataPointColor }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, fontSize: item.textFontSize || lineConfig.textFontSize, x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing) + (item.textShiftX || lineConfig.textShiftX || 0), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset) -
+                            lineConfig.dataPointsHeight / 2, width: lineConfig.dataPointsWidth, height: lineConfig.dataPointsHeight, fill: dataPointColor, opacity: opacity }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, opacity: opacity, fontSize: item.textFontSize || lineConfig.textFontSize, x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing) + (item.textShiftX || lineConfig.textShiftX || 0), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset) -
                             lineConfig.dataPointsHeight / 2 +
                             (item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index));
         }
-        return (_jsxs(Fragment, { children: [_jsx(Circle, { cx: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing), cy: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset), r: dataPointRadius, fill: dataPointColor }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, fontSize: item.textFontSize || lineConfig.textFontSize, x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing) + (item.textShiftX || lineConfig.textShiftX || 0), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset) -
+        return (_jsxs(Fragment, { children: [_jsx(Circle, { cx: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing), cy: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset), r: dataPointRadius, fill: dataPointColor, opacity: opacity }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, opacity: opacity, fontSize: item.textFontSize || lineConfig.textFontSize, x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing) + (item.textShiftX || lineConfig.textShiftX || 0), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset) -
                         lineConfig.dataPointsHeight / 2 +
                         (item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index));
     });

package/dist/LineChart/index.js

@@ -54,7 +54,7 @@ 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 _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, strokeLinecap1 = _d.strokeLinecap1, strokeLinecap2 = _d.strokeLinecap2, strokeLinecap3 = _d.strokeLinecap3, strokeLinecap4 = _d.strokeLinecap4, strokeLinecap5 = _d.strokeLinecap5, 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, _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, selectedLineNumber = _d.selectedLineNumber, handleFocus = _d.handleFocus, handleUnFocus = _d.handleUnFocus;
+    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, strokeLinecap1 = _d.strokeLinecap1, strokeLinecap2 = _d.strokeLinecap2, strokeLinecap3 = _d.strokeLinecap3, strokeLinecap4 = _d.strokeLinecap4, strokeLinecap5 = _d.strokeLinecap5, 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, _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, selectedLineNumber = _d.selectedLineNumber, handleFocus = _d.handleFocus, handleUnFocus = _d.handleUnFocus, stepValue = _d.stepValue, pointerItemLocal = _d.pointerItemLocal;
     var svgHeight = containerHeightIncludingBelowXAxis +
         ((_c = props.overflowBottom) !== null && _c !== void 0 ? _c : dataPointsRadius1);
     var secondaryXAxis = props.secondaryXAxis, intersectionAreaConfig = props.intersectionAreaConfig;
@@ -493,27 +493,20 @@ export var LineChart = function (props) {
         });
     };
     var renderStripAndLabel = function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        var pointerItemLocal, pointerYLocal;
-        pointerItemLocal = [
-            __assign(__assign({}, pointerItem), { value: (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[pointerIndex]) === null || _b === void 0 ? void 0 : _b.value }),
-        ];
+        var _a, _b;
+        var pointerYLocal;
         var arr = [pointerY];
         if (pointerY2 !== 0) {
             arr.push(pointerY2);
-            pointerItemLocal.push(__assign(__assign({}, pointerItem), { value: (_d = (_c = props.data2) === null || _c === void 0 ? void 0 : _c[pointerIndex]) === null || _d === void 0 ? void 0 : _d.value }));
         }
         if (pointerY3 !== 0) {
             arr.push(pointerY3);
-            pointerItemLocal.push(__assign(__assign({}, pointerItem), { value: (_f = (_e = props.data3) === null || _e === void 0 ? void 0 : _e[pointerIndex]) === null || _f === void 0 ? void 0 : _f.value }));
         }
         if (pointerY4 !== 0) {
             arr.push(pointerY4);
-            pointerItemLocal.push(__assign(__assign({}, pointerItem), { value: (_h = (_g = props.data4) === null || _g === void 0 ? void 0 : _g[pointerIndex]) === null || _h === void 0 ? void 0 : _h.value }));
         }
         if (pointerY5 !== 0) {
             arr.push(pointerY5);
-            pointerItemLocal.push(__assign(__assign({}, pointerItem), { value: (_k = (_j = props.data5) === null || _j === void 0 ? void 0 : _j[pointerIndex]) === null || _k === void 0 ? void 0 : _k.value }));
         }
         pointerYLocal = Math.min.apply(Math, __spreadArray([], __read(arr), false));
         if ((pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.hidePointerForMissingValues) &&
@@ -549,7 +542,7 @@ export var LineChart = function (props) {
             isBarChart: false,
             pointerIndex: pointerIndex,
             width: totalWidth,
-            screenWidth: (_l = props.width) !== null && _l !== void 0 ? _l : Math.min(totalWidth, (_m = props.parentWidth) !== null && _m !== void 0 ? _m : screenWidth) -
+            screenWidth: (_a = props.width) !== null && _a !== void 0 ? _a : Math.min(totalWidth, (_b = props.parentWidth) !== null && _b !== void 0 ? _b : screenWidth) -
                 yAxisLabelWidth,
             hasDataSet: !!dataSet,
             containsNegative: mostNegativeValue < 0,
@@ -1029,15 +1022,7 @@ export var LineChart = function (props) {
                 }), (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.dynamicLegendComponent) && pointerX > 0 ? (_jsx(View, { style: [
                         { position: 'absolute' },
                         pointerConfig.dynamicLegendContainerStyle,
-                    ], children: pointerConfig.dynamicLegendComponent(dataSet
-                        ? pointerItemsForSet
-                        : [
-                            pointerItem,
-                            pointerItem2,
-                            pointerItem3,
-                            pointerItem4,
-                            pointerItem5,
-                        ].filter(function (item) { return !!item; }), pointerIndex) })) : null] }));
+                    ], children: pointerConfig.dynamicLegendComponent(pointerItemLocal, pointerIndex) })) : null] }));
     };
     return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { dataSet: dataSet, scrollRef: scrollRef, animatedWidth: widthValue, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps, nestedScrollEnabled: props.nestedScrollEnabled })));
 };

package/dist/PieChart/index.js

@@ -9,13 +9,32 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View } from 'react-native';
+import { View, Text } from 'react-native';
 import { PieChartMain } from './main';
 import { usePieChart } from 'gifted-charts-core';
 import { isWebApp } from '../utils';
+import { useState } from 'react';
 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 _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, data = _a.data, showTooltip = _a.showTooltip, tooltipHorizontalShift = _a.tooltipHorizontalShift, tooltipVerticalShift = _a.tooltipVerticalShift, tooltipComponent = _a.tooltipComponent, getTooltipText = _a.getTooltipText, tooltipBackgroundColor = _a.tooltipBackgroundColor, tooltipBorderRadius = _a.tooltipBorderRadius, tooltipWidth = _a.tooltipWidth, tooltipTextNoOfLines = _a.tooltipTextNoOfLines, textColor = _a.textColor, textSize = _a.textSize, font = _a.font, fontWeight = _a.fontWeight, fontStyle = _a.fontStyle, tooltipSelectedIndex = _a.tooltipSelectedIndex, setTooltipSelectedIndex = _a.setTooltipSelectedIndex;
+    var _b = __read(useState(0), 2), touchX = _b[0], setTouchX = _b[1];
+    var _c = __read(useState(0), 2), touchY = _c[0], setTouchY = _c[1];
     var renderInnerCircle = function (innerRadius, innerCircleBorderWidth) {
         if (props.centerLabelComponent || (donut && !isDataShifted)) {
             return (_jsx(View, { style: [
@@ -64,6 +83,39 @@ export var PieChart = function (props) {
         }
         return null;
     };
+    var renderTooltip = function () {
+        var _a, _b;
+        return (_jsx(View, { style: {
+                position: 'absolute',
+                left: touchX > (radius + extraRadius) * 1.5
+                    ? props.tooltipHorizontalShift
+                        ? touchX - tooltipHorizontalShift
+                        : touchX -
+                            (tooltipWidth !== null && tooltipWidth !== void 0 ? tooltipWidth : getTooltipText(tooltipSelectedIndex).length * 10)
+                    : touchX - tooltipHorizontalShift,
+                top: touchY < 30
+                    ? props.tooltipVerticalShift
+                        ? touchY - tooltipVerticalShift
+                        : touchY
+                    : touchY - tooltipVerticalShift,
+            }, children: data[tooltipSelectedIndex].tooltipComponent ? ((_b = (_a = data[tooltipSelectedIndex]).tooltipComponent) === null || _b === void 0 ? void 0 : _b.call(_a)) : tooltipComponent ? (tooltipComponent(tooltipSelectedIndex)) : (_jsx(View, { style: {
+                    backgroundColor: tooltipBackgroundColor,
+                    borderRadius: tooltipBorderRadius,
+                    paddingHorizontal: 8,
+                    paddingBottom: 8,
+                    paddingTop: 4,
+                    width: tooltipWidth,
+                }, children: _jsx(Text, { numberOfLines: tooltipTextNoOfLines, style: {
+                        color: data[tooltipSelectedIndex].textColor ||
+                            textColor ||
+                            'white',
+                        textAlign: 'center',
+                        fontSize: textSize,
+                        fontFamily: font,
+                        fontWeight: fontWeight,
+                        fontStyle: fontStyle,
+                    }, children: getTooltipText(tooltipSelectedIndex) }) })) }));
+    };
     if (!total)
         return null;
     return (_jsxs(View, { style: {
@@ -71,7 +123,7 @@ export var PieChart = function (props) {
                 (props.semiCircle ? 1 : 2),
             width: (radius + extraRadius + paddingHorizontal / 2) * 2,
             overflow: 'hidden',
-        }, children: [_jsx(View, { style: { position: 'absolute' }, children: _jsx(PieChartMain, __assign({}, props, { selectedIndex: selectedIndex, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) }), renderInnerCircle(innerRadius, innerCircleBorderWidth), props.data.length > 1 &&
+        }, children: [_jsx(View, { style: { position: 'absolute' }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) }), renderInnerCircle(innerRadius, innerCircleBorderWidth), props.data.length > 1 &&
                 props.data[selectedIndex] && // don't forget to add this one so there are no errors when the data is empty / updating
                 (props.focusOnPress || props.sectionAutoFocus) &&
                 selectedIndex !== -1 && (_jsx(View, { pointerEvents: "box-none", style: {
@@ -79,13 +131,12 @@ export var PieChart = function (props) {
                     top: -extraRadius,
                     left: -extraRadius,
                     zIndex: isWebApp ? -1 : 0, // was not getting displayed in web (using Expo)
-                }, children: _jsx(PieChartMain, __assign({}, props, { data: [
+                }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, data: [
                         __assign({}, props.data[selectedIndex]),
                         {
                             value: total - props.data[selectedIndex].value,
-                            // onPress: () => alert('black'),
                             peripheral: true,
                             strokeWidth: 0,
                         },
-                    ], radius: radius + extraRadius, initialAngle: startAngle, innerRadius: props.innerRadius || radius / 2.5, isBiggerPie: true, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) })), renderInnerCircle(innerRadius - inwardExtraLengthForFocused, inwardExtraLengthForFocused ? 0 : innerCircleBorderWidth)] }));
+                    ], radius: radius + extraRadius, initialAngle: startAngle, innerRadius: props.innerRadius || radius / 2.5, isBiggerPie: true, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) })), renderInnerCircle(innerRadius - inwardExtraLengthForFocused, inwardExtraLengthForFocused ? 0 : innerCircleBorderWidth), showTooltip && tooltipSelectedIndex !== -1 ? renderTooltip() : null] }));
 };

package/dist/PieChart/main.js

@@ -16,23 +16,23 @@ var __read = (this && this.__read) || function (o, n) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import { TouchableWithoutFeedback, View, Text } from 'react-native';
+import { Pressable, View } from 'react-native';
 import Svg, { Path, Circle, Text as SvgText, Defs, RadialGradient, Stop, G, Line, } from 'react-native-svg';
 import { getPieChartMainProps, pieColors, } from 'gifted-charts-core';
 import { isWebApp, rnVersion } from '../utils';
 export var PieChartMain = function (props) {
-    var _a, _b;
-    var _c = getPieChartMainProps(props), isThreeD = _c.isThreeD, isBiggerPie = _c.isBiggerPie, data = _c.data, showInnerComponent = _c.showInnerComponent, radius = _c.radius, canvasWidth = _c.canvasWidth, canvasHeight = _c.canvasHeight, shadowWidth = _c.shadowWidth, backgroundColor = _c.backgroundColor, shadowColor = _c.shadowColor, semiCircle = _c.semiCircle, pi = _c.pi, initialAngle = _c.initialAngle, shadow = _c.shadow, donut = _c.donut, strokeWidth = _c.strokeWidth, strokeColor = _c.strokeColor, innerRadius = _c.innerRadius, showTooltip = _c.showTooltip, tooltipWidth = _c.tooltipWidth, tooltipComponent = _c.tooltipComponent, tooltipVerticalShift = _c.tooltipVerticalShift, tooltipHorizontalShift = _c.tooltipHorizontalShift, tooltipTextNoOfLines = _c.tooltipTextNoOfLines, tooltipBackgroundColor = _c.tooltipBackgroundColor, tooltipBorderRadius = _c.tooltipBorderRadius, tooltipSelectedIndex = _c.tooltipSelectedIndex, getTooltipText = _c.getTooltipText, showText = _c.showText, textColor = _c.textColor, textSize = _c.textSize, tiltAngle = _c.tiltAngle, labelsPosition = _c.labelsPosition, showTextBackground = _c.showTextBackground, textBackgroundColor = _c.textBackgroundColor, showValuesAsLabels = _c.showValuesAsLabels, showGradient = _c.showGradient, gradientCenterColor = _c.gradientCenterColor, minShiftX = _c.minShiftX, minShiftY = _c.minShiftY, total = _c.total, horizAdjustment = _c.horizAdjustment, vertAdjustment = _c.vertAdjustment, cx = _c.cx, cy = _c.cy, mData = _c.mData, paddingHorizontal = _c.paddingHorizontal, paddingVertical = _c.paddingVertical, extraRadius = _c.extraRadius, showExternalLabels = _c.showExternalLabels, getExternaLabelProperties = _c.getExternaLabelProperties, coordinates = _c.coordinates, onPressed = _c.onPressed, font = _c.font, fontWeight = _c.fontWeight, fontStyle = _c.fontStyle;
+    var _a = getPieChartMainProps(props), isThreeD = _a.isThreeD, isBiggerPie = _a.isBiggerPie, data = _a.data, showInnerComponent = _a.showInnerComponent, radius = _a.radius, canvasWidth = _a.canvasWidth, canvasHeight = _a.canvasHeight, shadowWidth = _a.shadowWidth, backgroundColor = _a.backgroundColor, shadowColor = _a.shadowColor, semiCircle = _a.semiCircle, pi = _a.pi, initialAngle = _a.initialAngle, shadow = _a.shadow, donut = _a.donut, strokeWidth = _a.strokeWidth, strokeColor = _a.strokeColor, innerRadius = _a.innerRadius, showText = _a.showText, textColor = _a.textColor, textSize = _a.textSize, tiltAngle = _a.tiltAngle, labelsPosition = _a.labelsPosition, showTextBackground = _a.showTextBackground, textBackgroundColor = _a.textBackgroundColor, showValuesAsLabels = _a.showValuesAsLabels, showGradient = _a.showGradient, gradientCenterColor = _a.gradientCenterColor, minShiftX = _a.minShiftX, minShiftY = _a.minShiftY, total = _a.total, horizAdjustment = _a.horizAdjustment, vertAdjustment = _a.vertAdjustment, cx = _a.cx, cy = _a.cy, mData = _a.mData, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, extraRadius = _a.extraRadius, showExternalLabels = _a.showExternalLabels, getExternaLabelProperties = _a.getExternaLabelProperties, coordinates = _a.coordinates, onPressed = _a.onPressed, font = _a.font, fontWeight = _a.fontWeight, fontStyle = _a.fontStyle, edgesPressable = _a.edgesPressable;
+    var setTouchX = props.setTouchX, setTouchY = props.setTouchY;
     var prevSide = 'right';
     var prevLabelComponentX = 0;
     var wasFirstItemOnPole = false;
-    var _d = __read(useState(0), 2), touchX = _d[0], setTouchX = _d[1];
-    var _e = __read(useState(0), 2), touchY = _e[0], setTouchY = _e[1];
+    var _b = __read(useState(0), 2), top = _b[0], setTop = _b[1];
+    var _c = __read(useState(0), 2), left = _c[0], setLeft = _c[1];
     var onPressHandler = function (e) {
         var x = 0, y = 0;
         if (isWebApp) {
-            x = e.clientX;
-            y = e.clientY;
+            x = e.clientX - left;
+            y = e.clientY - top;
         }
         else {
             x = e.nativeEvent.locationX;
@@ -65,7 +65,12 @@ export var PieChartMain = function (props) {
             }
         }
     };
-    return (_jsx(TouchableWithoutFeedback, { onPress: onPressHandler, children: _jsxs(View, { pointerEvents: "box-only", style: [
+    return (_jsx(Pressable, { onPress: onPressHandler, pointerEvents: isBiggerPie && !edgesPressable ? 'none' : 'auto', children: _jsxs(View, { pointerEvents: "box-only", onLayout: function (e) {
+                if (!isWebApp)
+                    return;
+                setTop(e.nativeEvent.layout.top);
+                setLeft(e.nativeEvent.layout.left);
+            }, style: [
                 {
                     backgroundColor: backgroundColor,
                     height: semiCircle
@@ -166,34 +171,5 @@ export var PieChartMain = function (props) {
                         top: shadowWidth + paddingVertical / 2,
                         left: paddingHorizontal / 2,
                         zIndex: -1,
-                    } })) : null, showTooltip && tooltipSelectedIndex !== -1 ? (_jsx(View, { style: {
-                        position: 'absolute',
-                        left: touchX > (radius + extraRadius) * 1.5
-                            ? props.tooltipHorizontalShift
-                                ? touchX - tooltipHorizontalShift
-                                : touchX -
-                                    (tooltipWidth !== null && tooltipWidth !== void 0 ? tooltipWidth : getTooltipText(tooltipSelectedIndex).length * 10)
-                            : touchX - tooltipHorizontalShift,
-                        top: touchY < 30
-                            ? props.tooltipVerticalShift
-                                ? touchY - tooltipVerticalShift
-                                : touchY
-                            : touchY - tooltipVerticalShift,
-                    }, children: data[tooltipSelectedIndex].tooltipComponent ? ((_b = (_a = data[tooltipSelectedIndex]).tooltipComponent) === null || _b === void 0 ? void 0 : _b.call(_a)) : tooltipComponent ? (tooltipComponent(tooltipSelectedIndex)) : (_jsx(View, { style: {
-                            backgroundColor: tooltipBackgroundColor,
-                            borderRadius: tooltipBorderRadius,
-                            paddingHorizontal: 8,
-                            paddingBottom: 8,
-                            paddingTop: 4,
-                            width: tooltipWidth,
-                        }, children: _jsx(Text, { numberOfLines: tooltipTextNoOfLines, style: {
-                                color: data[tooltipSelectedIndex].textColor ||
-                                    textColor ||
-                                    'white',
-                                textAlign: 'center',
-                                fontSize: textSize,
-                                fontFamily: font,
-                                fontWeight: fontWeight,
-                                fontStyle: fontStyle,
-                            }, children: getTooltipText(tooltipSelectedIndex) }) })) })) : null] }) }));
+                    } })) : null] }) }));
 };

package/package.json

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