shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartRadialStorageCard } from "@/components/charts/chart-radial-storage-card";<ChartRadialStorageCard />API Reference
RadialChart
datareadonly Record<string, unknown>[]
One datum per angular bin, clockwise from the start angle (96 × 15 minutes, say).
- Type
readonly Record<string, unknown>[]
xDataKey?string
Datum key with the bin label, category or time.
- Default
"time"
seriesreadonly RadialSeries[]
Series, innermost (first stacked) first.
layout?Partial<RadialLayout>
Override ring radii (fractions of the chart radius).
- Type
Partial<RadialLayout>
angleType?RadialAngleType
What the angle encodes.
- Default
"clock"
orientation?RadialOrientation
Bins along the angle, or as concentric rings.
- Default
"radial"
startAngle?number
Arc start in degrees, 0 at 12 o'clock, clockwise.
- Default
0
endAngle?number
Arc end in degrees.
- Default
startAngle + 360 (the full circle)
fitArc?boolean
Crop the stage to the arc's bounding box for partial arcs (a semicircle is about twice as wide as tall).
- Default
true
trackNow?boolean
Track "now": bins after the last bin with data are future bins (ghost data; the scrubber rests at now).
- Default
true for clock charts
nowIndex?number
The bin the resting scrubber points at.
- Default
the last bin with data
maxValue?RadialMaxValue
Shared value scale for every layer without its own maxValue (it also drives RadialAxis value rings). Unset, each layer scales itself (angular charts default to "stacked").
minValue?number | "auto"
Value mapped to the band base; "auto" is the smallest value.
- Type
number | "auto"- Default
0
valueKeys?readonly string[]
Extra datum keys (not series) in the automatic domain, "yesterday" say.
niceValues?boolean
Round an automatic domain to nice tick values.
- Default
true
ringGap?number
angular orientation: the gap between rings as a fraction of a ring step.
- Default
0.3
animate?boolean
Enter animations; skipped under prefers-reduced-motion.
- Default
true
hoveredIndex?number | null
Controlled hovered bin: null is "nothing hovered", absent leaves the hover to the chart.
- Type
number | null
onHoverChange?(index: number | null) => void
Called with the hovered bin (pointer or keyboard), and null when the hover leaves.
- Type
(index: number | null) => void
maxWidth?number
Maximum chart width in px.
- Default
640
className?string
Class names on the chart's outer element.
ariaLabel?string
Accessible name of the chart.
- Default
"Radial chart"
ariaDescription?string
Longer accessible description of the chart.
children?ReactNode
The chart's layers (RadialAxis, RadialDotBar, RadialBar, RadialRingBar, RadialLine, RadialArea, RadialScrubber), drawn in a group centred on the chart in the order given; RadialCenter draws as HTML in the hole and RadialLegend below the chart.
RadialRingBar
maxValue?number
Value mapped to the arc end. Defaults to the chart's value domain (RadialChart maxValue, else the largest per-ring stack).
cornerRadius?number | "round"
Corner radius in px, or "round" for fully rounded ends.
- Type
number | "round"- Default
0
segmentGap?number
Gap between stacked segments in px, constant across the ring's thickness.
- Default
0
track?boolean
A faint full-arc track behind every ring.
- Default
true
trackColor?string
Track colour.
- Default
"var(--foreground)"
trackOpacity?number
Track opacity.
- Default
0.06
fadedOpacity?number
Opacity of the other rings while a ring is hovered.
- Default
0.35
seriesFadedOpacity?number
Opacity of the other series while a legend item is hovered.
- Default
0.2
RadialCenter
children?(state: RadialCenterState) => ReactNode
Full control over the centre content (at rest and while hovering).
- Type
(state: RadialCenterState) => ReactNode
className?string
Class names on the centre's content box.
prefix?stringsuffix?stringlabelClassName?string
Class names of the label.
valueClassName?string
Class names of the value.
formatOptions?ChartStatFlowFormat
Number format of the value.
defaultLabel?string
The label under the value at rest.
- Default
"Total"
RadialLegend
className?string
Class names on the legend row.
formatValue?(value: number) => string
Formats the per-series totals. Defaults to an en-US integer.
- Type
(value: number) => string
showValues?boolean
Show each series' total after its label; turn it off where totals are meaningless (temperatures, say).
- Default
true
