Waffle Chart
Progress to a goal (one item) or parts of a whole (several), as squares or dots that fill in one by one. Bars move and fade on the native UI thread, so they stay smooth on iOS and Android even while your app is busy.
<WaffleChart />2 variantsNew 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.
WaffleChart.tsx
<WaffleChart data={[{ label: "Saved", value: 72 }]} />Props
| Prop | Type | Default |
|---|---|---|
| data One item = value of `max` (100). Several = parts of the sum. | { label, value, color? }[] | — |
| max The whole. | number | 100 / sum |
| rows / columns / gap Grid. | number | 10 / 10 / 4 |
| shape / maxCellSize / trackColor Cell look. | "square" | "circle" / number / string | "square" / 28 / muted |
| showLegend Legend with values. | boolean | true |
| selectedIndex / onSelect Highlight a part. | number | null / (index, datum) => void | — |
| animate / emptyText / accessibilityLabel Motion, empty state, screen-reader label. | boolean / string / string | true / "No data" / generated |
Did you like the content?