Components
Neon Donut Chart
Recharts-powered donut/ring chart with per-segment neon glow, interactive center label, hover dimming, auto color palette, and a custom legend.
npx neonblade add neon-donut-chartTraffic sources — auto palette, center label
Direct
Organic
Referral
Social
Email
System status — preset colors
Online
Idle
Offline
Budget allocation — custom colors, pink accent
Engineering
Marketing
Operations
R&D
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
data | NDCSegment[] | - | Array of segments. Each segment has name, value, and optional color. |
height | number | 260 | Chart height in px. |
innerRadius | string | number | "62%" | Inner hole radius. Use percentage string (e.g. '60%') or absolute px number. |
outerRadius | string | number | "88%" | Outer ring radius. Use percentage string or absolute px number. |
glowIntensity | "none" | "low" | "medium" | "high" | "medium" | Neon glow spread on each segment. |
paddingAngle | number | 2 | Gap between segments in degrees. |
cornerRadius | number | 4 | Corner radius on each segment arc end in px. |
centerLabel | boolean | true | Show a center label with the hovered segment name + value (or total when nothing is hovered). |
color | "cyan" | "pink" | "green" | string | "cyan" | Primary accent color — used for the total label and fallback tooltip. |
legend | boolean | false | Show a custom inline legend below the chart. |
className | string | - | Additional className on the wrapper div. |