Marimekko
Variable-width stacked columns: each column is as wide as its total and split by share, so area is value.
$149 once · every Pro piece
Series are told apart by grey tone and texture, with 2px gaps between every block, and the largest block carries the accent. Point at a block, or step with the arrow keys (left and right for columns, up and down for series): its series stays while every other block steps back, faint bridges join that series across the columns so its share reads as one path, and the block prints its share. Columns rise left to right on entry, and switching a series off in the legend re-splits the columns and their widths on a 500ms morph.
Install
npx shadcn@latest add @obsyde/marimekkoNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Marimekko } from '@/components/obsyde/ember/marimekko/Marimekko';
export function Example() {
return (
<Marimekko />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/marimekko/Marimekko.tsxcomponentember/marimekko/marimekko.cssstylesember/marimekko/MarimekkoDemo.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/marks.tsxsharedember/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' |
columnsColumns | number | 5 |
seriesSeries | number | 4 |
patternPattern | 'series' | 'none' | 'series' |
highlightHighlight | 'max' | 'none' | 'max' |
bridgesBridges | boolean | true |
legendLegend | 'row' | 'list' | 'none' | 'row' |
tooltipTooltip | 'panel' | 'none' | 'panel' |
backgroundBackground | 'grid' | 'none' | 'grid' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
valueLabelsValue labels | boolean | false |
heightHeight | number | 300 |
seedSeed | number | 3 |