Sparkline
A word-sized line, area or bar run that sits on the text baseline with its latest value beside it, the newest point a hot dot and the low and high marked by 3px ticks.
$149 once · every Pro piece
Point, drag a finger or use the arrow keys: a marker springs to the nearest point and the value rolls to it. Two hover treatments: everything after the marker steps back, or the local segment (the whole line drops to half and only the stretch round the cursor stays bright). Types: line, area with a gradient or a solid fill, step, bars and negative bars. Crosshair styles, three hover feels (spring, snappy, none), dashed average or median hairlines, a threshold past which it runs hot, a dashed ghost of the previous period with the change beside the value, and rows or KPI cards that scrub together through one shared store. Built for tables and dense grids: one page-wide observer, one path per series, no loops at rest.
Install
npx shadcn@latest add @obsyde/sparklineNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Sparkline } from '@/components/obsyde/ember/sparkline/Sparkline';
export function Example() {
return (
<Sparkline type="line" />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/sparkline/Sparkline.tsxcomponentember/sparkline/sparkline.cssstylesember/sparkline/sparkline-demo.cssstylesember/sparkline/SparklineDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/Tooltip.tsxsharedember/viz-kit/focus.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/scale.tssharedember/viz-kit/motion.tssharedember/viz-kit/chart.tsxsharedember/shared/ember.csssharedember/viz-kit/touch.tssharedember/viz-kit/keyboard.tssharedember/viz-kit/size.tssharedember/viz-kit/States.tsxsharedember/viz-kit/shape.tssharedember/viz-kit/series.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.csssharedember/viz-kit/annotations.tsxshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
viewView | 'rows' | 'kpi' | 'variants' | 'crosshairs' | 'feel' | 'table' | 'grid' | 'rows' |
typeType | 'line' | 'area' | 'area-solid' | 'step' | 'bars' | 'line' |
highlightHover | 'after' | 'segment' | 'none' | 'after' |
feelFeel | 'spring' | 'snappy' | 'none' | 'spring' |
endDotEnd dot | boolean | true |
syncSync rows | boolean | false |
widthWidth | number | 96 |
heightHeight | number | 24 |
showValueShow value | boolean | true |
unitUnit | string | — |
refLinesReference lines | 'none' | 'avg' | 'median' | 'min-max' | 'all' | 'none' |
thresholdThreshold | 'none' | 'above' | 'below' | 'none' |
thresholdValueThreshold value | number | 60 |
compareCompare | boolean | false |
crosshairCrosshair | 'none' | 'solid' | 'dashed' | 'gradient' | 'none' |
curveCurve | 'monotone' | 'linear' | 'catmull' | 'monotone' |
revealReveal | 'sweep' | 'cool' | 'rise' | 'fade' | 'none' | 'sweep' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
liveLive | boolean | false |
pointsPoints | number | 32 |
seedSeed | number | 1 |