Stacked Pill Chart
Sleep stages, macros per meal, traffic sources: rounded bars stacked from parts, with a bubble listing every part. Bars move and fade on the native UI thread, so they stay smooth on iOS and Android even while your app is busy.
<StackedPillChart />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.
StackedPillChart.tsx
<StackedPillChart data={[{ label: "Mon", deep: 1.4, light: 3.9, rem: 1.5 }]} series={[ { key: "deep", label: "Deep" }, { key: "light", label: "Light" }, { key: "rem", label: "REM" }, ]}/>Props
| Prop | Type | Default |
|---|---|---|
| data One row per bar. | { label, [key]: number }[] | — |
| series Parts, bottom → top. | { key, label, color? }[] | — |
| height / max / gap / segmentGap / barWidth Layout. | number | 180 / tallest / 10 / 2 / auto |
| showTotal / showLegend / showLabels / showTooltip Extras. | boolean | true |
| formatValue Bubble text. | (v, key) => string | compact |
| onScrubStart / onScrubEnd Pause your ScrollView while dragging. | () => void | — |
| selectedIndex / defaultIndex Controlled or initial selection. | number | null | — / null |
| onSelect Tap or drag (haptics via ChartProvider). | (index, datum) => void | — |
| animate / emptyText / accessibilityLabel Motion, empty state, screen-reader label. | boolean / string / string | true / "No data" / generated |
Did you like the content?