react-native-gifted-charts 1.4.54 → 1.4.56

package/README.md

@@ -23,7 +23,7 @@ The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Populati
 - Clickable and scrollable
 - Three-D and gradient effects
 - Fully customizable (see the [props](docs/docs.md))
-- Detailed [documentation](https://gifted-chart*web.app/) with examples
+- Detailed [documentation](https://gifted-charts.web.app/) with examples
 - Support for **_combined_** Bar and Line charts
 - Tested to be pixel perfect using [react-native-screenshot-test](https://www.npmjs.com/package/react-native-screenshot-test). See [the screenshot tests here](https://abhinandan-kushwaha.github.io/TestingCharts/ss-test/test.html)
 - Detailed and illustrated [dev docs](docs/dev/index.md) that explain the architecture and working of the library
@@ -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/LineChart/index.js

@@ -35,7 +35,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useCallback, useEffect, useMemo, useRef, } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef } from 'react';
 import { View, Animated, Easing, Text, Dimensions, I18nManager, } from 'react-native';
 import { screenWidth, usePrevious } from '../utils';
 import Svg, { Path, LinearGradient, Stop, Circle, Rect, Text as CanvasText, Line, ClipPath, Use, ForeignObject, } from 'react-native-svg';
@@ -48,7 +48,7 @@ export var LineChart = function (props) {
     var _a, _b, _c;
     var scrollRef = (_a = props.scrollRef) !== null && _a !== void 0 ? _a : useRef(null);
     var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
-    var heightValue = useMemo(function () { return new Animated.Value(0); }, []);
+    // const heightValue = useMemo(() => new Animated.Value(0), []);
     var widthValue = useMemo(function () { return new Animated.Value(0); }, []);
     var widthValue2 = useMemo(function () { return new Animated.Value(0); }, []);
     var widthValue3 = useMemo(function () { return new Animated.Value(0); }, []);
@@ -772,9 +772,10 @@ export var LineChart = function (props) {
         }
     };
     var renderLine = function (containerHeightIncludingBelowXAxis, zIndex, points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, strokeLinecap, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, hideDataPoints, paramData, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key) {
-        return (_jsx(View, { onMoveShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onStartShouldSetResponder: function (evt) {
+        return (_jsx(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); }, onMoveShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onStartShouldSetResponder: function (evt) {
                 return pointerConfig && activatePointersInstantlyOnTouch ? true : false;
             }, onResponderGrant: function (evt) {
+                var _a;
                 if (!pointerConfig)
                     return;
                 setResponderStartTime(evt.timeStamp);
@@ -783,7 +784,9 @@ export var LineChart = function (props) {
                 }
                 var x = evt.nativeEvent.locationX;
                 activatePointers(x);
+                (_a = pointerConfig.onResponderGrant) === null || _a === void 0 ? void 0 : _a.call(pointerConfig);
             }, onResponderMove: function (evt) {
+                var _a;
                 if (!pointerConfig)
                     return;
                 if (activatePointersOnLongPress &&
@@ -798,17 +801,20 @@ export var LineChart = function (props) {
                     x > (props.width || Dimensions.get('window').width))
                     return;
                 activatePointers(x);
+                (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onResponderMove) === null || _a === void 0 ? void 0 : _a.call(pointerConfig);
             }, 
             // onResponderReject={evt => {
             //   console.log('evt...reject.......',evt);
             // }}
             onResponderEnd: function (evt) {
+                var _a;
                 setResponderStartTime(0);
                 if (resetPointerIndexOnRelease)
                     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; }, 
             // onResponderTerminate={evt => {
             //   console.log('evt...terminate.......',evt);
@@ -828,9 +834,10 @@ export var LineChart = function (props) {
             ], children: lineSvgComponent(points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, strokeLinecap, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, key, hideDataPoints, paramData, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray) }, key !== null && key !== void 0 ? key : 0));
     };
     var renderAnimatedLine = function (containerHeightIncludingBelowXAxis, zIndex, points, animatedWidth, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, strokeLinecap, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, hideDataPoints, paramsData, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key) {
-        return (_jsx(Animated.View, { onMoveShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onStartShouldSetResponder: function (evt) {
+        return (_jsx(Animated.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); }, onMoveShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onStartShouldSetResponder: function (evt) {
                 return pointerConfig && activatePointersInstantlyOnTouch ? true : false;
             }, onResponderGrant: function (evt) {
+                var _a;
                 if (!pointerConfig)
                     return;
                 setResponderStartTime(evt.timeStamp);
@@ -839,7 +846,9 @@ export var LineChart = function (props) {
                 }
                 var x = evt.nativeEvent.locationX;
                 activatePointers(x);
+                (_a = pointerConfig.onResponderGrant) === null || _a === void 0 ? void 0 : _a.call(pointerConfig);
             }, onResponderMove: function (evt) {
+                var _a;
                 if (!pointerConfig)
                     return;
                 if (activatePointersOnLongPress &&
@@ -854,11 +863,13 @@ export var LineChart = function (props) {
                     x > (props.width || Dimensions.get('window').width))
                     return;
                 activatePointers(x);
+                (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onResponderMove) === null || _a === void 0 ? void 0 : _a.call(pointerConfig);
             }, 
             // onResponderReject={evt => {
             //   console.log('evt...reject.......',evt);
             // }}
             onResponderEnd: function (evt) {
+                var _a;
                 // console.log('evt...end.......',evt);
                 setResponderStartTime(0);
                 if (resetPointerIndexOnRelease)
@@ -866,6 +877,7 @@ export var LineChart = function (props) {
                 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; }, 
             // onResponderTerminate={evt => {
             //   console.log('evt...terminate.......',evt);
@@ -1027,5 +1039,5 @@ export var LineChart = function (props) {
                             pointerItem5,
                         ].filter(function (item) { return !!item; }), pointerIndex) })) : null] }));
     };
-    return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { dataSet: dataSet, scrollRef: scrollRef, animatedWidth: widthValue, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps })));
+    return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { dataSet: dataSet, scrollRef: scrollRef, animatedWidth: widthValue, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps, nestedScrollEnabled: props.nestedScrollEnabled })));
 };

