The problem
A slide says revenue is $1.9M. The reader’s next question is whether that is up or down, and by how much. A full chart answers it, but takes half the slide for one line of context. Leaving the history out makes the reader take the number on trust.
- A full chart is too big for a table cell or a KPI tile, and ten of them crowd out the point.
- An arrow or a percentage gives the direction, but not the shape: steady growth and one lucky quarter look the same.
- A pasted image of a chart doesn’t take the theme’s colors and goes stale the moment the numbers change.
What you want is the shape of the history, the size of a word, right where the number is.
The idea
- A chart with no chrome. No axes, labels or legend. The number sits in the text beside the spark, and the spark shows its shape. Edward Tufte called this a sparkline; Lattice says “spark” because two of the seven types are not lines.
- Data first, then words.
`~{12 14 17 21}`is a line. Add words in any order to change it:bar,lg,c3,end. - Two kinds of data. A series of 2 to 48 numbers draws a trend. A ratio (
`~{72%}`or`~{72/80}`) draws a ring or a bullet. - Widths are fixed per size. Every spark in a column is the same width, so rows can be compared at a glance.
- The deck’s colors.
c1toc12are the same slots charts and pills use, and three looks decide how that one color is spent.
How to use it
Sparks are on in every deck. Write one in inline code, next to the number it explains:
Revenue reached $1.9M `~{0.8 0.9 1.1 1.2 1.4 1.5 1.7 1.9, end}` this quarter.Then add words, in any order:
| Word | Does |
|---|---|
line, area, bar, step, winloss | The type for a series (line by default) |
ring, bullet | The type for a ratio (ring by default) |
sm, md, lg | Size, relative to the text |
fill | Stretches the spark across its line |
c1 … c12 | The color, from the deck’s chart palette |
end, minmax | Dot the latest value, or the low and the high |
zero | Start a line at 0, so a series that barely moved reads as flat |
framed, bare | A tile behind the spark, or ink alone |
pigment, etching, tone | How the color is spent |
square, rounded | The tile’s corners |
To set the frame, look or corners for the whole deck, use the spark: front-matter key. For one slide, use a spark- class:
---
spark: etching rounded
---
<!-- _class: table spark-bare -->In the Studio, type `~ for a menu of starter sparks. After a comma, the menu offers only the words that fit next.
Where else it fits
Anywhere a figure has a past or a target: KPI tiles, a trend column in a quarterly table, an operating review, a sales pipeline by stage, an uptime record (winloss), a quota against plan (bullet), or a sentence in a board memo. A spark is drawn from the numbers in your Markdown, so updating the deck means editing the numbers.
How Lattice uses it
No slide type requires the plugin. The kpi layout sizes a spark to match its status pills, and a fill spark under a KPI headline becomes the tile’s trend line. In mode: sketch, sparks are drawn by hand like the rest of the slide. Every spark carries a spoken label with its numbers (“Trend, 8 points, from 0.8 to 1.9”), so a screen reader hears what the chart shows.
What it doesn’t do
- It isn’t a chart. No axes, labels, legend or tooltips. When the reader needs to read values off the shape, use a chart slide.
- It doesn’t guess. A span with a thousands comma, a unit, or a word that doesn’t fit its type stays as code, and the deck linter says why. A backslash (
`\~{…}`) keeps the text on purpose. - Numbers only. No units, currency signs or dates in the braces. The reader’s number belongs in the text beside the spark.
- At most 48 points. Past that, the data wants a chart.
- Chart captions are the one place to avoid for now: a caption stacks the spark on a row of its own.