Scrub Bars
A bar chart you read by dragging across it.
$149 once · every Pro piece
One bar is lit in the accent, one big number follows it with heavier digits in the higher places, and a dashed line at its height brightens every bar that rises above it while the rest step back. Press and drag to sum a span: the column stays lit and the header reads the range, its sum and the change. Shift with the arrows jumps between the high, the low and crossings. Bars land on springs that get heavier with their value. Optional extras: dashed min, max and average lines with pills, a threshold past which bars run hot, event badges, the previous period as dashed outlines or side-by-side hatched bars with the change beside the number, a profit-and-loss run around zero, textured bars, value labels, a floating tooltip, and loading and empty states.
Install
npx shadcn@latest add @obsyde/scrub-barsNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { ScrubBars } from '@/components/obsyde/ember/scrub-bars/ScrubBars';
export function Example() {
return (
<ScrubBars bars={24} />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/scrub-bars/ScrubBars.tsxcomponentember/scrub-bars/scrub-bars.cssstylesember/scrub-bars/ScrubBarsDemo.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/Grid.tsxsharedember/viz-kit/Brush.tsxsharedember/viz-kit/Axis.tsxsharedember/viz-kit/annotations.tsxshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
labelLabel | string | 'Total' |
unitUnit | string | — |
barsBars | number | 24 |
labelsBar labels | string | — |
scrubLineScrub line | boolean | true |
refLinesReference lines | 'none' | 'min-max' | 'avg' | 'median' | 'all' | 'none' |
thresholdThreshold | 'none' | 'above' | 'below' | 'none' |
thresholdValueThreshold value | number | 180 |
annotationsAnnotations | boolean | false |
compareCompare | boolean | false |
compareStyleCompare style | 'outline' | 'bars' | 'outline' |
negativeProfit / loss | boolean | false |
readoutReadout | 'corner' | 'tooltip' | 'corner' |
radiusCorner radius | number | 3 |
showAxisAxes | boolean | true |
patternPattern | 'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch' | 'none' |
backgroundBackground | 'grid' | 'dots' | 'hatch' | 'none' | 'grid' |
revealReveal | 'sweep' | 'cool' | 'fade' | 'none' | 'sweep' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
valueLabelsValue labels | boolean | false |
heightHeight | number | 220 |
seedSeed | number | 3 |