Line / area chart block

A trend over an ordered sequence — weeks, months, funnel stages over time — drawn as a stroked line or, with the filled toggle on, a shaded area beneath it. Up to 3 series.

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 same non-negotiable pairing every chart in this family commits to, so the trend is still readable in text-only clients, image-blocked inboxes, and with images off.

The authoring shape is identical to the bar chart's: one Category column (here usually a time period — "Week 1," "Mon," "Q1" — though it can be any ordered label) plus up to three numeric series columns. Series 1 is always active, borrowing the chart's own title as its name when you don't set one; series 2 and 3 only activate once given a name, so a half-filled value column with no series label never surfaces as an unnamed ghost line. Each active series draws as its own stroked line with its own color; a legend only appears once 2 or more series are active.

The Filled toggle turns the line chart into an area chart — the region beneath each line is shaded at low opacity down to the axis. It's a toggle rather than a separate block because the underlying data model, axes, and category shape are exactly the same either way; only how the line is rendered changes. With multiple series filled, overlapping regions stay visually distinguishable because each keeps its own series color at low opacity — this block still refuses dual axes, so multiple filled series always share one value scale.

Point markers — small filled circles at each authored data value — draw on top of the line for every category, up to around 20 categories. Past that point the markers thin out and stop drawing individually, since at high density they'd overlap into a solid smear along the line rather than reading as distinct points; the stroked line itself, the shared value axis, and the data table all keep carrying the trend past that threshold, so nothing about reading the chart actually depends on the markers.

Configurable fields:

• Chart title — shown above the image; also the fallback series name when only Series 1 is active.
• Filled (area-chart variant) toggle.
• Data — the row-list (Category + Series 1/2/3), the same column set the bar chart uses.
• 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 line chart can also bind its rows to a connected data source instead of typing them — a Group by field (each distinct value becomes a point along the category axis) plus up to 3 series fields, each with its own aggregate. An optional filter can reference recipient merge tags for a per-recipient view of the same trend. See Binding charts to real data for the full mechanics, including the campaign-response-results mode.

Examples

A weekly ops digest can chart open-ticket count over the last 8 weeks as a single line, with point markers still visible at that count, giving an immediate read on whether the trend is improving. A sales recap might use a filled area chart for cumulative revenue across a quarter, one series per product line (up to 3), so the reader sees both the individual trend and, visually, the combined shading build up week over week. A recurring performance report can bind directly to a data source scoped per recipient via a merge-tag filter — "your account's usage this month" — so one project's line chart shows a different trend to every recipient of the same send.

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">Open tickets</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
       alt="Line chart: Week 1 (Open tickets 42); Week 2 (Open tickets 35); Week 3 (Open tickets 28)"
       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">Open tickets</th>
    </tr>
    <tr>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Week 1</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">42</td>
    </tr>
  </table>
</div>

The alt text summarizes every category/series value pair so the trend is legible even without loading the image; the table below it is the same numbers as plain HTML.

Related

• Analytics & chart blocks
• Binding charts to real data
• Bar chart block