3D Donut
A tilted 3D ring with shaded walls. Tap a slice and it lifts out with its cut faces showing.
<Donut3D />1 variantNew in 2.0.1
Live — the real React Native component rendered with react-native-web. Tap, drag and scrub it.
Installation
terminal
npx expo install expo-charts react-native-svgUsage
Import the component and pass your data. Width defaults to the parent, so it adapts to phones, tablets and rotation.
Donut3D.tsx
<Donut3D data={[{ label: "Housing", value: 1450 }, { label: "Food", value: 620 }]}/>Props
| Prop | Type | Default |
|---|---|---|
| data Slices. | { label, value, color? }[] | — |
| size / innerRadius / tilt / depth / pop 3D look. | number | 300 / 0.55 / 0.55 / 22 / 10 |
| showLegend Legend with percentages. | boolean | true |
| formatValue Centre total. | (v) => string | compact |
| selectedIndex / defaultIndex Controlled or initial selection. | number | null | — / null |
| onSelect Tap or drag (haptics via ChartProvider). | (index, datum) => void | — |
| animate / accessibilityLabel Motion and screen-reader label. | boolean / string | true / generated |
Did you like the content?