Marimekko chart
Variable-width 100% stacked columns (width = column share, height = mix) with inside labels where they fit and a hover readout.
Preview
Revenue by region and plan
Width = region size · height = plan mixStarterTeamBusiness
| Column | Starter | Team | Business | Total |
|---|---|---|---|---|
| North America | $210K | $640K | $980K | $1.8M |
| Europe | $260K | $520K | $410K | $1.2M |
| Asia Pacific | $310K | $280K | $160K | $750K |
| LatAm | $140K | $90K | $40K | $270K |
| Africa | $70K | $30K | $12K | $112K |
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| series | { key: string; label: string; color?: string }[] | — | Segments stacked in every column, bottom to top. |
| columns | { key: string; label: string; values: Record<string, number> }[] | — | Columns; width follows each column's total. |
| label | string | — | Accessible name and table caption. |
| height | number | 300 | Height in px; width follows the container. |
| valueFormatter | (value: number) => string | compact | Formats values. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.