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 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

---

Minimal chartData

{
  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

[
  ['', '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.

---

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.

{
  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 · Domain axis.

---

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 · chartData schema · Axes
• Sample: Bar Mekko