Strata
A stacked area chart you can take apart.
$149 once · every Pro piece
Point at a layer to make it live: its top line brightens while the others step back, and the header rolls to its value and share. Click it, or pick it with Up and Down and press Enter, to isolate it (now it carries the accent): the others collapse to the baseline, it drops to sit on the baseline and the axis re-fits, all in one motion because both edges of every band tween together. Escape restores. Stack the values, show them as shares of 100%, or centre them as a stream; fill the layers with graded greys, a texture per layer or a fade. Optional extras: a legend row or a list with rolling values and shares (hover isolates both ways, click hides, hold locks), dashed min, max and average lines over the total, a threshold past which the top of the stack runs hot, event badges, a floating or corner tooltip, and loading and empty states.
Install
npx shadcn@latest add @obsyde/strataNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Strata } from '@/components/obsyde/ember/strata/Strata';
export function Example() {
return (
<Strata />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/strata/Strata.tsxcomponentember/strata/strata.cssstylesember/strata/StrataDemo.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/Legend.tsxsharedember/viz-kit/Grid.tsxsharedember/viz-kit/Axis.tsxsharedember/viz-kit/annotations.tsxshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
seriesSeries | number | 4 |
offsetOffset | 'stacked' | 'percent' | 'stream' | 'stacked' |
fillFill | 'solid' | 'pattern' | 'gradient' | 'solid' |
legendLegend | 'none' | 'row' | 'list' | 'none' |
unitUnit | string | — |
refLinesReference lines | 'none' | 'min-max' | 'avg' | 'median' | 'all' | 'none' |
thresholdThreshold | 'none' | 'above' | 'below' | 'none' |
thresholdValueThreshold value | number | 120 |
annotationsAnnotations | boolean | false |
readoutReadout | 'corner' | 'tooltip' | 'corner' |
showAxisAxes | boolean | true |
tooltipTooltip | 'none' | 'panel' | 'corner' | 'none' |
crosshairCrosshair | 'solid' | 'dashed' | 'gradient' | 'none' | 'solid' |
backgroundBackground | 'grid' | 'dots' | 'hatch' | 'none' | 'grid' |
curveCurve | 'monotone' | 'linear' | 'catmull' | 'step' | 'monotone' |
revealReveal | 'rise' | 'sweep' | 'fade' | 'none' | 'rise' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
heightHeight | number | 240 |
pointsPoints | number | 40 |
seedSeed | number | 7 |