Bar Chart
Animated bar chart with scanline texture, glow effects, and grid lines. Supports vertical and horizontal orientations. Built entirely with SVG-free DOM elements and Framer Motion.
[SRC]tsx
1import { BarChart } from "@mdrbx/nerv-ui";
Vertical Bars
VERTICALinspection frame
live inspectionframe-01
SYNC PERFORMANCE
74
55
37
18
68%
EVA-00
41%
EVA-01
92%
EVA-02
55%
EVA-03
78%
EVA-04
Horizontal Bars
HORIZONTALinspection frame
live inspectionframe-01
RESOURCE ALLOCATION
CPU
87%
MEMORY
64%
NETWORK
92%
STORAGE
45%
GPU
71%
Custom Colors Per Bar
MIXED COLORSinspection frame
live inspectionframe-01
ANGEL THREAT INDEX
76
57
38
19
60
SACHIEL
45
SHAMSHEL
95
RAMIEL
55
GAGHIEL
70
ISRAFEL
Segmented Mode
Renders bars as discrete LCD-cell blocks instead of solid fills.
SEGMENTEDinspection frame
live inspectionframe-01
POWER OUTPUT
76
57
38
19
72%
UNIT-00
58%
UNIT-01
95%
UNIT-02
40%
UNIT-03
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| bars* | BarChartBar[] | — | Array of { label, value, color? } |
| maxValue | number | — | Max scale value (auto-detected if omitted) |
| color | "cyan" | "green" | "orange" | "red" | "magenta" | "cyan" | Default bar color theme |
| title | string | — | Chart title text |
| showGrid | boolean | true | Show grid lines |
| showValues | boolean | true | Show value labels |
| direction | "vertical" | "horizontal" | "vertical" | Bar orientation |
| stagger | number | 0.08 | Animation stagger delay (seconds) |
| height | number | 200 | Chart height in pixels |
| unit | string | "" | Value suffix (e.g. %, ms) |
| segmented | boolean | false | Renders bars as discrete LCD-cell blocks instead of solid fills |
| className | string | "" | Additional CSS classes |
[i]HOVER LABELS
Hovering or focusing a bar now lifts it slightly, switches to a pointer cursor, and opens the NERV tooltip overlay with the label and current value. This applies to both vertical and horizontal layouts, including segmented mode.
[i]SCANLINE TEXTURE
Each bar features a subtle horizontal scanline overlay for that authentic CRT monitor look. The glow effect uses box-shadow for GPU-accelerated rendering.