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. A treemap tile is data-model-identical to a pie slice: one value per category, share-of-total, just a different geometry. Because of that, 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. That keeps their color assignment stable and predictable; "Other," when present, always sorts last. Rows with a blank label or a non-positive value are skipped outright, since 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. It carries 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 and never gated behind a series count. 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 skips the image. It renders just its title and card chrome, with a plain "Add at least one row of data to render this chart" notice instead.

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