Pie Chart
Animated pie or donut chart with crosshair grid, glow effects, and optional legend. SVG-based with per-slice color override. Four color palettes available.
[SRC]tsx
1import { PieChart } from "@mdrbx/nerv-ui";
Pie Chart
PIEinspection frame
live inspectionframe-01
ANGEL ENCOUNTERS BY TYPE
HUMANOID38%
GEOMETRIC19%
ORGANIC25%
HYBRID13%
UNKNOWN6%
Donut Chart
DONUTinspection frame
live inspectionframe-01
RESOURCE DISTRIBUTION
MAGI-140%
MAGI-235%
MAGI-325%
Color Themes
THEMESinspection frame
live inspectionframe-01
A30%
B50%
C20%
A30%
B50%
C20%
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| slices* | PieSlice[] | — | Array of { label, value, color? } |
| title | string | — | Chart title |
| size | number | 180 | Chart size in pixels |
| donut | boolean | false | Hollow center mode |
| showLegend | boolean | true | Show color legend |
| showLabels | boolean | true | Show % labels on slices |
| color | "cyan" | "green" | "orange" | "mixed" | "mixed" | Color palette |
| className | string | "" | Additional CSS classes |
[i]HOVER LABELS
Hovering a slice or legend row dims the other segments, adds a pointer affordance, and opens an in-surface tooltip with the label, raw value, and computed percentage.
[i]CROSSHAIR GRID
The chart background features concentric circles and crosshair lines for that targeting computer aesthetic. Slices animate in with staggered scale transitions.