Two-variable mosaic. Column widths encode one variable, segment heights the other.
A free, animated marimekko (mosaic) chart you can read here or embed on any website, from Scrollchart.
Marimekko (Mosaic) Chart
A Marimekko (or mosaic) chart encodes two categorical variables simultaneously. Column width represents the share of the first variable: a column twice as wide as another means its category accounts for twice the total. Column height is always 100%, but each column is subdivided into stacked segments whose heights represent the conditional distribution of the second variable within that column.
To read a specific cell: note the column width (how large the outer category is) and the segment height within that column (what fraction of that category holds this inner value). A narrow column with a tall segment at the top means: a small outer category has a high concentration of the inner value. A wide column with an even split of segments means: the largest outer category distributes the inner variable roughly uniformly.
The total area of any individual cell is proportional to the joint frequency of its two category values. Cells with visually large area represent the most common category combinations in the data.
Marimekko charts are dense and require careful annotation. Small cells (narrow column, small segment) often cannot hold a readable label, forcing the designer to use color legends or tooltips. Readers unfamiliar with the format frequently misread column width as irrelevant decoration, focusing only on segment heights as if it were a standard stacked bar. A clear title and brief explanatory note ("column width = market share") significantly reduce that misreading.
Comparing non-adjacent cells is difficult. The eye naturally compares segment heights within the same column, but comparing the same segment across distant columns requires mentally accounting for different column widths. For direct cross-column comparison of the inner variable only, a standard 100% stacked bar chart (uniform column widths) communicates more clearly, at the cost of losing the outer-variable encoding.
Editorial pages where a quick visual replaces a wall of text
Content-marketing posts that need a clean, branded illustration
Source & accuracy
This marimekko (mosaic) chart is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.
How a Marimekko chart encodes two variables
A Marimekko chart, also called a mosaic chart, displays two categorical dimensions at once using a grid of rectangles. The chart is divided into columns whose widths are proportional to one variable, often a total such as market size by segment. Each column is then split vertically into stacked segments whose heights show the proportional breakdown of a second variable within that column.
Because both width and height carry meaning, the area of each tile reflects the combined share of the two variables, giving a two-dimensional view of a contingency between them.
When it is useful
Marimekko charts are popular in market and competitive analysis, where they can show, for example, how large each market segment is (column width) and how share within each segment is split among competitors (segment height) on a single diagram.
The format conveys a lot of structure in one image, but precise comparison of areas is difficult for the eye, so it is better for revealing overall patterns than for reading exact values. Mosaic plots are the closely related statistical version used to visualize relationships in contingency tables.
Embed this diagram
Add this animated marimekko (mosaic) chart to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.
Reference
What this is
A free, embeddable, animated marimekko (mosaic) chart for any website.
Who uses it
Data journalists, Researchers & academics, Content marketers, News organizations.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.
Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback -
see the WordPress plugin page for details. Any format keeps
the same Core Web Vitals profile and the same explainer text.
By embedding, you acknowledge the diagram and explainer text are served from scrollchart.com and may be updated from time to time to reflect new research or to link to relevant sources within the explainer.
Frequently asked questions
Where can I get a free animated "Marimekko (Mosaic) Chart" for my website?
Scrollchart provides "Marimekko (Mosaic) Chart" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a marimekko (mosaic) chart in a blog post or article?
Paste the one-line HTML snippet from the Scrollchart diagram page into your post editor. It works in WordPress, Webflow, Ghost, and plain HTML with no plugin required. The animated diagram and its explainer text load from scrollchart.com and render directly in your page DOM.