shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartRingGrid } from "@/components/charts/chart-ring-grid";<ChartRingGrid />API Reference
RingChart
dataRingData[]
The rings to draw, from the innermost outwards. Each ring fills value / maxValue of its track.
size?number
Chart width and height in pixels. Omit to fill the width of the parent element; the chart stays square.
strokeWidth?number
Thickness of each ring in pixels.
- Default
12
ringGap?number
Gap between neighbouring rings in pixels.
- Default
6
baseInnerRadius?number
Inner radius of the innermost ring in pixels. Also sets the size of the area available to RingCenter.
- Default
60
padding?number
Space kept clear between the outermost ring and the chart's edge, in pixels. The rings scale down to keep it.
- Default
8, or 32 with a `RingGrid` (room for its labels)
animationDuration?number
Accepted for bklit-ui compatibility; has no effect. Use enterTransition to change the entrance timing.
className?string
Extra class name for the chart container.
style?CSSProperties
Inline styles for the chart container, merged over the default sizing.
hoveredIndex?number | null
Index of the hovered ring, for controlled hover. Pass null for no hover; leave it undefined to let the chart manage hover itself.
- Type
number | null
onHoverChange?(index: number | null) => void
Called with the index of the hovered or keyboard-focused ring, or null when hover ends.
- Type
(index: number | null) => void
startAngle?number
Angle where every ring starts, in radians, clockwise from 12 o'clock (d3's convention): the default -Math.PI / 2 is 9 o'clock. bklit-ui's own comment calls the default "top", but its d3 arcs start at 9 o'clock too.
- Default
-Math.PI / 2
endAngle?number
Angle where a full ring ends, in radians. Together with startAngle this sets the sweep; the default is a full circle.
- Default
(3 * Math.PI) / 2
enterTransition?RingEnterTransition
Transition for the entrance, in the shape used by the motion library (type, duration in seconds, ease, and spring values). Defaults to a 1.1 second tween on the shared reveal curve.
enterStaggerScale?number
Multiplier for the delay between one ring's entrance and the next. 0 starts all rings together.
- Default
1
geometryScrubbing?boolean
Turns off hover effects and Ring overrides. Meant for live editors that redraw the geometry while a control is dragged; leave it off otherwise.
- Default
false
childrenReactNode
Ring elements to configure individual rings and an optional RingCenter.
ariaLabel?string
Accessible name of the chart.
- Default
"Ring chart"
ariaDescription?string
Longer accessible description of the chart.
RingGrid
ticks?number | readonly number[]
Progress ticks: fractions of each ring's maxValue (0 to 1), or the number of equal intervals. On a full circle the 100% tick lands on 0% and only 0% is drawn.
- Type
number | readonly number[]- Default
4
tickFormat?(fraction: number) => string
Formats a tick's label from its fraction.
- Type
(fraction: number) => string- Default
whole percent, "25%"
showSpokes?boolean
Draw spokes across the rings at every tick.
- Default
true
showLabels?boolean
Draw the tick labels along the outer edge of the arc.
- Default
true
stroke?string
Spoke colour.
- Default
"var(--chart-foreground)"
strokeOpacity?number
Spoke opacity.
- Default
0.2
tickLength?number
How far a spoke runs past the outermost ring, in pixels.
- Default
4
labelColor?string
Tick label colour.
- Default
"var(--chart-label)"
fontSize?number
Tick label font size in pixels. Defaults to a size that follows the chart's (9 to 12).
labelOffset?number
Gap between a spoke's end and its label, in pixels.
- Default
4
Ring
indexnumber
Index of the ring this element configures, matching its position in the data array.
color?string
Colour override for this ring. Takes precedence over the data item's color.
animate?boolean
Play the entrance animation for this ring. Set false to draw it without animating.
- Default
true
showGlow?boolean
Accepted for bklit-ui compatibility. No glow is drawn, which matches how bklit-ui renders.
lineCap?RingLineCap
Shape of the ring's leading end: "round" or "butt" (square).
- Default
"round"
RingLabels
format?(data: RingData, index: number) => string
Each ring's label text. Defaults to its data item's label.
- Type
(data: RingData, index: number) => string
colorByRing?boolean
Colour each label like its ring instead of the muted label colour.
- Default
false
color?string
Label colour while colorByRing is off.
- Default
"var(--chart-label)"
fontSize?number
Font size in pixels. Defaults to a size that follows the ring width (9 to 12).
offset?number
Distance in pixels before each ring's start. Defaults to 0.6 times the font size.
RingCenter
defaultLabel?string
Label shown under the total while no ring is hovered. A hovered ring shows its own label instead.
- Default
"Total"
formatOptions?CenterStatFormat
Number format for the centre value, in Intl.NumberFormat terms (notation, currency, fraction digits and so on).
- Default
{ maximumFractionDigits: 0, notation: "standard" }
children?(props: Readonly<RingCenterRenderProps>) => ReactNode
Render function for custom centre content. It is called with { value, label, isHovered, data } while a ring is hovered; when nothing is hovered the default total is shown.
- Type
(props: Readonly<RingCenterRenderProps>) => ReactNode
className?string
Extra class name for the centre container.
valueClassName?string
Class name for the value text.
labelClassName?string
Class name for the label text.
prefix?string
Text shown before the value, for example "$".
suffix?string
Text shown after the value, for example "%".