package/dist/PieChart/index.js

@@ -10,9 +10,10 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Platform, View } from 'react-native';
+import { View } from 'react-native';
 import { PieChartMain } from './main';
 import { usePieChart } from 'gifted-charts-core';
+import { isWebApp } from '../utils';
 export var PieChart = function (props) {
     var _a = usePieChart(props), radius = _a.radius, extraRadius = _a.extraRadius, selectedIndex = _a.selectedIndex, setSelectedIndex = _a.setSelectedIndex, startAngle = _a.startAngle, total = _a.total, donut = _a.donut, isThreeD = _a.isThreeD, semiCircle = _a.semiCircle, inwardExtraLengthForFocused = _a.inwardExtraLengthForFocused, canvasWidth = _a.canvasWidth, canvasHeight = _a.canvasHeight, innerRadius = _a.innerRadius, innerCircleColor = _a.innerCircleColor, innerCircleBorderWidth = _a.innerCircleBorderWidth, innerCircleBorderColor = _a.innerCircleBorderColor, shiftInnerCenterX = _a.shiftInnerCenterX, shiftInnerCenterY = _a.shiftInnerCenterY, tiltAngle = _a.tiltAngle, isDataShifted = _a.isDataShifted, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical;
     var renderInnerCircle = function (innerRadius, innerCircleBorderWidth) {
@@ -77,7 +78,7 @@ export var PieChart = function (props) {
                     position: 'absolute',
                     top: -extraRadius,
                     left: -extraRadius,
-                    zIndex: Platform.OS === 'web' ? -1 : 0, // was not getting displayed in web (using Expo)
+                    zIndex: isWebApp ? -1 : 0, // was not getting displayed in web (using Expo)
                 }, children: _jsx(PieChartMain, __assign({}, props, { data: [
                         __assign({}, props.data[selectedIndex]),
                         {

package/dist/PieChart/main.js

@@ -16,10 +16,10 @@ 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 { rnVersion } from '../utils';
+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;
@@ -28,8 +28,18 @@ 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 _a = e.nativeEvent, x = _a.locationX, y = _a.locationY;
+        var x = 0, y = 0;
+        if (isWebApp) {
+            x = e.clientX - left;
+            y = e.clientY - top;
+        }
+        else {
+            x = e.nativeEvent.locationX;
+            y = e.nativeEvent.locationY;
+        }
         x -= extraRadius;
         y -= extraRadius;
         setTouchX(x);
@@ -57,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/dist/RadarChart/index.js

@@ -4,7 +4,7 @@ import { Animated, View } from 'react-native';
 import Svg, { Line, Polygon, Circle, Text as SvgText, Defs, RadialGradient, Stop, } from 'react-native-svg';
 import { useRadarChart } from 'gifted-charts-core';
 export var RadarChart = function (props) {
-    var _a = useRadarChart(props), data = _a.data, dataSet = _a.dataSet, center = _a.center, radius = _a.radius, chartSize = _a.chartSize, polarToCartesian = _a.polarToCartesian, labels = _a.labels, labelConfigArray = _a.labelConfigArray, labelsPositionOffset = _a.labelsPositionOffset, dataLabelsConfigArray = _a.dataLabelsConfigArray, maxValue = _a.maxValue, dataLabels = _a.dataLabels, dataLabelsArray = _a.dataLabelsArray, gridSections = _a.gridSections, gridFill = _a.gridFill, fontSize = _a.fontSize, stroke = _a.stroke, textAnchor = _a.textAnchor, alignmentBaseline = _a.alignmentBaseline, fontWeight = _a.fontWeight, fontFamily = _a.fontFamily, dataLabelsPositionOffset = _a.dataLabelsPositionOffset, polygonStroke = _a.polygonStroke, polygonStrokeWidth = _a.polygonStrokeWidth, polygonStrokeDashArray = _a.polygonStrokeDashArray, polygonFill = _a.polygonFill, polygonGradientColor = _a.polygonGradientColor, polygonShowGradient = _a.polygonShowGradient, polygonOpacity = _a.polygonOpacity, polygonGradientOpacity = _a.polygonGradientOpacity, polygonIsAnimated = _a.polygonIsAnimated, polygonAnimationDuration = _a.polygonAnimationDuration, asterLinesStroke = _a.asterLinesStroke, asterLinesStrokeWidth = _a.asterLinesStrokeWidth, asterLinesStrokeDashArray = _a.asterLinesStrokeDashArray, polygonPoints = _a.polygonPoints, initialPolygonPoints = _a.initialPolygonPoints, polygonPointsArray = _a.polygonPointsArray, initialPolygonPointsArray = _a.initialPolygonPointsArray, polygonConfigArray = _a.polygonConfigArray, angleStep = _a.angleStep, circular = _a.circular, hideGrid = _a.hideGrid, hideAsterLines = _a.hideAsterLines, getGridLevelProps = _a.getGridLevelProps, animateTogether = _a.animateTogether;
+    var _a = useRadarChart(props), data = _a.data, dataSet = _a.dataSet, center = _a.center, radius = _a.radius, chartSize = _a.chartSize, polarToCartesian = _a.polarToCartesian, labels = _a.labels, labelConfigArray = _a.labelConfigArray, labelsPositionOffset = _a.labelsPositionOffset, dataLabelsConfigArray = _a.dataLabelsConfigArray, maxValue = _a.maxValue, dataLabels = _a.dataLabels, dataLabelsArray = _a.dataLabelsArray, gridSections = _a.gridSections, gridFill = _a.gridFill, fontSize = _a.fontSize, stroke = _a.stroke, textAnchor = _a.textAnchor, alignmentBaseline = _a.alignmentBaseline, fontWeight = _a.fontWeight, fontFamily = _a.fontFamily, dataLabelsPositionOffset = _a.dataLabelsPositionOffset, polygonStroke = _a.polygonStroke, polygonStrokeWidth = _a.polygonStrokeWidth, polygonStrokeDashArray = _a.polygonStrokeDashArray, polygonFill = _a.polygonFill, polygonGradientColor = _a.polygonGradientColor, polygonShowGradient = _a.polygonShowGradient, polygonOpacity = _a.polygonOpacity, polygonGradientOpacity = _a.polygonGradientOpacity, polygonIsAnimated = _a.polygonIsAnimated, polygonAnimationDuration = _a.polygonAnimationDuration, asterLinesStroke = _a.asterLinesStroke, asterLinesStrokeWidth = _a.asterLinesStrokeWidth, asterLinesStrokeDashArray = _a.asterLinesStrokeDashArray, polygonPoints = _a.polygonPoints, initialPolygonPoints = _a.initialPolygonPoints, polygonPointsArray = _a.polygonPointsArray, initialPolygonPointsArray = _a.initialPolygonPointsArray, polygonConfigArray = _a.polygonConfigArray, angleStep = _a.angleStep, circular = _a.circular, hideGrid = _a.hideGrid, hideLabels = _a.hideLabels, hideAsterLines = _a.hideAsterLines, getGridLevelProps = _a.getGridLevelProps, animateTogether = _a.animateTogether;
     var initialPolygonPointsAr = initialPolygonPoints.split(' ');
     var finalPolygonPointsAr = polygonPoints.split(' ');
     var AnimatedPolygon = Animated.createAnimatedComponent(Polygon);
@@ -96,16 +96,18 @@ export var RadarChart = function (props) {
                         var angle = index * angleStep;
                         var _a = polarToCartesian(angle, maxValue), x = _a.x, y = _a.y;
                         return (_jsx(Line, { x1: center, y1: center, x2: x, y2: y, stroke: asterLinesStroke, strokeWidth: asterLinesStrokeWidth, strokeDasharray: asterLinesStrokeDashArray }, "axis-".concat(index)));
-                    }), labels.map(function (category, index) {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-                    var angle = index * angleStep;
-                    var _q = polarToCartesian(angle, maxValue + labelsPositionOffset), x = _q.x, y = _q.y; // Offset for label position
-                    var fontSizeLocal = (_b = (_a = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : fontSize;
-                    var fontWeightLocal = (_d = (_c = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _c === void 0 ? void 0 : _c.fontWeight) !== null && _d !== void 0 ? _d : fontWeight;
-                    var fontFamilyLocal = (_f = (_e = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _e === void 0 ? void 0 : _e.fontFamily) !== null && _f !== void 0 ? _f : fontFamily;
-                    var colorLocal = (_h = (_g = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _g === void 0 ? void 0 : _g.stroke) !== null && _h !== void 0 ? _h : stroke;
-                    var textAnchorLocal = (_k = (_j = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _j === void 0 ? void 0 : _j.textAnchor) !== null && _k !== void 0 ? _k : textAnchor;
-                    var alignmentBaselineLocal = (_m = (_l = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _l === void 0 ? void 0 : _l.alignmentBaseline) !== null && _m !== void 0 ? _m : alignmentBaseline;
-                    return (_jsx(SvgText, { x: x, y: y, fontSize: fontSizeLocal, fontWeight: fontWeightLocal, fontFamily: fontFamilyLocal, fill: colorLocal, textAnchor: (_o = textAnchorLocal) !== null && _o !== void 0 ? _o : 'middle', alignmentBaseline: (_p = alignmentBaselineLocal) !== null && _p !== void 0 ? _p : 'middle', children: category }, "label-".concat(index)));
-                })] }) }));
+                    }), hideLabels
+                    ? null
+                    : labels.map(function (category, index) {
+                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+                        var angle = index * angleStep;
+                        var _q = polarToCartesian(angle, maxValue + labelsPositionOffset), x = _q.x, y = _q.y; // Offset for label position
+                        var fontSizeLocal = (_b = (_a = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : fontSize;
+                        var fontWeightLocal = (_d = (_c = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _c === void 0 ? void 0 : _c.fontWeight) !== null && _d !== void 0 ? _d : fontWeight;
+                        var fontFamilyLocal = (_f = (_e = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _e === void 0 ? void 0 : _e.fontFamily) !== null && _f !== void 0 ? _f : fontFamily;
+                        var colorLocal = (_h = (_g = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _g === void 0 ? void 0 : _g.stroke) !== null && _h !== void 0 ? _h : stroke;
+                        var textAnchorLocal = (_k = (_j = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _j === void 0 ? void 0 : _j.textAnchor) !== null && _k !== void 0 ? _k : textAnchor;
+                        var alignmentBaselineLocal = (_m = (_l = labelConfigArray === null || labelConfigArray === void 0 ? void 0 : labelConfigArray[index]) === null || _l === void 0 ? void 0 : _l.alignmentBaseline) !== null && _m !== void 0 ? _m : alignmentBaseline;
+                        return (_jsx(SvgText, { x: x, y: y, fontSize: fontSizeLocal, fontWeight: fontWeightLocal, fontFamily: fontFamilyLocal, fill: colorLocal, textAnchor: (_o = textAnchorLocal) !== null && _o !== void 0 ? _o : 'middle', alignmentBaseline: (_p = alignmentBaselineLocal) !== null && _p !== void 0 ? _p : 'middle', children: category }, "label-".concat(index)));
+                    })] }) }));
 };

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

@@ -1,6 +1,6 @@
 var _a, _b;
 import { useEffect, useRef } from 'react';
-import { Dimensions } from 'react-native';
+import { Dimensions, Platform } from 'react-native';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 var versionString = require('react-native/package.json').version;
 var versionAr = (_b = (_a = versionString === null || versionString === void 0 ? void 0 : versionString.split) === null || _a === void 0 ? void 0 : _a.call(versionString, '.')) !== null && _b !== void 0 ? _b : '';
@@ -18,3 +18,4 @@ export function usePrevious(value) {
     }, [value]); //this code will run when the value of 'value' changes
     return ref.current; //in the end, return the current ref value.
 }
+export var isWebApp = Platform.OS === 'web';

package/package.json

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