[Bugfix] Pie chart flicker on changing selected section

[sam1463]

Fixes #1148

Before:
https://github.com/user-attachments/assets/32644392-bd6b-43a0-be72-7d524241639f

After:
https://github.com/user-attachments/assets/49aa26b1-55dd-46d0-baf4-54f7722fd34e

[sam1463]

I made a local patch to address this as a workaround in the meantime, in case anyone else is experiencing this:

diff --git a/node_modules/react-native-gifted-charts/dist/PieChart/index.js b/node_modules/react-native-gifted-charts/dist/PieChart/index.js
index 52b48af..9df8c52 100644
--- a/node_modules/react-native-gifted-charts/dist/PieChart/index.js
+++ b/node_modules/react-native-gifted-charts/dist/PieChart/index.js
@@ -36,7 +36,6 @@ export var PieChart = function (props) {
     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) {
-        var _a, _b;
         if (props.centerLabelComponent || (donut && !isDataShifted)) {
             return (_jsx(View, { style: [
                     {
@@ -80,7 +79,7 @@ export var PieChart = function (props) {
                         borderRightWidth: 0.5,
                         borderRightColor: innerCircleColor,
                     },
-                ], pointerEvents: "box-none", children: _jsx(View, { style: { marginTop: semiCircle ? -0.5 * innerRadius : 0 }, children: (_b = (_a = props.centerLabelComponent) === null || _a === void 0 ? void 0 : _a.call(props, selectedIndex)) !== null && _b !== void 0 ? _b : null }) }));
+                ], children: _jsx(View, { style: { marginTop: semiCircle ? -0.5 * innerRadius : 0 }, children: props.centerLabelComponent ? props.centerLabelComponent(selectedIndex) : null }) }));
         }
         return null;
     };
@@ -123,7 +122,7 @@ export var PieChart = function (props) {
                 (props.semiCircle ? 1 : 2),
             width: (radius + extraRadius + paddingHorizontal / 2) * 2,
             overflow: 'hidden',
-        }, children: [_jsx(View, { style: { position: 'absolute' }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) }), renderInnerCircle(innerRadius, innerCircleBorderWidth), props.data.length > 1 &&
+        }, children: [_jsx(View, { style: { position: 'absolute' }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, 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: {
@@ -131,12 +130,5 @@ export var PieChart = function (props) {
                     top: -extraRadius,
                     left: -extraRadius,
                     zIndex: isWebApp ? -1 : 0, // was not getting displayed in web (using Expo)
-                }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, data: [
-                        __assign({}, props.data[selectedIndex]),
-                        {
-                            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] }));
+                }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, data: props.data.map(function (section, index) { return (__assign(__assign({}, section), { strokeWidth: index === selectedIndex ? undefined : section.strokeWidth, peripheral: index !== selectedIndex })); }), radius: radius + extraRadius, 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] }));
 };
diff --git a/node_modules/react-native-gifted-charts/dist/PieChart/main.js b/node_modules/react-native-gifted-charts/dist/PieChart/main.js
index 10debd6..38c75f3 100644
--- a/node_modules/react-native-gifted-charts/dist/PieChart/main.js
+++ b/node_modules/react-native-gifted-charts/dist/PieChart/main.js
@@ -88,29 +88,26 @@ 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 ? (_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;
-                            if (isBiggerPie && index)
-                                return null;
+                            var _a;
+                            var _b = coordinates[index], sx = _b.sx, sy = _b.sy, ax = _b.ax, ay = _b.ay;
                             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;
                                 var localPieInnerComponent = (_a = item.pieInnerComponent) !== null && _a !== void 0 ? _a : props.pieInnerComponent;
                                 var pieInnerComponentHeight = (_b = props.pieInnerComponentHeight) !== null && _b !== void 0 ? _b : 0;
                                 var pieInnerComponentWidth = (_c = props.pieInnerComponentWidth) !== null && _c !== void 0 ? _c : 0;
-                                if (isBiggerPie && index)
-                                    return null;
                                 if (!props.data[index].value)
                                     return null;
                                 var mx = cx * (1 + Math.sin(2 * pi * mData[index] + initialAngle));

[Abhinandan-Kushwaha]

Thanks for this valuable contribution @sam1463
I will merge it today

[Abhinandan-Kushwaha]

Hi @sam1463
With this change, if we use focusOnPress and showText props, then on focusing a Pie, the Pie texts are shown twice.

dualText.mov

Code-

const App = () => {
  const filteredData = [
    {
      label: '07:30',
      value: 21,
    },
    {
      label: '09:30',
      value: 21,
    },
    {
      label: '11:30',
      value: 16,
    },
    {
      label: '01:30',
      value: 3,
    },
    {
      label: '03:30',
      value: 3,
    },
    {
      label: '05:30',
      value: 2,
    },
    {
      label: '07:30',
      value: 15,
    },
  ];

  return (
    <View style={styles.container}>
      <PieChart
      data={filteredData}
      showText
      showValuesAsLabels
      donut
      focusOnPress
      />
    </View>
  );
}

[sam1463]

Oh good point. I think that's a result of my deletion in line 238, which was completely unnecessary. I'll revert that change.

[sam1463]

@Abhinandan-Kushwaha can you take another look when you have a chance?

[Abhinandan-Kushwaha]

sure @sam1463 i will review this by this weekend