Source Code

<div class="demo">
  <div class="chart-card">
    <div class="chart-head">
      <h3>Revenue by Region &amp; Product Line</h3>
      <p>Column width = region's share of total revenue · segment height = product mix within region</p>
    </div>
    <div class="mekko" id="mekko"></div>
    <div class="legend" id="legend"></div>
  </div>
</div>

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Marimekko Chart (Mekko Chart) — Two-Dimensional Proportional Stacked Bars

Marimekko (Mekko) Chart — Proportional Stacked Segments · Charts · Plain HTML, CSS & JS · Live preview

TagsData Visualization

What's included

Features

True two-dimensional encoding — column width for share-of-total, segment height for within-category mix
Pure flexbox layout with two independent nested percentage systems, no manual pixel math
Hover reveals an in-chart percentage label plus a full contextual tooltip with both ratios
Auto-generated legend derived directly from the first category's segment definitions
Column widths computed automatically from raw totals — no need to pre-normalize percentages yourself
Rounded bottom corners on the base segment of each column for a polished stacked-bar look
Zero dependencies — no charting library, canvas, or SVG required
Scales to any number of columns and any number of stacked segments per column

About this UI Snippet

Marimekko (Mekko) Chart — Encoding Two Ratios in One Chart

Screenshot of the Marimekko (Mekko) Chart — Proportional Stacked Segments snippet rendered live

A regular stacked bar chart can show a mix within each category, but every bar is the same width — so it can't also show how big each category is relative to the others. A Marimekko chart (also called a mekko or mosaic chart) solves that by making both dimensions meaningful: column *width* encodes a category's share of the overall total, while the stacked *segments within* each column encode that category's internal composition, as percentages that always sum to 100% regardless of the column's width.

Why the two axes can't be computed the same way

Column widths are computed once, across the whole dataset: widthPct = (region.total / totalRevenue) * 100, so all four column widths sum to 100% together. But each individual segment's height is computed *within its own column only* — every region's three segments (Platform/Services/Add-ons) independently sum to 100% of that region's height, even though the regions themselves have wildly different totals. This is the core Marimekko idea: area actually represents the product of the two proportions (a big region's big segment is a large rectangle; a small region's big segment is still visually small, because the column itself is narrow) — letting a reader compare both "how big is this region" and "what's its mix" from the same figure.

Building it without an SVG or canvas library

Each column is a flex item whose width is set directly to its percentage share via inline style, inside a flex container (.mekko) with no gaps forcing exact widths. Each segment inside a column is a flex child (in a column-reverse flex column, so segments stack bottom-up in DOM order) sized with height: ${val}% relative to its parent column's own height — two independent percentage systems nested inside each other, both handled by ordinary flexbox without any manual pixel math.

Hover reveals exact numbers without cluttering the base view

Every segment shows a percentage-of-region label only on :hover, and carries a full title tooltip breaking down both the segment's within-region percentage and the region's own share of the grand total — keeping the chart's resting visual state clean while still making the underlying numbers available on demand.

Where Marimekko charts genuinely earn their complexity

This chart type is more cognitively demanding to read than a simple bar or pie chart, so it's best reserved for exactly the situation it was built for: comparing both the *size* and the *composition* of several categories at once — market share broken down by product mix, budget allocation broken down by department, or (as in this snippet) revenue by region broken down by product line — rather than using it as a default replacement for a simpler chart.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Ask an AI assistant to explain precisely why a Marimekko chart's segment area represents the product of two independent proportions, and to walk through a worked example comparing a large region's small segment against a small region's large segment to build real intuition for reading the chart correctly. It's also worth asking for an accessible data-table fallback rendered alongside the chart, or a version with click-to-drill-down that re-renders the mekko one level deeper into a category's own sub-breakdown.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a Marimekko (mekko) chart in HTML, CSS and vanilla JavaScript — no charting library, no SVG, no canvas.

Requirements:
- Accept a dataset of categories, each with a total value (used to compute that category's column width as a percentage of the sum of all totals) and a list of named segments with percentage values that sum to 100 within that category (used to compute stacked segment heights within that specific column).
- Render each category as a flex column whose width is set to its computed percentage of the overall total, and render its segments as stacked flex children whose heights are set to their percentage of that column's own height — using plain CSS percentage widths/heights, not fixed pixel calculations.
- On hovering any segment, reveal an in-chart percentage label for that segment and show a tooltip (or equivalent) stating both the segment's percentage within its category and that category's percentage share of the overall total.
- Auto-generate a color-coded legend from the segment labels and colors defined on the first category, assuming segment order and colors are consistent across all categories.
- Label each column beneath it with the category name and its computed percentage share of the total.
- Keep the whole implementation dependency-free and able to accept any number of categories and any number of segments per category.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

  1. 1
    Edit the regions arrayEach region needs a name, a total (used to compute column width) and a segs array of {label, val, color} that must sum to 100.
  2. 2
    Keep segment percentages summing to 100 per regionColumn widths are computed automatically from totals, but each region's own segment values are not auto-normalized — ensure they sum to 100 yourself.
  3. 3
    Reorder segments consistently across regionsKeep the same segment order (e.g. Platform, Services, Add-ons) in every region's segs array so the stacking and legend stay visually aligned.
  4. 4
    Adjust the legend automaticallyThe legend is generated from the first region's segment labels and colors — just keep label/color pairs consistent across all regions.
  5. 5
    Hover any segment for exact figuresEach segment's title tooltip shows both its within-region percentage and its region's share of the overall total.

Real-world uses

Common Use Cases

FIN
Market Share by Segment
Show which competitors dominate a market (column width) and their product mix within it (segment height) at once.
BIZ
Revenue by Region and Product Line
The exact use case in this demo — compare regional revenue scale alongside each region's product composition.
Budget Allocation by Department
Column width for each department's total budget, segments for how that budget splits across categories.
Portfolio Composition Analysis
Compare asset classes' relative size and their internal allocation breakdown in one figure.
Related: Seller Rating Breakdown
See the Seller Rating Breakdown for a related charts pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

A regular stacked bar chart uses equal-width bars, so it can only show composition, not relative size between categories. A Marimekko chart varies both the width (representing each category's share of an overall total) and the segment heights within each bar (representing that category's own internal mix), encoding two ratios in a single chart.

Yes — each region's own segs array should sum to 100, since segment heights are computed as a percentage of that specific column's height, independent of the column's width or the other columns' segment values.

Each region's total is divided by the sum of all regions' totals: widthPct = (region.total / totalRevenue) * 100. This is done once across the whole dataset so all column widths sum to 100% of the chart's width together.

Flexbox with percentage-based width and height styles handles both nested percentage systems (column width relative to the whole, segment height relative to its column) natively, without needing to calculate absolute pixel coordinates the way an SVG-based implementation would require.

Yes — the segs array for any region can contain as many {label, val, color} objects as needed; just make sure their val values still sum to 100 for that region.

The demo relies on hover tooltips (title attributes) for exact figures, which are not reliably announced by screen readers. For a fully accessible version, pair the chart with an adjacent data table or add appropriate aria-label text summarizing each segment's values.