Sunburst Chart
A sunburst chart component built using Recharts v3. Visualize hierarchical data in concentric rings with customizable colors, gradients, and glow effects.
Installation
$ npx shadcn@latest add @orecus/sunburst-chartRegistry:
@orecus/chart@orecus/color-utils@orecus/chart-utils@orecus/card
Component
Tech Stack Distribution
Hierarchical view of technology usage
Organization Structure
Team distribution across departments
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data* | { name: string; value?: number; children?: SunburstDataItem[] } | — | Hierarchical data tree with optional children |
colors | ThemeColor[] | — | Colors for rings/segments |
colorStyle | 'default' | 'gradient' | 'gradient' | Segment fill style |
glow | boolean | true | Add glow effect behind segments |
innerRadius | number | string | 0 | Inner radius (center hole) |
outerRadius | number | string | '80%' | Outer radius |
cx | number | string | '50%' | Center X position |
cy | number | string | '50%' | Center Y position |
showLabels | boolean | true | Show labels on segments |
labelType | 'value' | 'percent' | 'name' | 'name' | Label content type |
showLegend | boolean | true | Show chart legend |
cardProps | CardProps | — | Props to pass to the underlying Card component |
tooltipSortByValue | boolean | false | Sort tooltip items by value (descending) |
legendIndicator | 'square' | 'circle' | 'line' | 'square' | Shape of legend indicators |
legendShowValues | boolean | false | Show values in legend |
legendWrap | boolean | true | Allow legend items to wrap |