mailinapp
Documentation menu

Scatter / bubble chart block

X/Y points for showing the relationship between two numeric measures — with an optional third dimension (marker size) for a bubble-chart variant.

How it works

The chart renders as a single server-generated PNG (no client-side chart library, no JavaScript) with an always-visible HTML data table beneath it listing every point the image plots. Unlike the bar/line chart's shared-category table or the pie chart's percent-of-total table, a scatter's fallback shape is its own: neither a category axis nor a share-of-a-total applies to a set of independent points, so the table is simply one row per point — Series, X, Y, and (bubble mode only) Size — with a legend above it keyed by series showing each series' swatch and point count, since "how many points" is the one summary number a series naturally has.

Rows are authored with an optional Series name, an X value, a Y value, and an optional Size value (only meaningful in bubble mode). Series identity comes entirely from whatever you type into the Series column — rows sharing the same series name are grouped and colored together, in first-seen order. Leave Series blank on every row and every point shares one implicit series, named after the block's own title (or "Series 1" if the block has no title); type different series names and the same row-list produces a genuinely multi-colored scatter with no separate "series count" setting anywhere — the row data itself is the only source of truth for how many series exist. A row missing either X or Y is skipped rather than plotted at (0, 0), since a blank cell isn't the same as an authored zero.

The Bubble chart toggle turns on the Size column: each point's marker radius scales with its Size value instead of being a fixed dot. Turning bubble mode off doesn't delete anything typed into the Size column — it's just ignored until the toggle is back on, and the data table's Size column only appears at all while bubble mode is active, so a plain scatter's table never shows a column of nothing.

The chart caps at 120 points total across all series combined (an authored row past that cap is dropped, in authored order — a scatter plot has no natural "Other" bucket to fold overflow into the way a pie chart does) and 8 series, matching the categorical color palette's own length.

This block is authored-rows only — it has no data-source-binding or campaign-response-binding mode. See Binding charts to real data for which four chart types do support binding.

Configurable fields:

  • Chart title — shown above the image.
  • Bubble chart (Size column drives marker size) toggle.
  • Data — the row-list (Series + X + Y + Size).
  • Background color, padding, border, border radius on the card.
  • Independent color/font-size pairs for the title and the legend/table text.

Examples

Subject

Signups vs. activation, by plan

A weekly ops digest could plot response time (X) against ticket volume (Y) per support agent, one point per agent with no series grouping — a quick visual read on who's handling more volume without a slowdown. A product-usage report might group points into 2-3 series by plan tier (Free/Pro/Business), each a different color, plotting engagement score against account age to see whether the relationship differs by tier. A sales report can use the bubble variant to plot deal size (X) against days-to-close (Y), with the Size column set to number of stakeholders involved — three numeric dimensions in one chart without a fourth axis, which this block family never adds.

What the static fallback looks like

<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Response time vs. ticket volume</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="320"
       alt="Scatter chart: Agent A (1 point), Agent B (1 point), Agent C (1 point)"
       style="display:block;max-width:100%;height:auto;margin:8px 0" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Series</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">X</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Y</th>
    </tr>
    <tr>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Agent A</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">4.2</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">38</td>
    </tr>
  </table>
</div>

A plain (non-bubble) scatter's table has no Size column at all; it only appears once the Bubble chart toggle is on.

Related