Radial Chart
Concentric radial bars with any start angle and sweep, stacked segments on one track, rounded caps and centre text.
<RadialSeriesChart />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.
RadialSeriesChart.tsx
<RadialSeriesChart stacked data={[{ name: "desktop", value: 1260 }, { name: "mobile", value: 570 }]} startAngle={-90} sweep={180} innerRadius={0.55} centerLabel="Visitors"/>Props
| Prop | Type | Default |
|---|---|---|
| data Rows like [{ browser: "chrome", visitors: 275 }]. | Datum[] | — |
| nameKey / valueKey Which keys hold the label and the number. | string | "name" / "value" |
| config Labels / colours keyed by name. | ChartConfig | — |
| size Diameter. | number | 260 |
| showLegend Legend under the chart. | boolean | false |
| legendVariant Legend marker style. | LegendVariant | "rounded-square" |
| glow Glow every segment or only named ones. | boolean | string[] | false |
| isLoading Skeleton state. | boolean | false |
| onSelect Selection callback. | (index, datum) => void | — |
| startAngle Clockwise from 12 o'clock. | number (deg) | 0 |
| sweep 180 = semicircle. | number (deg) | 360 |
| stacked Segments end-to-end on one track. | boolean | false |
| maxValue Value of a full sweep. | number | max / total |
| rounded / showBackground Round caps / muted track. | boolean | true / true |
Did you like the content?