Range Bar Chart
Heart-rate range, temperature min/max, sleep window: a floating capsule per day with an optional average dot, a value bubble and drag-to-select. 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.
<RangeBarChart data={[ { label: "Mon", low: 58, high: 142, value: 74 }, { label: "Tue", low: 61, high: 128, value: 72 }, ]} formatRange={(lo, hi) => `${lo}–${hi} bpm`}/>Props
| Prop | Type | Default |
|---|---|---|
| data `value` draws a dot (average / current). | { label, low, high, value?, color? }[] | — |
| height / min / max Plot height and value range. | number | 180 / auto / auto |
| color / activeColor / inactiveOpacity Colours. | string / string / number | theme / color / 0.35 |
| showAxis / showLabels / showTooltip Grid with values, day labels, value bubble. | boolean | false / true / true |
| formatValue / formatRange Text. | (v) => string / (low, high, datum) => string | compact / "low–high" |
| 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?