shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartSunburstSegmentColors } from "@/components/charts/chart-sunburst-segment-colors";<ChartSunburstSegmentColors />API Reference
SunburstChart
dataSunburstNode
Hierarchical data tree. Parent values are summed from their children.
size?number
Chart diameter in pixels. The chart shrinks to fit narrower containers.
- Default
520
playKey?number
Change this number to replay the enter animation.
- Default
0
className?string
Additional class name for the chart wrapper.
focusId?string
Controlled drill-down focus: the id of the focused node (names from the root joined with " / "). Omit for uncontrolled drill-down.
onFocusChange?(focusId: string) => void
Called with the new node id when the focus changes through a segment click, the center hub, a keyboard zoom or a breadcrumb.
- Type
(focusId: string) => void
hoveredIndex?number | null
Controlled hover: the index of the hovered arc in the arcs array returned by buildArcs, or null for none.
- Type
number | null
onHoverChange?(index: number | null) => void
Called with the arc index (or null) when the hovered arc changes.
- Type
(index: number | null) => void
hoverPop?number
How far in pixels the hovered segment grows outward.
- Default
8
padding?number
Inset in pixels reserved inside the chart for hover growth, relative to size.
- Default
derived from the tree depth, `size` and `hoverPop`
enterTransition?SunburstEnterTransition
Overrides the enter animation. Only duration (in seconds) is used.
- Default
{ duration: 1.1 }
enterStaggerScale?number
Scales the stagger between rings and segments during the enter animation.
- Default
1
ariaLabel?string
Accessible label of the chart.
- Default
"Sunburst chart of " followed by the root's `name`
ariaDescription?string
Longer accessible description of the chart.
- Default
the keyboard instructions: arrow keys to inspect, Enter or Space to zoom in, Escape or the center disc to zoom out
childrenReactNode
SunburstSegment, SunburstCenter, SunburstLabels, SunburstBreadcrumb and SunburstHint children. Render one SunburstSegment per arc index to customize individual segments.
SunburstSegment
indexnumber
Arc index to customize, from the arcs array returned by buildArcs.
color?string
Color override for this segment.
fill?string
Plain fill color override. Patterns and gradients are not supported.
fillOpacity?number
Fill opacity override (0 to 1).
- Default
1 for the innermost visible ring, then fading with depth down to 0.45
SunburstCenter
className?string
Accepted for bklit compatibility; it has no effect.
SunburstLabels
fontSize?number
Label font size in pixels.
- Default
11
fill?string
Label text color.
- Default
"var(--chart-label)"
stroke?string
Color of the halo behind the label text.
- Default
"var(--chart-background)"
strokeWidth?number
Width in pixels of the halo behind the label text. Use 0 to disable it.
- Default
2.5
className?string
Accepted for bklit compatibility; it has no effect.
SunburstHint
className?string
Class name of the hint element.
children?ReactNode | ((context: SunburstHintContext) => ReactNode)
Custom hint content, or a function receiving the hint context. Defaults to the hovered path or zoom instructions.
- Type
ReactNode | ((context: SunburstHintContext) => ReactNode)