Pill Bar Chart
Steps, activity and energy cards: capsule bars, a gradient or solid selected bar, a value bubble that glides between bars, badges, goal tracks and faded future days. Bars move and fade on the native UI thread, so they stay smooth on iOS and Android even while your app is busy.
Live — the real React Native component rendered with react-native-web. Tap, drag and scrub it.
Installation
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.
import { PillBarChart } from "expo-charts"; const steps = [ { label: "12", value: 2140 }, { label: "13", value: 2960 }, { label: "14", value: 2710, badge: "-8%" }, { label: "15", value: 3240 }, { label: "16", value: 3680 },]; <PillBarChart data={steps} height={120} activeGradient={["#C3E550", "#4C9A3B"]} defaultIndex={4} dimAfter={4} activeDot onSelect={(i, d) => setShown(d)}/>Props
| Prop | Type | Default |
|---|---|---|
| data One bar each. `badge` draws a bubble on the bar top ("+12%"). | { label, value, badge?, color? }[] | — |
| height Bar area height (labels and bubble add to it). | number | 180 |
| max Value of a full-height bar (100 for goals). | number | largest value |
| color / activeColor Bar colour and selected bar colour. | string | theme / color |
| activeGradient Gradient for the selected bar. | [top, bottom] | — |
| track / trackColor Full-height capsule behind each bar (progress to goal). | boolean / string | false / muted |
| inactiveOpacity Other bars while one is selected. | number | 0.32 |
| dimAfter Bars after this index fade (days still to come). | number | — |
| gap / barWidth / radius Spacing and shape. | number | 8 / column / capsule |
| showLabels / showTooltip / activeDot Labels under bars, value bubble, dot on the selected bar. | boolean | true / true / false |
| selectedIndex / defaultIndex Controlled or initial selection. | number | null | — / null |
| onSelect Tap or drag across bars (haptics via ChartProvider). | (index, datum) => void | — |
| formatValue Bubble and screen-reader text. | (v, datum) => string | compact |
| onScrubStart / onScrubEnd Pause your ScrollView while dragging. | () => void | — |
Did you like the content?