react-native-gifted-charts 1.4.55 → 1.4.56

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,11 +118,36 @@ 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) {
                         return;
@@ -131,33 +156,7 @@ 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, 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);
                 }, onResponderMove: function (evt) {
-                    var _a;
-                    if (!pointerConfig)
-                        return;
                     if (activatePointersOnLongPress &&
                         evt.timeStamp - responderStartTime < activatePointersDelay) {
                         return;
@@ -169,35 +168,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 +197,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/PieChart/main.js

@@ -16,7 +16,7 @@ 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, Text } 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';
@@ -28,11 +28,13 @@ export var PieChartMain = function (props) {
     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 _f = __read(useState(0), 2), top = _f[0], setTop = _f[1];
+    var _g = __read(useState(0), 2), left = _g[0], setLeft = _g[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 +67,12 @@ export var PieChartMain = function (props) {
             }
         }
     };
-    return (_jsx(TouchableWithoutFeedback, { onPress: onPressHandler, children: _jsxs(View, { pointerEvents: "box-only", style: [
+    return (_jsx(Pressable, { onPress: onPressHandler, 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.55",
+  "version": "1.4.56",
   "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.58"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",