Bead Chart
Water glasses, workouts, check-ins: columns of dots, one per unit, up to a goal. Drag across to read each day.
<BeadChart />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.
BeadChart.tsx
<BeadChart data={[{ label: "M", value: 6 }, { label: "T", value: 8 }]} maxDots={8}/>Props
| Prop | Type | Default |
|---|---|---|
| data One column each. | { label, value, color? }[] | — |
| unit / maxDots Value of one dot; dots per column (the goal). | number | 1 / largest |
| dotSize / dotGap / gap Geometry. | number | auto / 4 / 8 |
| color / trackColor / inactiveOpacity Colours. | string / string / number | theme / muted / 0.35 |
| showLabels / showTooltip Day labels and value bubble. | boolean | true |
| formatValue Bubble text. | (v, datum) => 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?