Components

Neon Line Chart

Recharts-powered line/area chart with neon glow strokes, gradient area fills, multi-series support, and a corner-cut tooltip.

npx neonblade add neon-line-chart

Single series — area (default)

Multi-series — cyan + pink

Step curve — line only, high glow

Minimal — no axes, pink

Props Configuration

PropTypeDefaultDescription
dataNLCDataPoint[]-Array of data objects keyed by xAxisKey + series dataKeys.
seriesNLCSeries[]-One or more line series. Omit and use dataKey + color for a single series.
dataKeystring"value"Shorthand dataKey when using a single series.
color"cyan" | "pink" | "green" | string"cyan"Shorthand neon accent color for a single series.
labelstring-Shorthand legend/tooltip label for a single series.
xAxisKeystring"name"Key in data used for X axis labels.
heightnumber260Chart height in px.
areabooleantrueShow a gradient-filled area under each line.
dotsbooleanfalseRender dot markers on each data point.
gridbooleantrueShow a subtle neon grid behind the chart.
legendbooleanfalseShow a series legend below the chart.
strokeWidthnumber2Line stroke width in px.
glowIntensity"none" | "low" | "medium" | "high""medium"Neon drop-shadow glow on the line stroke.
curve"monotone" | "linear" | "step" | "stepAfter" | "stepBefore" | "basis""monotone"Recharts curve interpolation type.
showYAxisbooleantrueShow Y-axis tick labels.
showXAxisbooleantrueShow X-axis tick labels.
classNamestring-Additional className on the wrapper div.