Bar Mekko

A Bar Mekko (variable-width bar chart) shows two independent measures at once:

• Bar width — one metric per category (for example number of accounts, market size, or route capacity). Encoded by the first data row after the header. That row sizes the columns and is not drawn as a segment.
• Bar height — one or more stacked series on a real value axis (not normalised to 100%). Positive segments stack up, negative segments stack down.

Use it when you want a Marimekko-style “width × height” story but need absolute heights (revenue in €m, passengers in thousands) instead of shares that always sum to 100%.

Compare with Marimekko (mekko): classic Marimekko normalises every column to 100% height and both axes read as composition. Bar Mekko keeps width proportional and height absolute.

Minimal chartData

{
  chartType: 'barMekko',
  isDataTransposed: true,
  seriesData: [
    ['', 'Enterprise', 'Mid-market', 'SMB', 'Startup'],
    ['Accounts', 120, 85, 200, 350],   // width row — 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',
  },
}

Grid layout

With isDataTransposed: true (recommended):

Row	Role
Row 0	Category labels (Enterprise, Mid-market, …)
Row 1	Width values — one per category
Row 2+	Height series — stacked inside each bar

You need at least three rows (header + width + one height series).

Options

Optional barMekko bag:

barMekko: {
  sort: 'heightDesc', // column order along the width axis
}

sort values: heightDesc · heightAsc · widthDesc · widthAsc · dataOrder (legacy spellings desc / asc still load).

Sample

Live chart and copy-paste HTML: Bar Mekko sample.