FormidableLabs / FormidableLabs/victory-native-xl
Pie.SliceAngularInset hides narrow donut slices on Web
- Dominant language
- TypeScript
- Stars
- 1.2k
- Forks
- 109
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 3
Description
### Prerequisites
- [x] I have searched the open [issues](https://www.github.com/FormidableLabs/victory-native-xl/issues) to make sure I'm not opening a duplicate issue
- [x] I have read through the [docs](https://www.formidable.com/open-source/victory-native-xl/docs) before asking a question
- [x] 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:
```tsx
{({ slice }) => (
<>
{(position) => (
)}
)}
```
Example data shape:
```ts
[
{ 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.
Contributor guide
Research direction
Start by reproducing the chart structure using PolarChart, Pie.Chart, Pie.Slice, and Pie.SliceAngularInset in the reported web/Electron environment. Toggle Pie.SliceAngularInset and compare the result with iOS and with the provided example data; done means narrow slices remain visible on web while the angular inset is enabled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- electron, react-native, typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 50/100