Pie.SliceAngularInset hides narrow donut slices on Web

[rozhkovs]

Prerequisites

• I have searched the open issues to make sure I'm not opening a duplicate issue
• I have read through the docs before asking a question
• I am using the latest version of victory-native-xl

Describe Your Environment

What version of victory-native-xl are you using? (can be found by running npm list --depth 0 victory-native)

victory-native@41.20.2

What version of React and React Native are you using?

react@19.0.0
react-native@0.79.6

What version of Reanimated and React Native Skia are you using?

react-native-reanimated@3.17.4
@shopify/react-native-skia@2.3.0

Are you using Expo or React Native CLI?

Expo (expo@53.0.22)

What platform are you on? (e.g., iOS, Android)

Web, reproduced in Electron via react-native-web
For comparison, the same chart renders correctly on iOS

Describe the Problem

I am rendering a donut chart with PolarChart, Pie.Chart, Pie.Slice, Pie.Label, and Pie.SliceAngularInset.

On iOS, the chart renders correctly and all slices are visible.

On web (reproduced in Electron, which renders the app through react-native-web), when Pie.SliceAngularInset is enabled, only the dominant slice is visible. Smaller slices disappear visually, even though the labels still indicate that multiple slices exist.

If I disable Pie.SliceAngularInset on web, all slices immediately appear again. That strongly suggests the issue is related to Pie.SliceAngularInset rendering on web rather than the input data.

With Pie.SliceAngularInset

Without Pie.SliceAngularInset

Expected behavior: [What you expect to happen]

All pie/donut slices should remain visible on web when using Pie.SliceAngularInset, just like on iOS.

Actual behavior: [What actually happens]

On web/Electron, enabling Pie.SliceAngularInset causes narrow slices to disappear visually, leaving only the largest slice rendered.

Additional Information

This is the relevant chart structure:

<PolarChart
  data={chartItems}
  labelKey="label"
  valueKey="value"
  colorKey="color"
  containerStyle={{ flex: 1 }}
>
  <Pie.Chart innerRadius="62%" size={188}>
    {({ slice }) => (
      <>
        <Pie.Slice>
          <Pie.Label radiusOffset={1}>
            {(position) => (
              <CustomSliceLabel
                position={position}
                slice={slice}
              />
            )}
          </Pie.Label>
        </Pie.Slice>

        <Pie.SliceAngularInset
          angularInset={{
            angularStrokeColor: "#141416",
            angularStrokeWidth: 3,
          }}
        />
      </>
    )}
  </Pie.Chart>
</PolarChart>

Example data shape:

[
  { label: "Pet-project", value: 505000, color: "#b54be6" },
  { label: "No tag", value: 286000, color: "#575759" },
  { label: "Learning", value: 28000, color: "#39d353" }
]

Observed behavior:

iOS: all 3 slices are visible
web/Electron: only the largest slice is visible
web/Electron without Pie.SliceAngularInset: all 3 slices are visible again

This looks related to web rendering of Pie.SliceAngularInset, possibly when the chart contains narrow slices.

Disclosure: this issue text was prepared with the help of an AI coding agent and then reviewed before posting.