Skip to main content
Mekko charts (also called marimekko or market map charts) display stacked bars with variable widths, showing both size and composition simultaneously.

​
When to use

  • Market share analysis - Show market size and segment composition
  • Portfolio breakdown - Display size and composition of groups
  • Two-dimensional part-to-whole - Compare both totals and proportions
  • Strategic positioning - Visualise competitive landscape

​
Basic example

const config: GraphConfig = {
  type: 'mekko',
  data: {
    columns: [
      { key: 'region', label: 'Region' },
      { key: 'product_a', label: 'Product A' },
      { key: 'product_b', label: 'Product B' },
      { key: 'product_c', label: 'Product C' }
    ],
    rows: [
      { region: 'North America', product_a: 120, product_b: 80, product_c: 50 },
      { region: 'Europe', product_a: 90, product_b: 110, product_c: 40 },
      { region: 'Asia Pacific', product_a: 200, product_b: 150, product_c: 100 },
      { region: 'Latin America', product_a: 40, product_b: 30, product_c: 20 }
    ]
  }
};

​
Data structure

Mekko charts require:
  • First column: Categories (becomes variable-width bars)
  • Remaining columns: Numeric values (stacked segments within each bar)
  • Bar - Fixed-width stacked bars
  • Column - Percentage composition