Radial chart
Concentric ring arcs and gauges with pixel fills.
Use radial bar charts for concentric arcs (activity rings, gauges, ranked rings). One <DuneRadialChart.RadialBar /> sets value and name keys. Use chartProps for startAngle and endAngle (for example a semicircle).
RadialConcentric pixel ring arcs.
Examples
Semicircle
Pass angles through chartProps:
chartProps={{ startAngle: 180, endAngle: 0 }}Semi radialHalf-ring arcs via chartProps angles.
Loading
Set loading on the root to show a pixel skeleton until data is ready.
Loading…
Parts
| Part | Role |
|---|---|
DuneRadialChart | Root: data, config, fill, pixel, loading, chartProps |
DuneRadialChart.Tooltip | Hover tooltip |
DuneRadialChart.Legend | Series legend |
DuneRadialChart.RadialBar | Arcs: dataKey, nameKey, background |
Props
Root
| Prop | Type | Default | Notes |
|---|---|---|---|
data | Record<string, unknown>[] | required | One row per ring |
config | Record<string, DuneSeriesConfig> | - | Keys match nameKey values |
fill | "bands" | "dither" | "bands" | Pixel fill mode |
pixel | number | 2 | Cell size in CSS px |
loading | boolean | false | Pixel skeleton |
emptyMessage | string | - | Empty-state copy |
chartProps | object | - | Includes startAngle, endAngle, and other Recharts props |
className | string | - | Wrapper class |
RadialBar
| Prop | Type | Notes |
|---|---|---|
dataKey | string | Numeric value field |
nameKey | string | Ring id field (matches config keys) |
background | boolean | object | Track behind the value arc |
isAnimationActive | boolean | Arc animation |
Tips
- Semicircle gauges are angle math on
chartProps, not a separate chart type. - Match
nameKeyvalues inconfigfor labels and colors. - Use bands for cleaner gauges. Use dither when texture is the brand look.