mailinapp
Documentation menu

Treemap block

Proportional tiles sized by value, packed into a rectangle rather than sliced into wedges — the same one-value-per-category authoring shape as the pie chart, just laid out by area ("squarified") instead of by angle. It's a different visual answer to the same "share of a whole" question a pie or donut chart answers.

How it works

Every authored row is one tile; a tile's area is proportional to its value against the total of every kept tile. Because a treemap tile is data-model-identical to a pie slice — one value per category, share-of-total, just a different geometry — the block reuses the pie chart's authoring columns, color-assignment logic, and fold behavior outright rather than duplicating that logic for a second chart type.

That shared lineage means the fold rule is exactly pie's: past 8 categories, the smallest tiles by value fold together into a single synthetic "Other" tile rather than the layout getting unreadably fragmented. The tiles that survive the fold keep their original authored relative order (not re-sorted by value), so their color assignment stays stable and predictable; "Other," when present, always sorts last. Rows with a blank label or a non-positive value are skipped outright — a treemap tile can't represent zero or negative share of a whole.

The always-visible data table beneath the image is pie's own shape: Category, Value, and Percent columns, one row per tile (including the folded "Other" row when it exists) — the exact percentages the tile areas represent, as selectable text. The legend above the table lists every tile with the same percent figure, always rendered (never gated behind a series count) since a treemap's own title can't name an individual tile the way a lone bar/line series can borrow the block's title.

Configurable fields:

  • Chart title — optional heading text above the chart.
  • Data — the row-list: a Category label, a numeric Value, and an optional per-tile Color override.
  • Background color, padding, border and border radius on the card.
  • Title color/size and legend color/size — text styling for the heading and the legend/table text beneath the image.

If no rows are authored yet (or every row has a blank label or non-positive value), the block renders its title and card chrome with a plain "Add at least one row of data to render this chart" notice instead of the image.

Examples

Traffic share by channel — organic, paid, referral, direct, social — as tiles in a monthly marketing recap makes the relative size of each source immediately legible without reading a percentage column. A budget-allocation email can tile spend by department or project to show where money actually went this quarter. A support team can tile ticket volume by category (billing, bugs, onboarding, feature requests) to give stakeholders a fast read on where the support load concentrates.

What the static fallback looks like

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Traffic share by channel</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="320"
       alt="Treemap: Organic 40 (40%), Paid 25 (25%), Referral 15 (15%), Direct 12 (12%), Social 8 (8%)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Category</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Percent</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Organic</td>
      <td style="padding:4px 8px">40</td>
      <td style="padding:4px 8px">40%</td>
    </tr>
  </table>
</div>

The alt text spells out every tile's value and share of the total; the table beneath repeats the same figures as selectable HTML, including any folded "Other" tile.

Related