shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartRingCenterCustom } from "@/components/charts/chart-ring-center-custom";<ChartRingCenterCustom />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
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.
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"
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 "%".