# How to Make a Marimekko Chart in Figma (Two Variables, One Rectangle)
_August 27, 2026 · 11 min read · by Systergon_
> A Marimekko puts market size and market share in one picture: column width is the size of each category, segment height is the composition inside it, and every block’s area is the product. It is the standard chart of strategy decks — and the one where area comparison quietly fails. Where it earns its keep, and where a pair of simpler charts wins.
Tags: Figma, Charts, Marimekko, Mosaic Plot, Plugin
URL: https://systergon.com/blog/figma-charts-marimekko-chart
---
[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [See the Marimekko gallery →](https://systergon.com/figma-charts/chart-types/marimekko)

A Marimekko chart — mekko, mosaic, whatever your industry calls it — puts two variables into one rectangle. **Column width** is the size of each category, **segment height** is the composition within it, and the area of any block is therefore the product of the two. It is the standard chart of strategy consulting for one reason: it shows market size and market share in a single picture.

![A Marimekko chart drawn by Nivo inside the Figma Charts plugin](https://systergon.com/blog/figma-charts-marimekko-chart/images/marimekko-nivo.svg)

_Real plugin output: a Nivo Marimekko captured from the editor. Every chart on this page is the library’s own drawing._

It is also one of the hardest charts to read accurately, because every block is a different width _and_ a different height, so nothing shares a baseline with anything. This page is about what it genuinely shows, what it only appears to show, and the two simpler charts that usually do the job better.

## First — get the plugin

Everything below happens inside **Figma Charts**, a Figma plugin. It runs the real JavaScript charting libraries — Google Charts, Highcharts, D3-based Nivo, ApexCharts and Apache ECharts — inside the plugin window, so the mosaic on your canvas is the library’s own layout.

[Install Figma Charts from the Figma Community →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts)

Press **⌘/** (**Ctrl /** on Windows), type _Figma Charts_, hit Enter, and pick **Marimekko** from the category filter. One example, from Nivo — and the catalogue’s claim that Highcharts has one too turns out to be about a different chart, which the [library section](#libraries) settles.

## Two variables, one rectangle

Read it in three steps and it makes sense:

- **The columns** are your first categorical variable — segments, regions, industries — and each column’s _width_ is that category’s total. Wide column, big segment.
- **The stacks** inside each column are your second variable — competitors, product lines, channels — expressed as shares, so every column fills the full height.
- **Each block’s area** is the absolute quantity: share of a segment multiplied by the size of that segment. The biggest block on the chart is the biggest single number in the dataset.

That is genuinely useful, and it is why the form persists in strategy work: “we have 40% of a tiny market and 8% of an enormous one” is one picture rather than two charts and a paragraph.

## Two nearby charts, and what each drops

![A 100% stacked bar chart drawn by Google Charts](https://systergon.com/blog/figma-charts-marimekko-chart/images/marimekko-100-stacked.svg)

_**The 100% stacked bar** — a Marimekko with all the columns the same width. It shows composition per category perfectly and hides how big each category is, which is exactly the variable the Marimekko adds._

![A variwide chart drawn by Highcharts](https://systergon.com/blog/figma-charts-marimekko-chart/images/marimekko-variwide.svg)

_**The variwide chart** — bars whose widths vary by a second variable, but with no internal stacking. It carries size and one value rather than size and a composition, and it is what Highcharts offers in place of a true Marimekko. It is filed under Bar._

## When a Marimekko is the wrong chart

**1. The audience is not used to it.** This chart has a real learning curve: readers who have not met one before frequently interpret the widths as a second stacking dimension or ignore them entirely. In consulting decks it works because everyone in the room has seen a hundred; in a product dashboard it usually does not.

**2. Precise comparison matters.** No two blocks share a baseline, and comparing areas of different aspect ratios is one of the least accurate perceptual tasks there is. If someone will rank the blocks, they need a [bar chart](https://systergon.com/blog/figma-charts-bar-chart).

**3. You have many categories.** Six or eight columns is the working ceiling; past that, narrow columns cannot hold their labels and the stacked segments become slivers.

A fourth, which decides most cases in practice: **when one of the two variables is not really needed.** If the audience only cares about composition, use a 100% stacked bar. If they only care about size, use a bar chart. The Marimekko earns its complexity only when both variables are load-bearing at once.

## Why strategy decks are full of these

The Marimekko is the house chart of management consulting, and understanding why explains both its strengths and its reputation.

**It answers the two questions a market analysis always asks at once.** How big is each segment, and who holds what share of it. Those are the inputs to nearly every “where should we invest?” conversation, and putting them in one picture lets a room discuss both without flipping between slides.

**It makes strategic position visible as geometry.** A wide column where your colour is a thin sliver is an opportunity; a narrow column you dominate is a niche. Those two patterns are recognisable across the room, which is exactly what a chart in a presentation needs to do.

**And it flatters complexity.** The less charitable reason: a Marimekko looks rigorous. It is dense, it is unfamiliar, and it signals that work has been done — which is why it appears in decks whose underlying finding would fit in a sentence.

The test worth applying before using one: can you state the conclusion in a sentence, and does the chart make that sentence more convincing or merely more elaborate? If it is the second, a bar chart of segment sizes and a line of share numbers will serve the argument better.

## Building one, step by step

Six screens, start to finish, captured from the plugin.

![The Figma Charts gallery filtered to the Marimekko category](https://systergon.com/blog/figma-charts-marimekko-chart/images/step-gallery.webp)

_**1. Filter to Marimekko.** Nivo has the only true example. Highcharts’ variwide, under Bar, is the nearest alternative if you need varying widths without stacking._

![The Figma Charts editor with a Marimekko chart in the preview](https://systergon.com/blog/figma-charts-marimekko-chart/images/step-editor.webp)

_**2. The editor.** Live preview above, tabs below. Marimekkos want width: narrow frames squeeze the small columns until their labels have to rotate, which is where legibility goes first._

![The Data tab showing the values behind a Marimekko chart](https://systergon.com/blog/figma-charts-marimekko-chart/images/step-data.webp)

_**3. Two variables of data.** A row per column category with its total, plus the breakdown within each. Nivo edits this as JSON, because the structure carries two nested dimensions that a flat grid cannot express cleanly._

![The Configuration tab showing Marimekko option groups](https://systergon.com/blog/figma-charts-marimekko-chart/images/step-config.webp)

_**4. Configure.** Padding between columns, label placement, colour per series and axis formatting. Getting the two axes labelled — one for width, one for share — is what makes the chart readable to someone meeting it for the first time._

![The Export tab showing code export formats](https://systergon.com/blog/figma-charts-marimekko-chart/images/step-export.webp)

_**5. Export.** Nivo exports to React, so this chart constrains the handoff more than most._

![The + SVG and + PNG insert buttons](https://systergon.com/blog/figma-charts-marimekko-chart/images/step-insert.webp)

_**6. Insert.** SVG gives you every block as a rectangle with real text — useful here, because Marimekko labels almost always need manual placement once the real category names are in._

## The data shape it needs

Two dimensions: a set of column categories with their totals, and a breakdown within each column. The plugin classifies it as a **JSON** shape rather than a table, because the nesting does not flatten cleanly — and **Nivo Marimekkos cannot bind a live data source**, which the plugin refuses rather than corrupting the structure.

Two things to settle first. **Whether the inner values are shares or absolutes** — most implementations normalise each column to 100%, so supplying absolute numbers works and the chart converts them; supplying pre-computed percentages plus a separate total works too, and mixing the two produces columns that are subtly wrong. And **where the column totals come from**: they are usually a different measure from the stack (market size versus revenue, headcount versus cost), and the two must be consistent in units and period.

One caution specific to this chart: an unparseable value becomes **0**, and a zero-width column is a vertical line with a label attached — visible, unreadable and easy to miss.

## Library by library

The **Marimekko** category holds **one example, in Nivo**. The catalogue lists this type as Highcharts and Nivo, and the measurement says otherwise — what Highcharts has is the _variwide_ chart, filed under Bar, which varies column width by a second variable but does not stack within the columns. Close, and not the same chart.

- **Nivo — 1 example**, a true Marimekko with both dimensions. React-only export, JSON editing, no live data binding.
- **Highcharts — the variwide chart, under Bar.** Width from one variable, height from another, no internal composition. For “big categories should look big” without a stack, this is the simpler and often better answer.
- **ECharts, Google Charts and ApexCharts — no equivalent.** The practical route there is a 100% stacked bar chart with per-column widths faked by grouping, or the honest one: draw it as two charts.

Given that, it is worth saying plainly: **for most teams a Marimekko is a hand-built graphic**. Insert a stacked bar as SVG, adjust the column widths on the canvas to match your totals, and you have a Marimekko that exports as vector and is fully editable — which is how most of the ones in circulation are made.

As always: **design in whichever library your engineers already use**, because the export then matches production exactly. [Choosing the right chart library](https://systergon.com/blog/figma-charts-choosing-the-right-chart-library) covers the trade-offs.

## Label both axes, or nobody can read it

This is the difference between a Marimekko that communicates and one that impresses. The chart has two quantitative dimensions and readers meeting it for the first time will not infer either.

**The horizontal axis is cumulative size.** Running from 0 to the total across the columns, so the width of each column can be read as a quantity rather than guessed. Many implementations omit it; adding it converts the widths from an impression into data.

**The vertical axis is percentage.** 0 to 100, marked at quarters, because every column is normalised. Without it the stacks read as absolute values, which is precisely the misreading the chart invites.

**Label the column totals on top** and the segment percentages inside where they fit. A Marimekko carries so much information that the labels are not decoration — they are the only way to recover the numbers from an area encoding.

## Styling it well

**Colour by series, consistently.** The stacked segments are the same set of categories in every column, so one colour per series across the whole chart is mandatory — colouring by column destroys the comparison the chart exists for.

**Order the series consistently too**, with the most important at the bottom. Only the bottom segment shares a baseline across columns, exactly as in a stacked bar chart, so the series you want compared goes there.

**Sort the columns deliberately.** By size (widest first) reads as a ranking of markets; by a domain order (regions, stages) reads as a sequence. Both are defensible; alphabetical is rarely either.

**Thin gaps between columns.** Enough to separate them, not enough to break the sense of one continuous 100% band across the top.

**Keep the palette narrow.** Four or five series is the ceiling; each additional one both crowds the stacks and adds a colour to hold in mind.

For type and colour, bind them to your design system rather than picking by hand — covered in [Your chart, your design system](https://systergon.com/blog/figma-charts-design-system-colors-typography-tokens).

## Getting the two measures to agree

A Marimekko draws its widths from one measure and its stacks from another, and the commonest data error is that the two do not reconcile.

**They must cover the same population and period.** Market size from an industry report and your revenue from last quarter’s ledger produce a chart where the widths and the stacks describe different worlds. Nothing in the rendering will flag it.

**The stack should sum to the column total.** If the segments within a column are known shares of that segment, their absolute values should add up to the width you gave the column. Where they do not — because “other players” are missing — add an explicit “other” series rather than letting the chart normalise the gap away silently.

**Check one column by hand.** Multiply a segment’s share by its column total and confirm the answer matches your source. One arithmetic check catches nearly every version of this problem, and it takes a minute.

## Reading it well — and the ways it misleads

**Only the bottom segment can be compared across columns.** Every segment above it starts at a different height, so its position varies and only its thickness carries the value — the same limitation as a stacked [area chart](https://systergon.com/blog/figma-charts-area-chart), and it applies here to the vertical dimension.

**Area is a product, so it hides which factor drove it.** A large block might be a big share of a small segment or a small share of a big one. The chart shows the result and not the cause, which is why the two axes matter so much.

**Narrow columns are not unimportant.** A tiny market with a dominant share is a strategically interesting position and a two-millimetre column. Readers weigh by ink and will skip it.

**Percentages make every column look equally full.** That is the point, and it means a column representing three customers looks as substantial vertically as one representing three thousand. The width is the only correction, and it is easy to overlook.

**Two Marimekkos cannot be compared.** Different totals mean different widths, so the same block in two periods can grow while its column shrinks. If change over time is the question, this is the wrong chart.

## Building one by hand, which most people do

Because only one library here draws a true Marimekko, most of the ones in circulation are assembled rather than rendered — and it is worth knowing the recipe, because it is straightforward and gives you complete control.

**Start from a 100% stacked bar chart.** Same series, same categories, every column equal width. Render it in whichever library your team uses and insert as SVG.

**Scale each column horizontally.** Compute each column’s width as its share of the total, and resize the column groups on the canvas to match. In Figma this is arithmetic once and a few drags; the vertical proportions inside each column stay correct because scaling horizontally does not touch them.

**Add the top axis.** A cumulative scale across the top — 0 to the total — is what turns the adjusted widths from an impression into data, and it is the part hand-built versions usually omit.

The one risk to manage: **the widths are now hand-maintained**, so a data change means redoing the arithmetic. For a one-off deck that is fine. For anything recurring, use Nivo or draw two charts.

## Accessibility

**Label inside the blocks.** With one colour per series and four or five series, a legend is workable — but the blocks are large enough to hold their own percentages, and doing that removes the lookup entirely.

**Do not rely on width alone for the size variable.** Column totals printed on top make the horizontal dimension readable to anyone.

**Check contrast across every segment colour**, since labels sit on the fills.

**Give it a text equivalent.** The Export tab’s **Copy Alt Text**, **Copy Data Table** and **Set Node Desc** produce a description, a table of the numbers and a description written onto the Figma node. For a Marimekko the table is genuinely necessary, because the chart encodes two variables as area and neither is precisely readable.

## Common questions

### What is a Marimekko chart?

A stacked bar chart where the column widths also carry a variable: width is the size of each category, height is composition within it, and each block’s area is the absolute quantity. Also called a mekko or mosaic chart.

### Marimekko or 100% stacked bar?

The stacked bar when only composition matters — it is simpler and every column is equally readable. The Marimekko when the size of each category is also part of the argument, which in practice means market-share analysis and little else.

### Which libraries can draw one?

**Nivo** has the only true Marimekko in the plugin. Highcharts’ _variwide_ chart (under Bar) varies column width without internal stacking. ECharts, Google Charts and ApexCharts have no equivalent — there, a hand-built version from a stacked bar is the practical route.

### What is the difference between a Marimekko and a mosaic plot?

Terminology, mostly. Statisticians call it a mosaic plot and use it for contingency tables; consultants call it a Marimekko or mekko and use it for markets. The construction is the same: width for one variable, height for another.

### How many columns and series can it carry?

Six to eight columns and four to five series. Past that, narrow columns cannot hold labels and thin segments cannot be seen — and the chart is already asking a lot of the reader.

### Do I need both axes?

Yes. The horizontal axis makes the widths readable as quantities and the vertical one makes clear that the stacks are percentages. Without them, readers guess at one dimension and misread the other.

### Can it show change over time?

Not well. Two Marimekkos have different column widths, so a block can grow while its column shrinks and the comparison is unreliable. Use a line chart of shares, or a bar chart of the absolute values.

### How do I build one if my library has no Marimekko?

Render a 100% stacked bar chart, insert it as SVG, then scale each column horizontally to match its share of the total and add a cumulative axis across the top. The vertical proportions survive horizontal scaling, so the composition stays correct — and you own the widths, which means re-doing the arithmetic whenever the data changes.

### Does the chart stay editable in Figma?

Insert as **SVG** and every block is a rectangle with real text — and since many teams build this chart by adjusting a stacked bar’s column widths by hand, an editable vector export is exactly what the workflow needs. Insert as **PNG** for a flat image at twice the pixel density.

## Where to start

Open the plugin, filter to Marimekko, and put your two variables in — then ask whether both are doing work. Cover the widths with your hand: if the chart still makes its point, you wanted a 100% stacked bar. Cover the stacks: if it still makes its point, you wanted a bar chart. Only if both losses hurt is this the right chart, and then it is the only one that will do.

[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [Browse all 45 chart types →](https://systergon.com/figma-charts/chart-types)