Sparkline

Inline trend lines and trend indicators, drawn from table cells.

A sparkline is a run of numbers drawn small enough to sit beside its own label — the shape of a metric over time, rather than a chart to read values off. Write the series after a label, separated by commas or spaces:

::: sparkline
Weekly signups: 12, 19, 15, 27, 24, 31, 38
:::

Columns are table cells with a background color — no images, no SVG, no JavaScript — so the trend survives clients that strip all three, scales with the content width, and adapts in dark mode.

Beside the sparkline the block prints its trend indicator: the latest value and how far the series moved, with an arrow and a color. Text placed on a line below the series renders underneath the sparkline.

Trend indicators

::: trend is the same block without its columns — the readout on its own, for a row of KPIs where the shape would be noise:

::: trend
Signups: 12, 19, 15, 27, 24, 31, 38
:::

The change is measured across the whole series, first point to last, so the number and the shape describe the same thing. What happened in between shows in the sparkline, not in the delta.

For a metric where falling is the win — churn, bounce rate, cost per lead — good=down flips the reading, so a drop is drawn as a success rather than an alarm:

::: trend good=down
Churn: 4.1%, 3.8%, 3.5%, 3.2%
:::

good=neutral keeps the arrow and drops the judgement, for numbers that are neither good nor bad going up — headcount, tickets opened, days elapsed.

A percentage change needs a positive starting point to mean anything, so a series that starts at zero or below reports the absolute move instead: 0, 5, 12 reads ▲ 12, not an infinite percentage.

Scale

Columns are measured from zero, so a steady metric looks steady. That is the honest default, but it flattens a series that lives in a narrow band far from zero — four quarters of revenue between 12,000 and 15,200 all draw as nearly full columns. min moves the floor to open the range up:

::: sparkline min=10,000
Revenue: 12,000 13,500 12,900 15,200
:::

max pins the ceiling the same way, which is what keeps two sparklines in one email comparable rather than each filling its own height.

A comma is read as a thousands separator only where three digits follow it, so 12,000 13,500 is two points and 12,19,15 is three. Separate points with spaces when you want to be sure.

Size

The plot grows with the series and then stops: columns widen only so far, so a seven-point sparkline stays sparkline-sized rather than stretching a wall of blocks across the whole email, while a long series fills the width. width overrides that, in pixels or as a percentage, and height sets the plot height in pixels:

::: sparkline width=100% height=48
Daily active: 210, 180, 420, 390, 610, 580, 720
:::

Width also decides where the readout goes. A plot that leaves room beside it keeps its number alongside, so the two read as one object; a plot that fills the width has nowhere to put it, so the readout moves up to the label's row and pins to the far edge, the way chart and progress values do. A trend block always uses the pinned layout — it has no plot to sit beside, and pinning keeps a stack of them aligned down the edge.

Colors

color sets the columns and track the groove behind them. There is no groove by default — a sparkline reads as a shape, and filling the space above every column turns it back into a bar chart — so add one only when you want the ceiling shown:

::: sparkline color=#2563eb track=#e4e4e7
Revenue: 12,000 13,500 12,900 15,200
:::

Columns left at the theme color follow the dark palette automatically; a color you set explicitly keeps it in both light and dark mode. The trend indicator takes the theme's success and danger colors, which are the same in both palettes.

Parameters

Plain Text

The text part draws the series with block characters, so the shape survives instead of collapsing to the last number:

Weekly signups
▃▅▄▆▅▇█  38  ▲ 217%

A trend block has no shape to draw, so it comes through as a single line:

Churn  3.2  ▼ 22%

Notes

• A sparkline needs at least two numbers; a block with fewer degrades to a regular text section with a render warning.
• Every point draws at least a 2px stub, so a series that touches zero reads as one continuous shape rather than breaking open.
• At most 60 points are drawn — past that the columns are thinner than a hairline. A longer series keeps its most recent 60, and the trend is measured on the window that was drawn.
• Rounded column tops come from border-radius, which Outlook ignores; columns are square there. Set border-radius=0 to square them everywhere.
• The label splits on the last colon, so a label may itself contain one.
• In right-to-left documents the label, the readout, and the direction of the series all mirror.
• For several values compared on one scale, reach for chart; for one value against a known target, progress.