127 Components
Scrubbable Sparkline
MotionRobinhood-style financial stock and cryptocurrency sparkline chart with interactive touch/mouse scrubbing, dynamic cursor crosshair, live price readout, and animated delta gains or losses.
BitcoinBTC/USD
+6.37%
$68,340.00
Live MarketInstallation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/scrubbable-sparkline.json"
Props
TypeScript props supported by <ScrubbableSparkline />.
| Prop | Type | Default | Description |
|---|---|---|---|
| data | SparklinePoint[] | — | Array of sparkline points with time string and numeric value. |
| title | string | "Bitcoin" | Title of the asset or financial instrument. |
| ticker | string | "BTC/USD" | Ticker symbol displayed in the header badge. |
| currency | string | "$" | Currency symbol prefix for price formatting. |
| height | number | 240 | SVG viewport coordinate height in pixels. |
| showGradient | boolean | true | Whether to render the animated area fill gradient underneath the line. |
| showGrid | boolean | true | Whether to render horizontal reference grid lines. |
| className | string | — | Additional CSS classes to apply to the root container. |
| minimal | boolean | — | Compact sparkline display mode hiding telemetry header and stats |
Key Features
- Interactive pointer and touch scrubbing with smooth cubic bezier SVG curve calculation.
- Dynamic delta percentage computation with conditional emerald (gain) or rose (loss) theme.
- Live vertical crosshair indicator with glowing cursor dot tracking the curve value.
- Smooth animated SVG area gradient fill with configurable glow and gridlines.
- Responsive SVG coordinate scaling across desktop and mobile screens.
Keyboard & Accessibility
- Provides tabular data fallback and aria-label readouts for screen readers.
- Maintains high contrast color ratios for gains (emerald) and losses (rose).
- Supports keyboard reset and touch dragging without trapping scroll.