---
title: "Mosaic"
description: "Marimekko tiled cells. What the mosaic is for, the data it needs and every option it has."
section: "Widgets"
canonical: "https://banksync.io/docs/widgets/chart-mosaic"
specs: ["dashboards"]
operationBindings: [{"capability":"dashboards","operation":"dashboards.author"}]
---

Marimekko tiled cells. It sits in the **Part-of-whole** group of the widget library.

![Example mosaic on a BankSync dashboard](https://cdn.banksync.io/screenshots/docs/charts/mosaic.236dd145b0040054.png)

## When to use it

Use a mosaic (Marimekko) chart to show two splits at once: how big each category is, and how it breaks down. Each column's width is its share of the grand total, and its segments show each series' share within it. For example, spending by account split by category shows which account spends most and on what.

## When to pick something else

- Only the breakdown within each category matters? Use a **100% stacked bar**.
- Actual amounts rather than shares? Use a **Stacked bar**.
- A single split? Use a **Donut chart** or **Treemap**.

## The data it needs

Pick these in the **Data** tab of the inspector. BankSync suggests a column for each when your source has an obvious match.

| Field      | Needed   | Pick                 | Notes |
| ---------- | -------- | -------------------- | ----- |
| **X axis** | Yes      | a category or a date |       |
| **Y axis** | Yes      | a number             |       |
| **Series** | Optional | a category           |       |
| **Color**  | Optional | a category           |       |

Rows that share a category are combined before drawing: choose **Sum**, **Average**, **Count**, **Min** or **Max** on the value field. See [Binding data](/docs/widgets/binding-data).

## Mosaic options

This chart has no options of its own; everything on its **Style** tab is the shared chart styling below.

## Shared chart styling

Every chart also has the shared styling options. These apply to this one:

- [Legend](/docs/widgets/chart-styling#legend): position, layout and which series show.
- [Axes](/docs/widgets/chart-styling#axes): titles, tick labels and number format.
- [Grid](/docs/widgets/chart-styling#grid), [title](/docs/widgets/chart-styling#title), [padding](/docs/widgets/chart-styling#padding) and [background](/docs/widgets/chart-styling#background).
- [Value labels](/docs/widgets/chart-styling#value-labels) on the marks.
- [Categories and labels](/docs/widgets/chart-styling#categories-and-labels): top N with "Other", sort order, readable labels, the handwritten callout.
- [Style](/docs/widgets/chart-styling#style): corner radius, line width, opacity and animation.
- [Tooltip](/docs/widgets/chart-styling#tooltip) on hover.
- Click to filter: clicking a mark can filter the rest of the dashboard. See [Filters and cross-filtering](/docs/dashboards/filters-and-cross-filtering).
- [Colours](/docs/widgets/chart-styling#palette): follow the dashboard palette or pick one for this chart.

## Messy data

- Negative and missing values count as zero. If only negatives remain you see "Only negative values; nothing to show", and all zeros show "Everything is zero for this period".
- Past eight series, the smallest fold into one grey "Other" segment. Categories are never folded, so a long tail becomes a row of slivers.
- Without a series field, every column is one full-height block and only the widths carry meaning.
- Category labels are shortened to fit their column and hidden under columns too narrow to hold them.

## On a phone

Narrow columns lose their labels first on a phone, and small segments lose their percentage labels. Keep it to a few categories, or use a **100% stacked bar**, which reads better in a narrow card.

## Related charts

- [Pie chart](/docs/widgets/chart-pie): Categorical share
- [Donut chart](/docs/widgets/chart-donut): Pie with center label
- [Treemap](/docs/widgets/chart-treemap): Nested rectangles by value
- [Sunburst](/docs/widgets/chart-sunburst): Hierarchical radial wedges
- [Nightingale](/docs/widgets/chart-nightingale): Radial polar pie
- [Radial bar](/docs/widgets/chart-radial-bar): Polar bar chart
- [Waffle](/docs/widgets/chart-waffle): 100-unit grid share
- [Funnel](/docs/widgets/chart-funnel): Conversion stage flow
- [Pyramid](/docs/widgets/chart-pyramid): Inverted funnel