Components
Neon Bar Chart
Recharts-powered bar chart with top-rounded neon bars, custom glow drop-shadow, multi-color mode, multi-series support, and horizontal layout.
npx neonblade add neon-bar-chartVertical bars — cyan (default)
Multi-color — auto neon palette
Multi-series — revenue vs costs
Horizontal bars — green, high glow
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
data | NBCDataPoint[] | - | Array of data objects keyed by xAxisKey + series dataKeys. |
series | NBCSeries[] | - | One or more bar series. Omit and use dataKey + color for a single series. |
dataKey | string | "value" | Shorthand dataKey for a single series. |
color | "cyan" | "pink" | "green" | string | "cyan" | Shorthand neon accent color for a single series. |
label | string | - | Shorthand legend/tooltip label for a single series. |
xAxisKey | string | "name" | Key in data used for category axis labels. |
height | number | 260 | Chart height in px. |
layout | "vertical" | "horizontal" | "vertical" | Bar orientation. Horizontal flips X/Y axes. |
radius | number | 3 | Corner radius of each bar (top corners only, cyber style). |
barGap | number | 0.35 | Gap between bars as a fraction of bar width (0–1). |
grid | boolean | true | Show a subtle neon grid behind the chart. |
legend | boolean | false | Show a series legend. |
showYAxis | boolean | true | Show Y-axis tick labels. |
showXAxis | boolean | true | Show X-axis tick labels. |
glowIntensity | "none" | "low" | "medium" | "high" | "medium" | Neon drop-shadow glow on each bar. |
multiColor | boolean | false | Auto-assign sequential neon colors to each bar in a single-series chart. |
className | string | - | Additional className on the wrapper div. |