Bar chart block
Vertical or horizontal bars for comparing values across categories — the workhorse chart for "which of these is bigger," up to 3 series wide.
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 directly beneath it repeating every number the image draws. The table isn't a fallback bolted on for broken clients — it's the same numbers as the image, in plain HTML, and it's what makes the chart usable in text-only clients, image-blocked inboxes, and screen readers.
Data is authored as rows: one Category column plus up to three numeric series columns. Series 1 is always active — a single-series bar chart needs no series name of its own, since the block's own title already identifies it. Series 2 and 3 only turn on once you give them a name in Series 2 name / Series 3 name; a half-filled-in value column with no series name is ignored rather than showing up as an unlabeled ghost bar, so partially-filled-in data never leaks into the render. Each active series gets its own color, either author-picked per series or resolved from the project's categorical palette. A legend (colored swatch + label) only appears once there are 2 or more active series — a lone series is already named by the chart's own title, so a one-item legend would be redundant.
Up to around 8 categories, each bar gets a direct value label drawn right on or above it in the image itself, in addition to the data table. Past that threshold the chart drops the per-bar labels in favor of a shared value axis with gridlines — trying to fit a value label on each of a dozen-plus bars stops being legible well before that point, so the axis takes over as the at-a-glance read and the data table becomes the precise source for exact numbers. The chart is capped at 24 categories total; anything authored beyond that is simply not drawn (the data table only ever reflects what was actually plotted).
Horizontal bars flip the category axis to run top-to-bottom instead of left-to-right — pick this when category names are long or numerous, since horizontal labels don't need to be rotated or truncated the way vertical axis labels do.
Configurable fields:
- Chart title — shown above the image; also the fallback series name when only Series 1 is active.
- Horizontal bars toggle.
- Data — the row-list (Category + Series 1/2/3).
- Series 1/2/3 name and Series 1/2/3 color.
- Background color, padding, border, border radius on the card.
- Independent color/font-size pairs for the title and the legend/table text.
A bar chart can also bind its rows to a connected data source instead of authoring them directly — a Group by field (each distinct value becomes a category) plus up to 3 series fields, each with its own aggregate (Sum, Average, Count, or Latest row), mirroring the same up-to-3-series shape as authored rows. An optional filter can reference recipient merge tags, so the same block shows each recipient their own slice of a shared source. See Binding charts to real data for the full mechanics, including the campaign-response-results mode.
Examples
Subject
Q3 revenue vs. cost breakdown
The Dashboard project purpose seeds a bar chart automatically, right below a row of three KPI scorecards — a one-click starting point for a recurring report; see the Dashboard grid preset. A weekly sales digest can chart revenue by region as three or four categories with a single series, or "this week vs. last week" as two series per category for a direct comparison. A post-event report might use horizontal bars for "RSVPs by squad" when there are a dozen team names too long to fit as vertical axis labels. An education-vertical progress digest could chart average quiz score by class section, one bar per section, bound live to a data source so the numbers stay current every time the recurring send goes out.
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">Revenue by region</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
alt="Bar chart: North (Revenue 12,400); South (Revenue 9,800); East (Revenue 14,200)"
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">Category</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Revenue</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">North</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">12,400</td>
</tr>
</table>
</div>
The <img> carries a descriptive alt text summarizing every category/series value, and the table below it repeats the same numbers as plain, always-visible HTML.