@harveylx/react-native-gifted-charts 1.4.72 → 1.4.74

package/README.md

@@ -20,7 +20,7 @@
     <img src="/demos/redditLogo.png" height="auto" width="32" height="32" />
   </a>
 </p>
-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.
+The most loved 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.
 
 ### Yet another chart library? Why?
 

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/index.js

@@ -27,10 +27,10 @@ var isCloseToLeft = function (_a, endReachedOffset) {
         contentSize.width - endReachedOffset);
 };
 var BarAndLineChartsWrapper = function (props) {
-    var _a, _b, _c, _d, _e;
-    var chartType = props.chartType, containerHeight = props.containerHeight, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, stepHeight = props.stepHeight, labelsExtraHeight = props.labelsExtraHeight, yAxisLabelWidth = props.yAxisLabelWidth, horizontal = props.horizontal, scrollRef = props.scrollRef, initialSpacing = props.initialSpacing, data = props.data, barWidth = props.barWidth, xAxisThickness = props.xAxisThickness, totalWidth = props.totalWidth, disableScroll = props.disableScroll, showScrollIndicator = props.showScrollIndicator, scrollToEnd = props.scrollToEnd, scrollToIndex = props.scrollToIndex, scrollAnimation = props.scrollAnimation, indicatorColor = props.indicatorColor, spacing = props.spacing, renderChartContent = props.renderChartContent, remainingScrollViewProps = props.remainingScrollViewProps, endSpacing = props.endSpacing, hideAxesAndRules = props.hideAxesAndRules, showXAxisIndices = props.showXAxisIndices, xAxisIndicesHeight = props.xAxisIndicesHeight, xAxisIndicesWidth = props.xAxisIndicesWidth, xAxisIndicesColor = props.xAxisIndicesColor, pointerConfig = props.pointerConfig, getPointerProps = props.getPointerProps, pointerIndex = props.pointerIndex, pointerX = props.pointerX, pointerY = props.pointerY, onEndReached = props.onEndReached, onStartReached = props.onStartReached, endReachedOffset = props.endReachedOffset, onMomentumScrollEnd = props.onMomentumScrollEnd, onScrollEndDrag = props.onScrollEndDrag, nestedScrollEnabled = props.nestedScrollEnabled, _f = props.extraWidthDueToDataPoint, extraWidthDueToDataPoint = _f === void 0 ? 0 : _f, // extraWidthDueToDataPoint will be receved from props onlhy in case of LineCharts, for other charts it will be undefined and will default to 0
-    showBackgroundSlices = props.showBackgroundSlices;
-    var _g = useBarAndLineChartsWrapper(__assign(__assign({}, props), { isRTL: I18nManager.isRTL })), containerHeightIncludingBelowXAxis = _g.containerHeightIncludingBelowXAxis, xAxisLabelsVerticalShift = _g.xAxisLabelsVerticalShift, trimYAxisAtTop = _g.trimYAxisAtTop, yAxisExtraHeight = _g.yAxisExtraHeight, overflowTop = _g.overflowTop, xAxisLabelsHeight = _g.xAxisLabelsHeight, xAxisTextNumberOfLines = _g.xAxisTextNumberOfLines, actualContainerWidth = _g.actualContainerWidth, transformForHorizontal = _g.transformForHorizontal, horizSectionProps = _g.horizSectionProps, referenceLinesOverChartContent = _g.referenceLinesOverChartContent, setCanMomentum = _g.setCanMomentum, isCloseToStart = _g.isCloseToStart, isCloseToEnd = _g.isCloseToEnd, canMomentum = _g.canMomentum, yAxisAtTop = _g.yAxisAtTop, yAxisThickness = _g.yAxisThickness, yAxisSide = _g.yAxisSide, showVerticalLines = _g.showVerticalLines, verticalLinesProps = _g.verticalLinesProps;
+    var _a, _b, _c, _d, _e, _f;
+    var chartType = props.chartType, containerHeight = props.containerHeight, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, stepHeight = props.stepHeight, labelsExtraHeight = props.labelsExtraHeight, yAxisLabelWidth = props.yAxisLabelWidth, horizontal = props.horizontal, scrollRef = props.scrollRef, initialSpacing = props.initialSpacing, data = props.data, barWidth = props.barWidth, xAxisThickness = props.xAxisThickness, totalWidth = props.totalWidth, disableScroll = props.disableScroll, showScrollIndicator = props.showScrollIndicator, scrollToEnd = props.scrollToEnd, scrollToIndex = props.scrollToIndex, scrollAnimation = props.scrollAnimation, indicatorColor = props.indicatorColor, spacing = props.spacing, renderChartContent = props.renderChartContent, remainingScrollViewProps = props.remainingScrollViewProps, endSpacing = props.endSpacing, hideAxesAndRules = props.hideAxesAndRules, showXAxisIndices = props.showXAxisIndices, xAxisIndicesHeight = props.xAxisIndicesHeight, xAxisIndicesWidth = props.xAxisIndicesWidth, xAxisIndicesColor = props.xAxisIndicesColor, pointerConfig = props.pointerConfig, getPointerProps = props.getPointerProps, pointerIndex = props.pointerIndex, pointerX = props.pointerX, pointerY = props.pointerY, onEndReached = props.onEndReached, onStartReached = props.onStartReached, endReachedOffset = props.endReachedOffset, onMomentumScrollEnd = props.onMomentumScrollEnd, onScrollEndDrag = props.onScrollEndDrag, nestedScrollEnabled = props.nestedScrollEnabled, _g = props.extraWidthDueToDataPoint, extraWidthDueToDataPoint = _g === void 0 ? 0 : _g, // extraWidthDueToDataPoint will be receved from props onlhy in case of LineCharts, for other charts it will be undefined and will default to 0
+    backgroundSlices = props.backgroundSlices;
+    var _h = useBarAndLineChartsWrapper(__assign(__assign({}, props), { isRTL: I18nManager.isRTL })), containerHeightIncludingBelowXAxis = _h.containerHeightIncludingBelowXAxis, xAxisLabelsVerticalShift = _h.xAxisLabelsVerticalShift, trimYAxisAtTop = _h.trimYAxisAtTop, yAxisExtraHeight = _h.yAxisExtraHeight, overflowTop = _h.overflowTop, xAxisLabelsHeight = _h.xAxisLabelsHeight, xAxisTextNumberOfLines = _h.xAxisTextNumberOfLines, actualContainerWidth = _h.actualContainerWidth, transformForHorizontal = _h.transformForHorizontal, horizSectionProps = _h.horizSectionProps, referenceLinesOverChartContent = _h.referenceLinesOverChartContent, setCanMomentum = _h.setCanMomentum, isCloseToStart = _h.isCloseToStart, isCloseToEnd = _h.isCloseToEnd, canMomentum = _h.canMomentum, yAxisAtTop = _h.yAxisAtTop, yAxisThickness = _h.yAxisThickness, yAxisSide = _h.yAxisSide, showVerticalLines = _h.showVerticalLines, verticalLinesProps = _h.verticalLinesProps;
     useEffect(function () {
         if (pointerConfig && getPointerProps) {
             getPointerProps({ pointerIndex: pointerIndex, pointerX: pointerX, pointerY: pointerY });
@@ -128,7 +128,7 @@ var BarAndLineChartsWrapper = function (props) {
                             animated: scrollAnimation,
                         });
                     }
-                } }, remainingScrollViewProps, { children: _jsxs(Fragment, { children: [showBackgroundSlices && chartType === chartTypes.LINE ? (_jsx(View, { style: {
+                } }, remainingScrollViewProps, { children: _jsxs(Fragment, { children: [(backgroundSlices === null || backgroundSlices === void 0 ? void 0 : backgroundSlices.length) && chartType === chartTypes.LINE ? (_jsx(View, { style: {
                                 position: 'absolute',
                                 bottom: 61 + xAxisLabelsVerticalShift,
                                 left: initialSpacing,
@@ -136,7 +136,8 @@ var BarAndLineChartsWrapper = function (props) {
                                 width: totalWidth,
                                 zIndex: -1,
                             }, children: renderBackgroundSlices({
-                                data: data || [],
+                                backgroundSlices: backgroundSlices,
+                                dataLength: (_f = data === null || data === void 0 ? void 0 : data.length) !== null && _f !== void 0 ? _f : 0,
                                 endSpacing: endSpacing,
                                 totalWidth: totalWidth,
                             }) })) : null, showVerticalLines ? (_jsx(RenderVerticalLines, __assign({}, verticalLinesProps))) : null, 

package/dist/Components/BarAndLineChartsWrapper/renderBackgroundSlices.d.ts

@@ -1,7 +1,9 @@
+import { BackgroundSlice } from '@harveylx/gifted-charts-core';
 interface RenderBackgroundSlicesProps {
-    data: any[];
+    backgroundSlices: BackgroundSlice[];
+    dataLength: number;
     endSpacing?: number;
     totalWidth: number;
 }
-export declare const renderBackgroundSlices: (props: RenderBackgroundSlicesProps) => (import("react/jsx-runtime").JSX.Element | null)[] | null;
+export declare const renderBackgroundSlices: (props: RenderBackgroundSlicesProps) => import("react/jsx-runtime").JSX.Element[] | null;
 export {};

package/dist/Components/BarAndLineChartsWrapper/renderBackgroundSlices.js

@@ -1,30 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { View } from 'react-native';
+import { View, PixelRatio } from 'react-native';
 export var renderBackgroundSlices = function (props) {
-    var data = props.data, totalWidth = props.totalWidth, _a = props.endSpacing, endSpacing = _a === void 0 ? 0 : _a;
-    if (!data || data.length === 0) {
+    var backgroundSlices = props.backgroundSlices, dataLength = props.dataLength, totalWidth = props.totalWidth, _a = props.endSpacing, endSpacing = _a === void 0 ? 0 : _a;
+    if (!backgroundSlices.length || dataLength === 0) {
         return null;
     }
-    // Calculate total chart width
     var totalChartWidth = totalWidth - endSpacing;
-    // Each slice gets equal width based on TOTAL data length (not filtered)
-    var sliceWidth = totalChartWidth / data.length;
-    // Map over ALL data items, preserving original index positions
-    return data.map(function (item, index) {
-        // Skip rendering if no background slice color specified
-        if (!item.backgroundSliceColor) {
-            return null;
-        }
-        // Use original data index for position
+    var unitWidth = totalChartWidth / dataLength;
+    return backgroundSlices.map(function (slice, i) {
+        var left = PixelRatio.roundToNearestPixel(unitWidth * slice.from);
+        var right = PixelRatio.roundToNearestPixel(unitWidth * slice.to);
         return (_jsx(View, { style: {
                 position: 'absolute',
-                left: sliceWidth * index,
+                left: left,
                 top: 0,
                 bottom: 0,
-                width: sliceWidth,
-                backgroundColor: item.backgroundSliceColor,
+                width: right - left,
+                backgroundColor: slice.color,
                 zIndex: -100,
-                opacity: 0.35,
-            } }, "bg-slice-".concat(item.id, "-").concat(index)));
+                opacity: 1,
+            } }, "bg-slice-".concat(i)));
     });
 };

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

@@ -4,7 +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';
+import { isIos, isWebApp } 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;
@@ -15,6 +15,7 @@ var RenderLineInBarChart = function (props) {
             : lowlightOpacity
         : 1;
     var svgHeight = containerHeightIncludingBelowXAxis + labelsExtraHeight;
+    var svgHeightProp = isWebApp ? svgHeight : undefined;
     var dataPointsProps = {
         data: data,
         lineConfig: lineConfig,
@@ -61,7 +62,7 @@ var RenderLineInBarChart = function (props) {
                 width: animatedWidth,
                 zIndex: lineBehindBars ? -1 : 100000,
                 // backgroundColor: 'wheat',
-            }, 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
+            }, children: _jsxs(Svg, { pointerEvents: isIos ? 'none' : 'box-none', height: svgHeightProp, width: isWebApp ? animatedWidth : undefined, 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 }))] }) }));
     };
@@ -75,7 +76,7 @@ var RenderLineInBarChart = function (props) {
                 width: totalWidth,
                 zIndex: lineBehindBars ? -1 : 100000,
                 // backgroundColor: 'rgba(200,150,150,0.1)'
-            }, 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
+            }, children: _jsxs(Svg, { pointerEvents: isIos ? 'none' : 'box-none', height: svgHeightProp, width: isWebApp ? totalWidth : undefined, 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

@@ -1,21 +1,5 @@
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, useState } from 'react';
+import { Fragment } from 'react';
 import { styles } from '../../../BarChart/styles';
 import { TouchableOpacity, View } from 'react-native';
 import { getXForLineInBar, getYForLineInBar } from '@harveylx/gifted-charts-core';
@@ -23,8 +7,7 @@ import { Rect, Text as CanvasText, Circle, ForeignObject, } from 'react-native-s
 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, svgHeight = props.svgHeight, totalWidth = props.totalWidth;
-    var focusEnabled = lineConfig.focusEnabled, dataPointLabelComponent = lineConfig.dataPointLabelComponent, showDataPointLabelOnFocus = lineConfig.showDataPointLabelOnFocus, focusedDataPointIndex = lineConfig.focusedDataPointIndex;
-    var _a = __read(useState(focusedDataPointIndex !== null && focusedDataPointIndex !== void 0 ? focusedDataPointIndex : -1), 2), selectedDataPointIndex = _a[0], setSelectedDataPointIndex = _a[1];
+    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 ||
@@ -34,10 +17,10 @@ export var renderDataPoints = function (props) {
                 }
                 var currentBarWidth = item.barWidth || barWidth || 30;
                 var customDataPoint = item.customDataPoint || lineConfig.customDataPoint;
-                var dataPointColor = lineConfig.focusEnabled && index === selectedDataPointIndex
+                var dataPointColor = lineConfig.focusEnabled && index === focusedDataPointIndex
                     ? lineConfig.focusedDataPointColor
                     : lineConfig.dataPointsColor;
-                var dataPointRadius = lineConfig.focusEnabled && index === selectedDataPointIndex
+                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);
@@ -57,20 +40,20 @@ export var renderDataPoints = function (props) {
                             },
                         ], onPress: function () {
                             if (focusEnabled)
-                                setSelectedDataPointIndex(index);
+                                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)
-                                        setSelectedDataPointIndex(index);
+                                        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)
-                                    setSelectedDataPointIndex(index);
+                                    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'));
@@ -88,12 +71,12 @@ export var renderDataPoints = function (props) {
                     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
-                                ? selectedDataPointIndex === index
+                                ? 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
-                            ? selectedDataPointIndex === index
+                            ? 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'));

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

@@ -869,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) {
@@ -934,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) {
@@ -1133,5 +1137,5 @@ export var LineChart = function (props) {
                         pointerConfig.dynamicLegendContainerStyle,
                     ], children: pointerConfig.dynamicLegendComponent(pointerItemLocal, pointerIndex) })) : null] }));
     };
