Gauge
Speedometer with a native-driven needle, colour segments and an interactive drag mode.
<GaugeChart />1 variant
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.
GaugeChart.tsx
<GaugeChart value={score} interactive onChange={setScore} segments={[{ to: 40, color: "#ef4444" }, { to: 100, color: "#22c55e" }]}/>Props
| Prop | Type | Default |
|---|---|---|
| value / min / max Range. | number | — / 0 / 100 |
| interactive Drag to set. | boolean | false |
| segments Bands. | { to, color }[] | — |
| thickness Arc width. | number | 18 |
Did you like the content?