---
url: https://chartbuddy.io/embed/docs/chart-types/bar-mekko.md
---
# Bar Mekko

Variable-width bars with **absolute** heights: width encodes one metric, height another.

* **Bar width** – first data row after the header (not drawn as a segment)
* **Bar height** – later rows stack on a real value axis (not normalised to 100%)

Classic [Marimekko](/chart-types/mekko) normalises every column to 100% height. Use Bar Mekko when height must stay in real units (revenue, passengers, …).

## Identity

| | |
|---|---|
| `chartType` | `barMekko` |
| Option bag | `barMekko` (not `mekko`) |
| `seriesData` layout | `widthRowThenHeightRows` |
| Min grid | 3 rows × 2 columns (header + width + ≥1 height series) |
| Orientation | Width along domain; value axis often hidden by default |
| Sample | [Bar Mekko](/samples/bar-mekko) |

***

## Minimal `chartData`

```js
{
  chartType: 'barMekko',
  isDataTransposed: true,
  seriesData: [
    ['', 'Enterprise', 'Mid-market', 'SMB', 'Startup'],
    ['Accounts', 120, 85, 200, 350],   // width – sizes bars, not drawn
    ['Core revenue', 48, 16, 8, 3],    // stacked height
    ['Add-ons', 14, 12, 10, 6],
  ],
  title: { visible: true, text: 'Revenue by segment' },
  subtitle: {
    visible: true,
    text: 'Bar height = revenue (€m) · width = number of accounts',
  },
}
```

***

## `seriesData`

With `isDataTransposed: true` (recommended):

| Row | Role |
|---|---|
| Row 0 | Category labels |
| Row 1 | **Width** values – one per category (not drawn) |
| Row 2+ | **Height** series – stacked inside each bar |

```js
[
  ['', 'Enterprise', 'Mid-market', 'SMB'],
  ['Accounts', 120, 85, 200],
  ['Core revenue', 48, 16, 8],
  ['Add-ons', 14, 12, 10],
]
```

Positive segments stack up; negative stack down. Shared layout rules: [chartData schema · seriesData](/api/chart-data#seriesdata-layouts).

***

## Option bag: `barMekko`

| Field | Default (new charts) | Role |
|---|---|---|
| `sort` | `'heightDesc'` | Column order along the width axis |
| `overrides` | `{}` | Per-bar patches (column-first) |

`sort` values: `heightDesc` · `heightAsc` · `widthDesc` · `widthAsc` · `dataOrder`.

```js
{
  chartType: 'barMekko',
  seriesData: [/* … */],
  barMekko: { sort: 'widthDesc' },
}
```

Do not put these fields on `mekko` – wrong bag.

***

## Axes & scales

| Role | Behaviour |
|---|---|
| Domain | Linear width domain (category thickness) |
| Primary range | Absolute value scale; often **`visible: false`** by default (totals + domain labels can be enough) |

Format the value side when you show it. Details: [Axes · by chart type](/axes/by-chart-type) · [Domain axis](/axes/domain).

***

## Type-specific behaviour

* Width row is structural – it is not a legend series you “hide.”
* Sorting rearranges columns along the width axis; it does not change the grid math.

***

## Pitfalls

* Only two rows (missing a height series) – fails min grid
* Putting width in a later row or treating width as a drawn segment
* Using `mekko` bag / expecting 100% heights

***

## Related

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