All components
Data Display
PieChart
beta
Since 1.1
Pie or donut chart showing category proportions, with a percentage legend.
Data Display
primitive
Display
Documented
import { PieChart } from '@ivim/native/components';
When to use
Use when
Showing parts of a whole with a handful of categories.
Don't use when
Precise comparison matters, or there are many slices — use a bar chart.
Playground
Adjust the controls to preview live prop combinations. The code snippet updates to match the current selection.
Intellect
17%
Strength
33%
Discipline
50%
variant
variant
default
muted
<PieChart />
Example
Preview
Code
Weight Care
55%
Labs
27%
Meals
18%
Guidelines
Do
Use innerRadius for a donut when you want a label in the center.
Don't
Don't exceed ~5 slices; small wedges are hard to compare.
Accessibility
Roles and screen-reader behavior this component provides, plus keyboard interactions.
•
role="img" with an aria-label; the legend lists each category and its share.
State coverage
Interaction and visual states this component supports.
base
semantic color
density
Token references
Semantic design tokens this component page exercises. Tap one to edit it live.
Related components
Components that solve adjacent problems or compose with this one.