---
url: https://chartbuddy.io/embed/docs/chart-types/mekko.md
---
# Marimekko

Variable-width 100% stacked columns. Every column is normalised to **100% height**; column width is proportional to the category total. Both axes read as shares.

For **absolute** heights with variable widths, use [Bar Mekko](/chart-types/bar-mekko) instead.

## Identity

| | |
|---|---|
| `chartType` | `mekko` |
| Option bag | `mekko` (not `barMekko`) |
| `seriesData` layout | `seriesRows` – row 0 = category header; later rows = series |
| Min grid | 2 rows × 2 columns (header included) |
| Orientation | Vertical composition layout (see axes notes) |
| Sample | [Marimekko](/samples/mekko) |

***

## Minimal `chartData`

```js
{
  chartType: 'mekko',
  isDataTransposed: true,
  seriesData: [
    ['', 'Seg A', 'Seg B', 'Seg C'],
    ['Series 1', 40, 30, 20],
    ['Series 2', 25, 35, 15],
  ],
  title: { visible: true, text: 'Marimekko' },
  subtitle: { visible: false, text: '' },
}
```

***

## `seriesData`

Same `seriesRows` shape as stacked bar (`isDataTransposed: true`). Values drive both segment shares (height) and category weight (width).

```js
[
  ['', 'Seg A', 'Seg B', 'Seg C'],
  ['Series 1', 40, 30, 20],
  ['Series 2', 25, 35, 15],
]
```

There is **no** separate width row (that is Bar Mekko). Shared layout rules: [chartData schema · seriesData](/api/chart-data#seriesdata-layouts).

***

## Option bag: `mekko`

| Field | Default (new charts) | Role |
|---|---|---|
| `showTotals` | `true` | Totals visibility (prefer `annotations.totals.visible`) |
| `overrides` | `{}` | Indexed style patches |

Most authoring is axes, annotations, and legend – not a large `mekko` field set. Prefer editor + `getChartData()` for segment chrome.

```js
{
  chartType: 'mekko',
  seriesData: [/* … */],
  mekko: { /* overrides if needed */ },
}
```

Do not put Bar Mekko `sort` on `mekko` – that belongs on `barMekko`.

***

## Axes & scales

| Role | Behaviour |
|---|---|
| Domain | Linear **0–100** width domain (category thickness) |
| Primary range | Linear **0–100** `%` stacks |

Prefer `%` postfix and tick intervals that divide 100 (`20` / `25` / `50`). Details: [Axes · by chart type](/axes/by-chart-type) · [Domain axis · mekko](/axes/domain) · [Percent axis sample](/samples/percent-axis).

***

## Type-specific behaviour

* Width comes from category totals of the same grid – not a dedicated width row.
* Totals labels often via `annotations.totals`.

***

## Pitfalls

* Using `barMekko` options / width-row layout on a classic mekko
* Expecting absolute €/units on the value axis – mekko heights are shares
* Hand-authoring dense domain chrome from scratch – export from the editor when possible

***

## Related

* [Bar Mekko](/chart-types/bar-mekko) · [Stacked bar 100%](/chart-types/stacked-bar)
* [chartData schema](/api/chart-data) · [Axes](/axes/)
* Sample: [Marimekko](/samples/mekko)