Fan Gauge
A half circle of bars for goals and scores, lit bar by bar with a colour blend and a counting centre value. Optional drag to set the value. Bars move and fade on the native UI thread, so they stay smooth on iOS and Android even while your app is busy.
<FanGauge />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.
FanGauge.tsx
<FanGauge value={82} label="Sales Growth" colors={["#3D5AFE", "#C9D4FF"]} onChange={setTarget}/>Props
| Prop | Type | Default |
|---|---|---|
| value / max Value and full scale. | number | — / 100 |
| bars Bars in the fan. | number | 28 |
| colors Lit bars blend left → right. | [from, to] | theme |
| trackColor Unlit bars. | string | muted |
| size / thickness / innerRadius Geometry. | number | parent / auto / 0.5 |
| label / formatValue Centre text. | string / (v, max) => string | — / percent |
| onChange / step Drag across the fan to set the value. | (v) => void / number | — / 1 |
Did you like the content?