Radar Chart
Compare series across axes; spring entrance on the native thread, tap an axis to compare values, glow and dot styles.
<RadarChart />3 variants
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.
RadarChart.tsx
<RadarChart axes={["Speed", "Power", "Skill", "Stamina", "Vision", "Defense"]} series={[{ name: "Player A", data: [80, 65, 90, 70, 85, 60] }]} gridType="circle" glow dotVariant="colored-border"/>Props
| Prop | Type | Default |
|---|---|---|
| axes Axis labels (3+). | string[] | — |
| series Values per axis. | { name, data, color? }[] | — |
| gridType Grid shape. | "polygon" | "circle" | "polygon" |
| fillOpacity 0 = lines only. | number | 0.25 |
| glow Glowing outlines. | boolean | false |
| dotVariant Vertex markers. | DotVariant | "default" |
| maxValue / levels Scale and rings. | number | max / 4 |
Did you like the content?