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. A legend above it, keyed by series, shows 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 instead, 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. 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, and 8 series, matching the categorical color palette's own length. An authored row past the point cap is dropped, in authored order — a scatter plot has no natural "Other" bucket to fold overflow into the way a pie chart does.

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. That's 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