Goal Bars
Revenue goals, budgets, savings: rows with value / target and a gradient bar; reached goals turn green.
<GoalBars />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.
GoalBars.tsx
<GoalBars data={[{ label: "Monthly revenue", value: 73000, target: 100000, icon: "💰" }]}/>Props
| Prop | Type | Default |
|---|---|---|
| data One row per goal. | { label, value, target, color?, icon? }[] | — |
| show Right-hand text. | "fraction" | "percent" | "both" | "fraction" |
| doneLabel Text when value reaches target. | string | null | "Done" |
| barHeight / gap / color / trackColor Look. | number / number / string / string | 10 / 18 / palette / muted |
| formatValue Numbers. | (v, datum) => string | compact |
| animate / accessibilityLabel Motion and screen-reader label. | boolean / string | true / generated |
Did you like the content?