Business Graphics
KPI Sparkline
KPI cards with touch-scrubbable canvas sparklines.
canvasmedium complexitymoderate motionpointermobile-ready
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
1
When to use it
Dashboard summaries and business reports.
When not to
Exact chart reading: sparklines have no y-axis.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Edit kpis values and colors. Dark/light palettes use :root tokens; ?theme or forever:theme switches them.
Safe to edit
- kpis data and colors
- 600ms step interval and drift
- card gap; stroke widths; theme tokens
Keep intact
- IIFE wrapper; reduced-motion static state; hidden-page pause
- Theme tokens, ?theme bootstrap and forever:theme listener
- demo-v1 lifecycle: read __foreverPreview.demoEnabled; stop attract work on forever:interactive; preserve manual feedback
- DPR-aware canvas resize; pointer scrub and cancel cleanup
Known limitations
- Demo data; no backend integration
- Instance-local values; remount resets values
- Each series uses its own min/max range; tooltip clamps inside its card
More Business Graphics components
- Funnel AnalysisInteractive conversions funnel stage chart with flow particles reacting to mouse hover.
- Grid MonitorSystem health grid monitoring status of 30 nodes with active scanning sweeps and interactive detail pane.
- KPI Stat RowFour SaaS metric cards — MRR, active users, churn, net revenue retention — with count-up values, colored delta chips and trend arrows, updating with…
- Activity FeedA live workspace audit stream: new events slide and fade in at the top with a colored initials avatar, an actor, an action (approved invoice, deployed…