∞ forever components

Business Graphics

KPI Sparkline

KPI metric cards featuring interactive, scrubbable sparkline trends on HTML5 canvas with custom tooltip tracking.

canvasmedium complexitymoderate motionpointer

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Executive business reports, dashboard overview pages, analytics summaries.

When not to

High-density data-viz where users need exact grid coordinate reading (charts have no y-axis labels).

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Modify the initial values of kpis array to set custom starting metrics, and change background to light color. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • KPI data (kpis array)
  • metric simulation update interval (simulateMetrics 3000ms)
  • card layout gap (12px in bg03-grid)
  • sparkline stroke widths (lineWidth=2)
  • sparkline feed (setInterval(step, 600 ms): one new point per KPI, deltas re-derived from the series)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • DPR scaling logic in drawSparkline
  • pointer/touch move and leave listeners
  • IIFE wrapper
  • ambient sparkline feed (step interval; DPR-aware canvases re-fit on resize)
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Tooltip positions dynamically by math which can wrap on extremely narrow screens
  • Line values auto-normalize from min to max, meaning visual amplitude is always maximized regardless of range size

sparklinechartdashboarddatavizinteractivescrubtooltipmetricsrevenue

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…