react-native-gifted-charts 1.4.68 → 1.4.70

package/dist/BarChart/RenderStackBars.js

@@ -22,7 +22,7 @@ var RenderStackBars = function (props) {
     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(TouchableOpacity, { disabled: disablePress || (stackHighlightEnabled && !highlightEnabled), activeOpacity: activeOpacity, onPress: function () {
-                setSelectedIndex(index);
+                setSelectedIndex([index]);
                 if (item.onPress) {
                     item.onPress();
                 }
@@ -84,7 +84,7 @@ var RenderStackBars = function (props) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         var remainingBarMarginBottom = barMarginBottom;
         return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { disabled: disablePress || (stackHighlightEnabled && !highlightEnabled), activeOpacity: activeOpacity, onPress: function () {
-                        setSelectedIndex(index);
+                        setSelectedIndex([index]);
                         if (item.onPress) {
                             item.onPress();
                         }

package/dist/BarChart/index.js

@@ -47,7 +47,7 @@ export var BarChart = function (props) {
         bounces: props.bounces,
         overScrollMode: (_b = props.overScrollMode) !== null && _b !== void 0 ? _b : 'auto',
     };
-    var _d = useBarChart(__assign(__assign({}, props), { heightValue: heightValue, widthValue: widthValue, opacityValue: opacityValue, parentWidth: (_c = props.parentWidth) !== null && _c !== void 0 ? _c : screenWidth })), lineConfig = _d.lineConfig, hidePointer1 = _d.hidePointer1, pointerItem = _d.pointerItem, pointerY = _d.pointerY, pointerConfig = _d.pointerConfig, pointerColor = _d.pointerColor, pointerX = _d.pointerX, pointerComponent = _d.pointerComponent, pointerHeight = _d.pointerHeight, pointerRadius = _d.pointerRadius, pointerWidth = _d.pointerWidth, autoAdjustPointerLabelPosition = _d.autoAdjustPointerLabelPosition, pointerLabelWidth = _d.pointerLabelWidth, activatePointersOnLongPress = _d.activatePointersOnLongPress, yAxisLabelWidth = _d.yAxisLabelWidth, shiftPointerLabelX = _d.shiftPointerLabelX, pointerLabelHeight = _d.pointerLabelHeight, pointerStripUptoDataPoint = _d.pointerStripUptoDataPoint, pointerStripHeight = _d.pointerStripHeight, shiftPointerLabelY = _d.shiftPointerLabelY, showPointerStrip = _d.showPointerStrip, pointerStripWidth = _d.pointerStripWidth, containerHeight = _d.containerHeight, xAxisThickness = _d.xAxisThickness, pointerStripColor = _d.pointerStripColor, pointerEvents = _d.pointerEvents, setResponderStartTime = _d.setResponderStartTime, setPointerY = _d.setPointerY, setPointerItem = _d.setPointerItem, initialSpacing = _d.initialSpacing, spacing = _d.spacing, data = _d.data, barWidth = _d.barWidth, setPointerX = _d.setPointerX, pointerIndex = _d.pointerIndex, setPointerIndex = _d.setPointerIndex, maxValue = _d.maxValue, responderStartTime = _d.responderStartTime, setResponderActive = _d.setResponderActive, activatePointersDelay = _d.activatePointersDelay, persistPointer = _d.persistPointer, pointerVanishDelay = _d.pointerVanishDelay, containerHeightIncludingBelowXAxis = _d.containerHeightIncludingBelowXAxis, extendedContainerHeight = _d.extendedContainerHeight, totalWidth = _d.totalWidth, stripBehindBars = _d.stripBehindBars, noOfSectionsBelowXAxis = _d.noOfSectionsBelowXAxis, stepHeight = _d.stepHeight, xAxisLabelsVerticalShift = _d.xAxisLabelsVerticalShift, labelsExtraHeight = _d.labelsExtraHeight, stripOverPointer = _d.stripOverPointer, pointerLabelComponent = _d.pointerLabelComponent, selectedIndex = _d.selectedIndex, setSelectedIndex = _d.setSelectedIndex, selectedStackIndex = _d.selectedStackIndex, setSelectedStackIndex = _d.setSelectedStackIndex, isAnimated = _d.isAnimated, animationDuration = _d.animationDuration, side = _d.side, labelWidth = _d.labelWidth, isThreeD = _d.isThreeD, animatedHeight = _d.animatedHeight, appearingOpacity = _d.appearingOpacity, autoShiftLabels = _d.autoShiftLabels, getPropsCommonForBarAndStack = _d.getPropsCommonForBarAndStack, barAndLineChartsWrapperProps = _d.barAndLineChartsWrapperProps, autoShiftLabelsForNegativeStacks = _d.autoShiftLabelsForNegativeStacks, showLine = _d.showLine, points2 = _d.points2;
+    var _d = useBarChart(__assign(__assign({}, props), { heightValue: heightValue, widthValue: widthValue, opacityValue: opacityValue, parentWidth: (_c = props.parentWidth) !== null && _c !== void 0 ? _c : screenWidth })), lineConfig = _d.lineConfig, lineConfig2 = _d.lineConfig2, hidePointer1 = _d.hidePointer1, pointerItem = _d.pointerItem, pointerY = _d.pointerY, pointerConfig = _d.pointerConfig, pointerColor = _d.pointerColor, pointerX = _d.pointerX, pointerComponent = _d.pointerComponent, pointerHeight = _d.pointerHeight, pointerRadius = _d.pointerRadius, pointerWidth = _d.pointerWidth, autoAdjustPointerLabelPosition = _d.autoAdjustPointerLabelPosition, pointerLabelWidth = _d.pointerLabelWidth, activatePointersOnLongPress = _d.activatePointersOnLongPress, yAxisLabelWidth = _d.yAxisLabelWidth, shiftPointerLabelX = _d.shiftPointerLabelX, pointerLabelHeight = _d.pointerLabelHeight, pointerStripUptoDataPoint = _d.pointerStripUptoDataPoint, pointerStripHeight = _d.pointerStripHeight, shiftPointerLabelY = _d.shiftPointerLabelY, showPointerStrip = _d.showPointerStrip, pointerStripWidth = _d.pointerStripWidth, containerHeight = _d.containerHeight, xAxisThickness = _d.xAxisThickness, pointerStripColor = _d.pointerStripColor, pointerEvents = _d.pointerEvents, setResponderStartTime = _d.setResponderStartTime, setPointerY = _d.setPointerY, setPointerItem = _d.setPointerItem, initialSpacing = _d.initialSpacing, spacing = _d.spacing, data = _d.data, barWidth = _d.barWidth, setPointerX = _d.setPointerX, pointerIndex = _d.pointerIndex, setPointerIndex = _d.setPointerIndex, maxValue = _d.maxValue, responderStartTime = _d.responderStartTime, setResponderActive = _d.setResponderActive, activatePointersDelay = _d.activatePointersDelay, persistPointer = _d.persistPointer, pointerVanishDelay = _d.pointerVanishDelay, containerHeightIncludingBelowXAxis = _d.containerHeightIncludingBelowXAxis, extendedContainerHeight = _d.extendedContainerHeight, totalWidth = _d.totalWidth, stripBehindBars = _d.stripBehindBars, noOfSectionsBelowXAxis = _d.noOfSectionsBelowXAxis, stepHeight = _d.stepHeight, xAxisLabelsVerticalShift = _d.xAxisLabelsVerticalShift, labelsExtraHeight = _d.labelsExtraHeight, stripOverPointer = _d.stripOverPointer, pointerLabelComponent = _d.pointerLabelComponent, selectedIndex = _d.selectedIndex, setSelectedIndex = _d.setSelectedIndex, selectedStackIndex = _d.selectedStackIndex, setSelectedStackIndex = _d.setSelectedStackIndex, isAnimated = _d.isAnimated, animationDuration = _d.animationDuration, side = _d.side, labelWidth = _d.labelWidth, isThreeD = _d.isThreeD, animatedHeight = _d.animatedHeight, appearingOpacity = _d.appearingOpacity, autoShiftLabels = _d.autoShiftLabels, getPropsCommonForBarAndStack = _d.getPropsCommonForBarAndStack, barAndLineChartsWrapperProps = _d.barAndLineChartsWrapperProps, autoShiftLabelsForNegativeStacks = _d.autoShiftLabelsForNegativeStacks, showLine = _d.showLine, points2 = _d.points2;
     var _e = useBarAndLineChartsWrapper(__assign(__assign({}, barAndLineChartsWrapperProps), { isRTL: I18nManager.isRTL })), lineInBarChartProps = _e.lineInBarChartProps, lineInBarChartProps2 = _e.lineInBarChartProps2;
     var stackData = barAndLineChartsWrapperProps.stackData;
     var labelsAppear = useCallback(function () {
@@ -228,6 +228,12 @@ export var BarChart = function (props) {
                         setSelectedStackIndex(-1);
                         // props.setHighlightedStackIndex?.(-1)
                     }
+                    if (lineConfig.focusEnabled) {
+                        lineConfig.setFocusedDataPointIndex(-1);
+                    }
+                    if (lineConfig2.focusEnabled) {
+                        lineConfig2.setFocusedDataPointIndex(-1);
+                    }
                     (_b = props.onBackgroundPress) === null || _b === void 0 ? void 0 : _b.call(props);
                 }, children: [renderChart(), 
                     // Only For Bar Charts-

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

@@ -4,6 +4,7 @@ import Svg, { Path } from 'react-native-svg';
 import { renderSpecificVerticalLines } from './renderSpecificVerticalLines';
 import { renderDataPoints } from './renderDataPoints';
 import { renderSpecificDataPoints } from './renderSpecificDataPoints';
+import { isIos } from '../../../utils';
 var RenderLineInBarChart = function (props) {
     var _a, _b;
     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;
@@ -13,6 +14,7 @@ var RenderLineInBarChart = function (props) {
             ? 1
             : lowlightOpacity
         : 1;
+    var svgHeight = containerHeightIncludingBelowXAxis + labelsExtraHeight;
     var dataPointsProps = {
         data: data,
         lineConfig: lineConfig,
@@ -25,6 +27,8 @@ var RenderLineInBarChart = function (props) {
         selectedIndex: selectedIndex[0],
         yAxisOffset: yAxisOffset,
         opacity: opacity,
+        svgHeight: svgHeight,
+        totalWidth: totalWidth,
     };
     var specificVerticalLinesProps = {
         data: data,
@@ -49,21 +53,21 @@ var RenderLineInBarChart = function (props) {
     };
     var renderAnimatedLine = function () {
         var _a, _b, _c;
-        return (_jsx(Animated.View, { pointerEvents: "none", style: {
+        return (_jsx(Animated.View, { pointerEvents: isIos ? 'none' : 'box-none', style: {
                 position: 'absolute',
-                height: containerHeightIncludingBelowXAxis + labelsExtraHeight,
+                height: svgHeight,
                 left: 6 - yAxisLabelWidth,
                 bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
                 width: animatedWidth,
                 zIndex: lineBehindBars ? -1 : 100000,
                 // backgroundColor: 'wheat',
-            }, 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
+            }, children: _jsxs(Svg, { pointerEvents: isIos ? 'none' : 'box-none', 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 }))] }) }));
     };
     var renderLine = function () {
         var _a, _b, _c;
-        return (_jsx(View, { pointerEvents: "none", style: {
+        return (_jsx(View, { pointerEvents: isIos ? 'none' : 'box-none', style: {
                 position: 'absolute',
                 height: containerHeightIncludingBelowXAxis + labelsExtraHeight,
                 left: 6 - yAxisLabelWidth,
@@ -71,7 +75,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", opacity: opacity, stroke: lineConfig.color, strokeWidth: lineConfig.thickness, strokeDasharray: lineConfig.strokeDashArray }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
+            }, children: _jsxs(Svg, { pointerEvents: isIos ? 'none' : 'box-none', 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.d.ts

@@ -1,2 +1,2 @@
 import { DataPointProps } from 'gifted-charts-core';
-export declare const renderDataPoints: (props: DataPointProps) => (import("react/jsx-runtime").JSX.Element | null)[];
+export declare const renderDataPoints: (props: DataPointProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,51 +1,85 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { styles } from '../../../BarChart/styles';
-import { View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { getXForLineInBar, getYForLineInBar } from 'gifted-charts-core';
-import { Rect, Text as CanvasText, Circle } from 'react-native-svg';
+import { Rect, Text as CanvasText, Circle, ForeignObject, } from 'react-native-svg';
+import { isWebApp } from '../../../utils';
 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, opacity = props.opacity;
-    return data.map(function (item, index) {
-        var _a, _b, _c, _d, _e;
-        if (index < lineConfig.startIndex ||
-            index > lineConfig.endIndex ||
-            item.hideDataPoint) {
-            return null;
-        }
-        var currentBarWidth = item.barWidth || barWidth || 30;
-        var customDataPoint = item.customDataPoint || lineConfig.customDataPoint;
-        var dataPointColor = lineConfig.focusEnabled &&
-            index === ((_a = lineConfig.focusedDataPointIndex) !== null && _a !== void 0 ? _a : selectedIndex)
-            ? lineConfig.focusedDataPointColor
-            : lineConfig.dataPointsColor;
-        var dataPointRadius = lineConfig.focusEnabled &&
-            index === ((_b = lineConfig.focusedDataPointIndex) !== null && _b !== void 0 ? _b : selectedIndex)
-            ? lineConfig.focusedDataPointRadius
-            : lineConfig.dataPointsRadius;
-        var value = (_c = item.value) !== null && _c !== void 0 ? _c : item.stacks.reduce(function (total, item) { return total + item.value; }, 0);
-        if (customDataPoint) {
-            return (_jsx(View, { style: [
-                    styles.customDataPointContainer,
-                    {
-                        opacity: opacity,
-                        height: lineConfig.dataPointsHeight,
-                        width: lineConfig.dataPointsWidth,
-                        top: containerHeight -
-                            (value * containerHeight) / maxValue -
-                            ((_e = (_d = item.shiftY) !== null && _d !== void 0 ? _d : lineConfig.shiftY) !== null && _e !== void 0 ? _e : 0),
-                        left: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing),
-                    },
-                ], children: customDataPoint(item, index) }));
-        }
-        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, 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, 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));
-    });
+    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, svgHeight = props.svgHeight, totalWidth = props.totalWidth;
+    var focusEnabled = lineConfig.focusEnabled, dataPointLabelComponent = lineConfig.dataPointLabelComponent, showDataPointLabelOnFocus = lineConfig.showDataPointLabelOnFocus, focusedDataPointIndex = lineConfig.focusedDataPointIndex, setFocusedDataPointIndex = lineConfig.setFocusedDataPointIndex;
+    return (_jsxs(_Fragment, { children: [data.map(function (item, index) {
+                var _a, _b, _c;
+                if (index < lineConfig.startIndex ||
+                    index > lineConfig.endIndex ||
+                    item.hideDataPoint) {
+                    return null;
+                }
+                var currentBarWidth = item.barWidth || barWidth || 30;
+                var customDataPoint = item.customDataPoint || lineConfig.customDataPoint;
+                var dataPointColor = lineConfig.focusEnabled && index === focusedDataPointIndex
+                    ? lineConfig.focusedDataPointColor
+                    : lineConfig.dataPointsColor;
+                var dataPointRadius = lineConfig.focusEnabled && index === focusedDataPointIndex
+                    ? lineConfig.focusedDataPointRadius
+                    : lineConfig.dataPointsRadius;
+                var value = (_a = item.value) !== null && _a !== void 0 ? _a : item.stacks.reduce(function (total, item) { return total + item.value; }, 0);
+                var x = getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing);
+                var y = getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset);
+                if (customDataPoint) {
+                    return (_jsx(TouchableOpacity, { style: [
+                            styles.customDataPointContainer,
+                            {
+                                opacity: opacity,
+                                height: lineConfig.dataPointsHeight,
+                                width: lineConfig.dataPointsWidth,
+                                top: containerHeight -
+                                    (value * containerHeight) / maxValue -
+                                    ((_c = (_b = item.shiftY) !== null && _b !== void 0 ? _b : lineConfig.shiftY) !== null && _c !== void 0 ? _c : 0),
+                                left: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing),
+                            },
+                        ], onPress: function () {
+                            if (focusEnabled)
+                                setFocusedDataPointIndex(index);
+                        }, children: customDataPoint(item, index) }, index + '.' + value + 'custom'));
+                }
+                if (lineConfig.dataPointsShape === 'rectangular') {
+                    return (_jsxs(Fragment, { children: [_jsx(Rect, { x: x, y: y - lineConfig.dataPointsHeight / 2, width: lineConfig.dataPointsWidth, height: lineConfig.dataPointsHeight, fill: dataPointColor, opacity: opacity, onPress: function () {
+                                    if (focusEnabled)
+                                        setFocusedDataPointIndex(index);
+                                } }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, opacity: opacity, fontSize: item.textFontSize || lineConfig.textFontSize, x: x + (item.textShiftX || lineConfig.textShiftX || 0), y: y -
+                                    lineConfig.dataPointsHeight / 2 +
+                                    (item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index + '.' + value + 'rect'));
+                }
+                return (_jsxs(Fragment, { children: [_jsx(Circle, { cx: x, cy: y, r: dataPointRadius, fill: dataPointColor, opacity: opacity, onPress: function () {
+                                if (focusEnabled)
+                                    setFocusedDataPointIndex(index);
+                            } }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, opacity: opacity, fontSize: item.textFontSize || lineConfig.textFontSize, x: x + (item.textShiftX || lineConfig.textShiftX || 0), y: y -
+                                lineConfig.dataPointsHeight / 2 +
+                                (item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index + '.' + value + 'circ'));
+            }), dataPointLabelComponent
+                ? data.map(function (item, index) {
+                    var _a;
+                    if (index < lineConfig.startIndex ||
+                        index > lineConfig.endIndex ||
+                        item.hideDataPoint) {
+                        return null;
+                    }
+                    var currentBarWidth = item.barWidth || barWidth || 30;
+                    var value = (_a = item.value) !== null && _a !== void 0 ? _a : item.stacks.reduce(function (total, item) { return total + item.value; }, 0);
+                    var x = getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing);
+                    var y = getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset);
+                    if (isWebApp)
+                        return (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: x - 12, y: y - 24, children: showDataPointLabelOnFocus
+                                ? focusedDataPointIndex === index
+                                    ? dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index)
+                                    : null
+                                : dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index) }, index + '.' + value + 'label'));
+                    return (_jsx(View, { style: { top: y - 24, left: x - 12, position: 'absolute' }, children: showDataPointLabelOnFocus
+                            ? focusedDataPointIndex === index
+                                ? dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index)
+                                : null
+                            : dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index) }, index + '.' + value + 'label'));
+                })
+                : null] }));
 };

package/dist/Components/Rotatable.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type RotatablePieProps = {
+    initialAngle: number;
+    size: number;
+    children: React.ReactNode;
+    onAngleChange?: (angle: number) => void;
+};
+export declare function RotatablePie({ initialAngle, size, children, onAngleChange, }: RotatablePieProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/Rotatable.js

@@ -0,0 +1,132 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
+import { View, PanResponder, Animated, StyleSheet, } from 'react-native';
+// ----------------------------------------
+// Ultra-smooth animation helper
+// Throttles to ~60 FPS AND applies low-pass filtering
+// ----------------------------------------
+function createSmoothUpdater(animatedValue, smoothing, fps) {
+    if (smoothing === void 0) { smoothing = 0.15; }
+    if (fps === void 0) { fps = 60; }
+    var frameDelay = 1000 / fps;
+    var lastTime = 0;
+    var filtered = 0; // low-pass output
+    var timeout = null;
+    return function (target) {
+        var now = Date.now();
+        var diff = now - lastTime;
+        var update = function () {
+            // low-pass filter (natural smoothing)
+            filtered = filtered * (1 - smoothing) + target * smoothing;
+            animatedValue.setValue(filtered);
+        };
+        if (diff >= frameDelay) {
+            lastTime = now;
+            update();
+        }
+        else {
+            clearTimeout(timeout);
+            timeout = setTimeout(function () {
+                lastTime = Date.now();
+                update();
+            }, frameDelay - diff);
+        }
+    };
+}
+export function RotatablePie(_a) {
+    var initialAngle = _a.initialAngle, size = _a.size, children = _a.children, onAngleChange = _a.onAngleChange;
+    var angle = useRef(new Animated.Value(initialAngle)).current;
+    var _b = __read(useState({ x: size / 2, y: size / 2 }), 2), center = _b[0], setCenter = _b[1];
+    var gestureStartAngle = useRef(0);
+    var startAngle = useRef(initialAngle);
+    // Create smooth updater ONCE
+    var smoothSetAngle = useRef(createSmoothUpdater(angle, 0.15, 60)).current;
+    useEffect(function () {
+        angle.setValue(initialAngle);
+        startAngle.current = initialAngle;
+    }, [initialAngle, angle]);
+    useEffect(function () {
+        var id = angle.addListener(function (_a) {
+            var value = _a.value;
+            return onAngleChange === null || onAngleChange === void 0 ? void 0 : onAngleChange(value);
+        });
+        return function () { return angle.removeListener(id); };
+    }, [angle, onAngleChange]);
+    var onLayout = function (e) {
+        var _a = e.nativeEvent.layout, width = _a.width, height = _a.height;
+        setCenter({ x: width / 2, y: height / 2 });
+    };
+    var getTouchAngleDeg = function (x, y) {
+        var dx = x - center.x;
+        var dy = y - center.y;
+        var rad = Math.atan2(dy, dx);
+        return (rad * 180) / Math.PI;
+    };
+    var panResponder = useRef(PanResponder.create({
+        onStartShouldSetPanResponder: function () { return true; },
+        onMoveShouldSetPanResponder: function () { return true; },
+        onPanResponderGrant: function (evt) {
+            var _a = evt.nativeEvent, locationX = _a.locationX, locationY = _a.locationY;
+            gestureStartAngle.current = getTouchAngleDeg(locationX, locationY);
+            angle.stopAnimation(function (current) {
+                startAngle.current = current;
+            });
+        },
+        onPanResponderMove: function (evt) {
+            var _a = evt.nativeEvent, locationX = _a.locationX, locationY = _a.locationY;
+            var currentAngle = getTouchAngleDeg(locationX, locationY);
+            var delta = currentAngle - gestureStartAngle.current;
+            if (delta > 180)
+                delta -= 360;
+            if (delta < -180)
+                delta += 360;
+            var next = startAngle.current + delta;
+            // 🔥 SUPER SMOOTH UPDATE
+            smoothSetAngle(next);
+        },
+    })).current;
+    var rotateInterpolation = angle.interpolate({
+        inputRange: [-360, 360],
+        outputRange: ['-360deg', '360deg'],
+    });
+    return (_jsx(View, __assign({ onLayout: onLayout, style: [styles.container, { width: size, height: size }] }, panResponder.panHandlers, { children: _jsx(Animated.View, { style: {
+                width: size,
+                height: size,
+                justifyContent: 'center',
+                alignItems: 'center',
+                transform: [{ rotate: rotateInterpolation }],
+            }, children: children }) })));
+}
+var styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

package/dist/LineChart/index.js

@@ -38,7 +38,7 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useCallback, useEffect, useMemo, useRef } from 'react';
 import { View, Animated, Easing, Text, Dimensions, I18nManager, } from 'react-native';
-import { screenWidth, usePrevious } from '../utils';
+import { isWebApp, screenWidth, usePrevious } from '../utils';
 import Svg, { Path, LinearGradient, Stop, Circle, Rect, Text as CanvasText, Line, ClipPath, Use, ForeignObject, Defs, Mask, } from 'react-native-svg';
 import { getSegmentedPathObjects, getRegionPathObjects, RANGE_ENTER, RANGE_EXIT, SEGMENT_END, SEGMENT_START, STOP, svgPath, useLineChart, adjustToOffset, LineDefaults, pointsWithPaddedRepititions, } from 'gifted-charts-core';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
@@ -260,7 +260,7 @@ export var LineChart = function (props) {
     var renderDataPoints = function (hideDataPoints, dataForRender, originalDataFromProps, dataPtsShape, dataPtsWidth, dataPtsHeight, dataPtsColor, dataPtsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key) {
         var getYOrSecondaryY = isSecondary ? getSecondaryY : getY;
         return dataForRender.map(function (item, index) {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
             if (index < startIndex || index > endIndex)
                 return null;
             if (item.hideDataPoint) {
@@ -328,9 +328,18 @@ export var LineChart = function (props) {
             return (_jsxs(Fragment, { children: [focusEnabled ? (_jsx(_Fragment, { children: key === lastLineNumber - 1 ? (_jsx(Rect, { x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight - 0, fill: 'none', onPressIn: function (evt) {
                                 var locationY = evt.nativeEvent.locationY; // Note that we have another property named pageY which can be useful
                                 handleFocus(index, item, locationY, onStripPress);
-                            }, onPressOut: handleUnFocus })) : null })) : null, hideDataPoints ? null : (_jsxs(_Fragment, { children: [customDataPoint ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: initialSpacing -
+                            }, onPressOut: handleUnFocus })) : null })) : null, hideDataPoints ? null : (_jsxs(_Fragment, { children: [customDataPoint ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: initialSpacing -
                                     dataPointsWidth / 2 +
-                                    ((_e = spacingArray[index - 1]) !== null && _e !== void 0 ? _e : 0), y: getYOrSecondaryY(item.value) - dataPointsHeight / 2, children: customDataPoint(item, index) })) : null, dataPointsShape === 'rectangular' ? (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(Rect, { x: getX(spacingArray, index) - dataPointsWidth / 2, y: getYOrSecondaryY(item.value) - dataPointsHeight / 2, width: dataPointsWidth, height: dataPointsHeight, fill: showDataPointOnFocus
+                                    ((_e = spacingArray[index - 1]) !== null && _e !== void 0 ? _e : 0), y: getYOrSecondaryY(item.value) - dataPointsHeight / 2, children: customDataPoint(item, index) })) : (_jsx(Animated.View, { style: {
+                                    position: 'absolute',
+                                    // height: svgHeight,
+                                    // width: totalWidth,
+                                    left: initialSpacing -
+                                        dataPointsWidth / 2 +
+                                        ((_f = spacingArray[index - 1]) !== null && _f !== void 0 ? _f : 0),
+                                    top: getYOrSecondaryY(item.value) - dataPointsHeight / 2,
+                                    opacity: isAnimated ? appearingOpacity : 1,
+                                }, children: customDataPoint(item, index) }))) : null, dataPointsShape === 'rectangular' ? (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(Rect, { x: getX(spacingArray, index) - dataPointsWidth / 2, y: getYOrSecondaryY(item.value) - dataPointsHeight / 2, width: dataPointsWidth, height: dataPointsHeight, fill: showDataPointOnFocus
                                         ? index === selectedIndex
                                             ? dataPointsColor
                                             : 'none'
@@ -362,7 +371,7 @@ export var LineChart = function (props) {
                                         if (!item.onPress && !props.onPress && focusEnabled) {
                                             handleUnFocus();
                                         }
-                                    } })) }, index)), dataPointLabelComponent ? (!showTextOnFocus || index === selectedIndex ? (_jsx(ForeignObject, { height: svgHeight, width: dataPointLabelWidth, x: initialSpacing +
+                                    } })) }, index)), dataPointLabelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: dataPointLabelWidth, x: initialSpacing +
                                     (item.dataPointLabelShiftX ||
                                         props.dataPointLabelShiftX ||
                                         0) -
@@ -376,7 +385,27 @@ export var LineChart = function (props) {
                                         (focusTogether || key == selectedLineNumber)
                                         ? dataPointLabelComponent(item, index) // not pushed in latest release
                                         : null
-                                    : dataPointLabelComponent(item, index) })) : null) : text || item.dataPointText ? (!showTextOnFocus || index === selectedIndex ? (_jsx(CanvasText, { fill: item.textColor || textColor, fontSize: item.textFontSize || textFontSize, x: getX(spacingArray, index) -
+                                    : dataPointLabelComponent(item, index) })) : (_jsx(View, { style: {
+                                    position: 'absolute',
+                                    height: svgHeight,
+                                    width: dataPointLabelWidth,
+                                    left: initialSpacing +
+                                        (item.dataPointLabelShiftX ||
+                                            props.dataPointLabelShiftX ||
+                                            0) -
+                                        dataPointLabelWidth / 2 +
+                                        spacing * index,
+                                    top: containerHeight +
+                                        (item.dataPointLabelShiftY ||
+                                            props.dataPointLabelShiftY ||
+                                            0) -
+                                        (item.value * containerHeight) / maxValue,
+                                }, children: showDataPointLabelOnFocus
+                                    ? index === selectedIndex &&
+                                        (focusTogether || key == selectedLineNumber)
+                                        ? dataPointLabelComponent(item, index) // not pushed in latest release
+                                        : null
+                                    : dataPointLabelComponent(item, index) }))) : null) : text || item.dataPointText ? (!showTextOnFocus || index === selectedIndex ? (_jsx(CanvasText, { fill: item.textColor || textColor, fontSize: item.textFontSize || textFontSize, x: getX(spacingArray, index) -
                                     dataPointsWidth +
                                     (item.textShiftX || props.textShiftX || 0), y: getYOrSecondaryY(item.value) -
                                     dataPointsHeight / 2 +
@@ -840,6 +869,8 @@ 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) {
+        if (!points)
+            return null;
         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) {
@@ -905,6 +936,8 @@ 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) {
+        if (!points)
+            return null;
         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) {

package/dist/PieChart/index.d.ts

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

package/dist/PieChart/index.js

@@ -31,8 +31,11 @@ import { PieChartMain } from './main';
 import { pieColors, usePieChart } from 'gifted-charts-core';
 import { isWebApp } from '../utils';
 import { useState } from 'react';
+import { RotatablePie } from '../Components/Rotatable';
 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, data = _a.data, showTooltip = _a.showTooltip, tooltipHorizontalShift = _a.tooltipHorizontalShift, tooltipVerticalShift = _a.tooltipVerticalShift, tooltipComponent = _a.tooltipComponent, getTooltipText = _a.getTooltipText, tooltipBackgroundColor = _a.tooltipBackgroundColor, tooltipBorderRadius = _a.tooltipBorderRadius, tooltipWidth = _a.tooltipWidth, tooltipTextNoOfLines = _a.tooltipTextNoOfLines, textColor = _a.textColor, textSize = _a.textSize, font = _a.font, fontWeight = _a.fontWeight, fontStyle = _a.fontStyle, tooltipSelectedIndex = _a.tooltipSelectedIndex, setTooltipSelectedIndex = _a.setTooltipSelectedIndex;
+    if (!props.data)
+        return null;
+    var _a = usePieChart(props), radius = _a.radius, extraRadius = _a.extraRadius, selectedIndex = _a.selectedIndex, setSelectedIndex = _a.setSelectedIndex, startAngle = _a.startAngle, total = _a.total, donut = _a.donut, isThreeD = _a.isThreeD, semiCircle = _a.semiCircle, inwardExtraLengthForFocused = _a.inwardExtraLengthForFocused, canvasWidth = _a.canvasWidth, canvasHeight = _a.canvasHeight, innerRadius = _a.innerRadius, innerCircleColor = _a.innerCircleColor, innerCircleBorderWidth = _a.innerCircleBorderWidth, innerCircleBorderColor = _a.innerCircleBorderColor, shiftInnerCenterX = _a.shiftInnerCenterX, shiftInnerCenterY = _a.shiftInnerCenterY, tiltAngle = _a.tiltAngle, isDataShifted = _a.isDataShifted, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, data = _a.data, showTooltip = _a.showTooltip, tooltipHorizontalShift = _a.tooltipHorizontalShift, tooltipVerticalShift = _a.tooltipVerticalShift, tooltipComponent = _a.tooltipComponent, getTooltipText = _a.getTooltipText, tooltipBackgroundColor = _a.tooltipBackgroundColor, tooltipBorderRadius = _a.tooltipBorderRadius, tooltipWidth = _a.tooltipWidth, tooltipTextNoOfLines = _a.tooltipTextNoOfLines, textColor = _a.textColor, textSize = _a.textSize, font = _a.font, fontWeight = _a.fontWeight, fontStyle = _a.fontStyle, tooltipSelectedIndex = _a.tooltipSelectedIndex, setTooltipSelectedIndex = _a.setTooltipSelectedIndex, rotatable = _a.rotatable;
     var _b = __read(useState(0), 2), touchX = _b[0], setTouchX = _b[1];
     var _c = __read(useState(0), 2), touchY = _c[0], setTouchY = _c[1];
     var renderInnerCircle = function (innerRadius, innerCircleBorderWidth) {
@@ -117,29 +120,34 @@ export var PieChart = function (props) {
                         fontStyle: fontStyle,
                     }, children: getTooltipText(tooltipSelectedIndex) }) })) }));
     };
-    // if (!total) return null;
-    return (_jsxs(View, { style: {
-            height: (radius + extraRadius + paddingVertical / 2) *
-                (props.semiCircle ? 1 : 2),
-            width: (radius + extraRadius + paddingHorizontal / 2) * 2,
-            overflow: 'hidden',
-        }, children: [_jsx(View, { style: { position: 'absolute' }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) }), renderInnerCircle(innerRadius, innerCircleBorderWidth), props.data.length > 1 &&
-                props.data[selectedIndex] && // don't forget to add this one so there are no errors when the data is empty / updating
-                (props.focusOnPress || props.sectionAutoFocus) &&
-                selectedIndex !== -1 && (_jsx(View, { pointerEvents: "box-none", style: {
-                    position: 'absolute',
-                    top: -extraRadius,
-                    left: -extraRadius,
-                    zIndex: isWebApp ? -1 : 0, // was not getting displayed in web (using Expo)
-                }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, data: [
-                        __assign(__assign({}, props.data[selectedIndex]), { color: props.showGradient
-                                ? "url(#grad".concat(selectedIndex, ")")
-                                : props.data[selectedIndex].color ||
-                                    pieColors[selectedIndex % 9] }),
-                        {
-                            value: total - props.data[selectedIndex].value,
-                            peripheral: true,
-                            strokeWidth: 0,
-                        },
-                    ], radius: radius + extraRadius, initialAngle: startAngle, innerRadius: props.innerRadius || radius / 2.5, isBiggerPie: true, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) })), renderInnerCircle(innerRadius - inwardExtraLengthForFocused, inwardExtraLengthForFocused ? 0 : innerCircleBorderWidth), showTooltip && tooltipSelectedIndex !== -1 ? renderTooltip() : null] }));
+    var PieChartBody = function () {
+        return (_jsxs(View, { style: {
+                height: (radius + extraRadius + paddingVertical / 2) *
+                    (props.semiCircle ? 1 : 2),
+                width: (radius + extraRadius + paddingHorizontal / 2) * 2,
+                overflow: 'hidden',
+            }, children: [_jsx(View, { style: { position: 'absolute' }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, selectedIndex: selectedIndex, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) }), renderInnerCircle(innerRadius, innerCircleBorderWidth), props.data.length > 1 &&
+                    props.data[selectedIndex] && // don't forget to add this one so there are no errors when the data is empty / updating
+                    (props.focusOnPress || props.sectionAutoFocus) &&
+                    selectedIndex !== -1 && (_jsx(View, { pointerEvents: "box-none", style: {
+                        position: 'absolute',
+                        top: -extraRadius,
+                        left: -extraRadius,
+                        zIndex: isWebApp ? -1 : 0, // was not getting displayed in web (using Expo)
+                    }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, data: [
+                            __assign(__assign({}, props.data[selectedIndex]), { color: props.showGradient
+                                    ? "url(#grad".concat(selectedIndex, ")")
+                                    : props.data[selectedIndex].color ||
+                                        pieColors[selectedIndex % 9] }),
+                            {
+                                value: total - props.data[selectedIndex].value,
+                                peripheral: true,
+                                strokeWidth: 0,
+                            },
+                        ], radius: radius + extraRadius, initialAngle: startAngle, innerRadius: props.innerRadius || radius / 2.5, isBiggerPie: true, selectedIndex: selectedIndex, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) })), renderInnerCircle(innerRadius - inwardExtraLengthForFocused, inwardExtraLengthForFocused ? 0 : innerCircleBorderWidth), showTooltip && tooltipSelectedIndex !== -1 ? renderTooltip() : null] }));
+    };
+    if (rotatable && !semiCircle) {
+        return (_jsx(RotatablePie, { children: [_jsx(PieChartBody, {}, "PieChartBody")], initialAngle: startAngle, size: radius * 2 }));
+    }
+    return _jsx(PieChartBody, {});
 };

package/dist/PieChart/main.js

@@ -21,13 +21,14 @@ import Svg, { Path, Circle, Text as SvgText, Defs, RadialGradient, Stop, G, Line
 import { getPieChartMainProps, pieColors, } from 'gifted-charts-core';
 import { isWebApp, rnVersion } from '../utils';
 export var PieChartMain = function (props) {
-    var _a = getPieChartMainProps(props), isThreeD = _a.isThreeD, isBiggerPie = _a.isBiggerPie, data = _a.data, showInnerComponent = _a.showInnerComponent, radius = _a.radius, canvasWidth = _a.canvasWidth, canvasHeight = _a.canvasHeight, shadowWidth = _a.shadowWidth, backgroundColor = _a.backgroundColor, shadowColor = _a.shadowColor, semiCircle = _a.semiCircle, pi = _a.pi, initialAngle = _a.initialAngle, shadow = _a.shadow, donut = _a.donut, strokeWidth = _a.strokeWidth, strokeColor = _a.strokeColor, innerRadius = _a.innerRadius, showText = _a.showText, textColor = _a.textColor, textSize = _a.textSize, tiltAngle = _a.tiltAngle, labelsPosition = _a.labelsPosition, showTextBackground = _a.showTextBackground, textBackgroundColor = _a.textBackgroundColor, showValuesAsLabels = _a.showValuesAsLabels, showGradient = _a.showGradient, gradientCenterColor = _a.gradientCenterColor, minShiftX = _a.minShiftX, minShiftY = _a.minShiftY, total = _a.total, horizAdjustment = _a.horizAdjustment, vertAdjustment = _a.vertAdjustment, cx = _a.cx, cy = _a.cy, mData = _a.mData, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, extraRadius = _a.extraRadius, showExternalLabels = _a.showExternalLabels, getExternaLabelProperties = _a.getExternaLabelProperties, coordinates = _a.coordinates, onPressed = _a.onPressed, font = _a.font, fontWeight = _a.fontWeight, fontStyle = _a.fontStyle, edgesPressable = _a.edgesPressable;
+    var _a;
+    var _b = getPieChartMainProps(props), isThreeD = _b.isThreeD, isBiggerPie = _b.isBiggerPie, data = _b.data, showInnerComponent = _b.showInnerComponent, radius = _b.radius, canvasWidth = _b.canvasWidth, canvasHeight = _b.canvasHeight, shadowWidth = _b.shadowWidth, backgroundColor = _b.backgroundColor, shadowColor = _b.shadowColor, semiCircle = _b.semiCircle, pi = _b.pi, initialAngle = _b.initialAngle, shadow = _b.shadow, donut = _b.donut, strokeWidth = _b.strokeWidth, strokeColor = _b.strokeColor, innerRadius = _b.innerRadius, showText = _b.showText, textColor = _b.textColor, textSize = _b.textSize, tiltAngle = _b.tiltAngle, labelsPosition = _b.labelsPosition, showTextBackground = _b.showTextBackground, textBackgroundColor = _b.textBackgroundColor, showValuesAsLabels = _b.showValuesAsLabels, showGradient = _b.showGradient, gradientCenterColor = _b.gradientCenterColor, minShiftX = _b.minShiftX, minShiftY = _b.minShiftY, total = _b.total, horizAdjustment = _b.horizAdjustment, vertAdjustment = _b.vertAdjustment, cx = _b.cx, cy = _b.cy, mData = _b.mData, paddingHorizontal = _b.paddingHorizontal, paddingVertical = _b.paddingVertical, extraRadius = _b.extraRadius, showExternalLabels = _b.showExternalLabels, getExternaLabelProperties = _b.getExternaLabelProperties, coordinates = _b.coordinates, onPressed = _b.onPressed, font = _b.font, fontWeight = _b.fontWeight, fontStyle = _b.fontStyle, edgesPressable = _b.edgesPressable;
     var setTouchX = props.setTouchX, setTouchY = props.setTouchY;
     var prevSide = 'right';
     var prevLabelComponentX = 0;
     var wasFirstItemOnPole = false;
-    var _b = __read(useState(0), 2), top = _b[0], setTop = _b[1];
-    var _c = __read(useState(0), 2), left = _c[0], setLeft = _c[1];
+    var _c = __read(useState(0), 2), top = _c[0], setTop = _c[1];
+    var _d = __read(useState(0), 2), left = _d[0], setLeft = _d[1];
     var onPressHandler = function (e) {
         var x = 0, y = 0;
         if (isWebApp) {
@@ -88,21 +89,22 @@ export var PieChartMain = function (props) {
                         vertAdjustment +
                         (vertAdjustment ? strokeWidth : 0)), height: (radius + extraRadius) * 2 + strokeWidth + paddingVertical, width: (radius + extraRadius) * 2 + strokeWidth + paddingHorizontal, children: [_jsx(Defs, { children: data.map(function (item, index) {
                                 return (_jsxs(RadialGradient, { id: 'grad' + index, cx: "50%", cy: "50%", rx: "50%", ry: "50%", fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "0%", stopColor: item.gradientCenterColor || gradientCenterColor, stopOpacity: "1" }), _jsx(Stop, { offset: "100%", stopColor: item.color || pieColors[index % 9], stopOpacity: "1" })] }, index + ''));
-                            }) }), (data.length === 1 || !total) ? (_jsx(_Fragment, { children: _jsx(Circle, { cx: cx, cy: cy, r: radius, fill: showGradient
+                            }) }), data.length === 1 || !total ? (_jsx(_Fragment, { children: _jsx(Circle, { cx: cx, cy: cy, r: radius, fill: showGradient
                                     ? "url(#grad".concat(0, ")")
-                                    : data[0].color || pieColors[0 % 9] }) })) : (data.map(function (item, index) {
-                            var _a = coordinates[index], sx = _a.sx, sy = _a.sy, ax = _a.ax, ay = _a.ay;
+                                    : ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.color) || pieColors[0 % 9] }) })) : (data.map(function (item, index) {
+                            var _a;
+                            var _b = coordinates[index], sx = _b.sx, sy = _b.sy, ax = _b.ax, ay = _b.ay;
                             if (isBiggerPie && index)
                                 return null;
                             return (_jsx(Path, { d: "M ".concat(cx + (item.shiftX || 0), " ").concat(cy + (item.shiftY || 0), " L ").concat(sx, " ").concat(sy, " A ").concat(radius, " ").concat(radius, " 0 ").concat(semiCircle ? 0 : data[index].value > total / 2 ? 1 : 0, " 1 ").concat(ax, " ").concat(ay, " L ").concat(cx + (item.shiftX || 0), " ").concat(cy + (item.shiftY || 0)), stroke: item.strokeColor || strokeColor, strokeWidth: props.focusOnPress && props.selectedIndex === index
                                     ? 0
                                     : item.strokeWidth === 0
                                         ? 0
-                                        : item.strokeWidth || strokeWidth, fill: props.selectedIndex === index || item.peripheral
+                                        : item.strokeWidth || strokeWidth, fill: item.peripheral
                                     ? 'none'
                                     : showGradient
                                         ? "url(#grad".concat(index, ")")
-                                        : item.color || pieColors[index % 9] }, index + 'a'));
+                                        : item.color || pieColors[isBiggerPie ? (_a = props.selectedIndex) !== null && _a !== void 0 ? _a : 0 % 9 : index % 9] }, index + 'a'));
                         })), (showText || showInnerComponent || showExternalLabels) &&
                             data.map(function (item, index) {
                                 var _a, _b, _c, _d, _e, _f, _g, _h, _j;
@@ -161,7 +163,7 @@ export var PieChartMain = function (props) {
                                                 item.textSize ||
                                                 textSize, fill: item.textBackgroundColor || textBackgroundColor })) : null, showText && (_jsx(SvgText, { fill: item.textColor ||
                                                 textColor ||
-                                                pieColors[(index + 2) % 9], fontSize: item.textSize || textSize, fontFamily: item.font || font, fontWeight: item.fontWeight || fontWeight, fontStyle: item.fontStyle || fontStyle || 'normal', x: x +
+                                                'black', fontSize: item.textSize || textSize, fontFamily: item.font || font, fontWeight: item.fontWeight || fontWeight, fontStyle: item.fontStyle || fontStyle || 'normal', x: x +
                                                 (item.shiftTextX || 0) -
                                                 (item.textSize || textSize) / 1.8, y: y + (item.shiftTextY || 0), children: item.text || (showValuesAsLabels ? item.value + '' : '') })), localPieInnerComponent ? (_jsx(G, { x: x - pieInnerComponentHeight / 2, y: y - pieInnerComponentWidth / 2, children: (_j = localPieInnerComponent === null || localPieInnerComponent === void 0 ? void 0 : localPieInnerComponent(item, index)) !== null && _j !== void 0 ? _j : null })) : null] }, index));
                             })] }), isThreeD && shadow && !semiCircle ? (_jsx(View, { style: {

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

@@ -19,3 +19,4 @@ export function usePrevious(value) {
     return ref.current; //in the end, return the current ref value.
 }
 export var isWebApp = Platform.OS === 'web';
+export var isIos = Platform.OS === 'ios';

package/package.json

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