Box Plot
5 IQR and hollow rings for the outliers past them, on the viz-kit chart.
$149 once · every Pro piece
Point at a column or step with the arrow keys: the other sets step back, a small accent dot marks the median and the panel reads max, Q3, median, Q1 and min. Boxes grow out of their medians on staggered springs and morph when data changes. Options: a violin of each set's density behind a slim box or on its own, jittered raw values, a mean ring, gradient or textured boxes, a band of normal, an opt-in dashed median line across the other sets, grid or textured backgrounds, panel or corner tooltips, and loading and empty states.
Install
npx shadcn@latest add @obsyde/box-plotNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { BoxPlot } from '@/components/obsyde/ember/box-plot/BoxPlot';
export function Example() {
return (
<BoxPlot />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/box-plot/BoxPlot.tsxcomponentember/box-plot/box-plot.cssstylesember/box-plot/BoxPlotDemo.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/Grid.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.csssharedember/viz-kit/Axis.tsxsharedember/viz-kit/annotations.tsxshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
seriesSets | number | 6 |
samplesValues per set | number | 40 |
shapeShape | 'box' | 'both' | 'violin' | 'box' |
pointsRaw points | boolean | false |
meanMean | boolean | false |
fillFill | 'solid' | 'gradient' | 'diagonal-up' | 'dots' | 'crosshatch' | 'solid' |
compareCompare median | boolean | false |
bandReference band | boolean | false |
tooltipTooltip | 'panel' | 'corner' | 'none' | 'panel' |
backgroundBackground | 'grid' | 'dots' | 'hatch' | 'none' | 'grid' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
heightHeight | number | 280 |
seedSeed | number | 9 |