Ribbon Chart
Stacked bars per period, re-ranked every period with the leader on top, joined by flowing ribbons that carry each series from one period to the next.
$149 once · every Pro piece
A change of rank reads as two ribbons crossing. Grey ladder at rest, with an optional texture per series on the ribbons. Hover a ribbon or a bar and that series runs hot from end to end while the others step back; the period under the pointer gets a soft wash instead of a crosshair line and the panel lists it by rank. Rank and name sit at the right end of each band. A legend click drops a series and every stack re-ranks on a 500ms morph; the arrow keys step through the periods.
Install
npx shadcn@latest add @obsyde/ribbon-chartNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { RibbonChart } from '@/components/obsyde/ember/ribbon-chart/RibbonChart';
export function Example() {
return (
<RibbonChart series={4} order="rank" />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/ribbon-chart/RibbonChart.tsxcomponentember/ribbon-chart/ribbon-chart.cssstylesember/ribbon-chart/RibbonChartDemo.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/Legend.tsxsharedember/viz-kit/Grid.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.csssharedember/viz-kit/Axis.tsxshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
seriesSeries | number | 4 |
periodsPeriods | number | 6 |
orderOrder | 'rank' | 'fixed' | 'rank' |
barWidthBar width | number | 0.36 |
patternPattern | 'none' | 'series' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch' | 'none' |
ribbonRibbons | 'soft' | 'strong' | 'soft' |
endLabelsEnd labels | boolean | true |
legendLegend | 'row' | 'none' | 'row' |
tooltipTooltip | 'panel' | 'none' | 'panel' |
backgroundBackground | 'grid' | 'none' | 'grid' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
valueLabelsValue labels | boolean | false |
heightHeight | number | 300 |
seedSeed | number | 5 |