-    return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { dataSet: dataSet, scrollRef: scrollRef, animatedWidth: widthValue, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps, nestedScrollEnabled: props.nestedScrollEnabled, showBackgroundSlices: props.showBackgroundSlices })));
+    return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { dataSet: dataSet, scrollRef: scrollRef, animatedWidth: widthValue, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps, nestedScrollEnabled: props.nestedScrollEnabled, backgroundSlices: props.backgroundSlices })));
 };

package/dist/PieChart/index.js

@@ -31,10 +31,11 @@ import { PieChartMain } from './main';
 import { pieColors, usePieChart } from '@harveylx/gifted-charts-core';
 import { isWebApp } from '../utils';
 import { useState } from 'react';
+import { RotatablePie } from '../Components/Rotatable';
 export var PieChart = function (props) {
     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;
+    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) {
@@ -119,28 +120,34 @@ export var PieChart = function (props) {
                         fontStyle: fontStyle,
                     }, children: getTooltipText(tooltipSelectedIndex) }) })) }));
     };
-    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

@@ -92,18 +92,19 @@ export var PieChartMain = function (props) {
                             }) }), data.length === 1 || !total ? (_jsx(_Fragment, { children: _jsx(Circle, { cx: cx, cy: cy, r: radius, fill: showGradient
                                     ? "url(#grad".concat(0, ")")
                                     : ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.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;
+                            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;
@@ -162,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harveylx/react-native-gifted-charts",
-  "version": "1.4.72",
+  "version": "1.4.74",
   "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": [
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@react-native/babel-preset": "^0.76.9",
-    "@harveylx/gifted-charts-core": "0.1.72"
+    "@harveylx/gifted-charts-core": "0.1.74"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",