# Sparkline A word-sized line for the margin of a table or beside a readout. It is an SVG that takes the size of the type around it and the ink of the place it sits in, so on a panel it is ink and on display glass it is the display’s light. The last value is marked with a dot seated in a faint ring, and a lamp lights the dot when the reading matters. The trend and the last value are said in words on the image’s label, so the line is a second sign and never the only one. Kit part · Free · https://tactileui.dev/parts/sparkline - Element: `Bookings ``` ### Falling ```html Errors ``` ### Steady ```html Load ``` ### Flat · no range at all ```html Queue ``` ### One reading ```html First reading ``` ### Lit dot · green, amber, red ```html

``` ### Sizes · --sm and --lg ```html

``` ### On display glass · the display’s light ```html

p9576 ms

``` ### In a table row ```html

Service	Last 8 hours	p95
Berth bookings		76 ms
Tide tables		38 ms
Pilot dispatch		50 ms

``` ## Every state - Rising - Falling - Steady - Lit red Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real. ## API | Name | Kind | Values | What it does | | - | - | - | - | | svg.tui-sparkline[role="img"][aria-label] | element | named | The line. It is an image, so give it a name that says the trend and the last value, as sparklineSVG() does. | | viewBox | attribute | "-4 -4 88 32" | The 80 by 24 box with a margin of 4 for the dot and the stroke. The size is the type’s: 5.5em wide. | | .area · .line · .seat · .last | class | on the paths and circles | The shade under the line, the line, the faint ring and the dot at the last value. | | [data-lamp] | attribute | green · amber · red · blue | Lights the dot in a lamp colour. Without it the dot is ink. The words on the label still say the news. | | --sm · --lg | modifier | tui-sparkline--sm · --lg | Smaller beside body text in a dense table; larger beside a readout. | | sparklineSVG(values, options) | function | pure | The whole SVG. Options: noun, unit, period, lamp, area, label (your own words instead of the ones it writes), class. | | sparklineWords(values, options) | function | pure | The sentence: “p95 latency: rising over 8 readings, last 76 ms”. | | sparklineTrend(values) · sparklinePoints(values) | function | pure | Rising, falling, steady (within a tenth of the range) or flat; and the points in the box. | ## Markup ```html …svg…76 ms ``` ```js import { sparklineSVG } from '/kit/kit.mjs'; cell.innerHTML = sparklineSVG([41, 44, 43, 52, 58, 61, 70, 76], { noun: 'p95 latency', // what is measured, said first unit: 'ms', // printed after the last value lamp: 'amber', // optional: lights the dot }); // aria-label: "p95 latency: rising over 8 readings, last 76 ms" ``` The demo on the page: ```html

Services · Northwind

Service	Last 8 hours	p95
Berth bookings		76 ms
Tide tables		38 ms
Pilot dispatch		50 ms

``` ## Usage notes Press Add a reading: the line takes in a new value, the dot moves to it and the label, which a screen reader reads, changes with it. The lamp on the first row is lit amber because the reading is high; the words in the last column say the same thing. ## Accessibility - It is `role="img"` with an `aria-label` that says the trend and the last value in words: “p95 latency: rising over 8 readings, last 76 ms”. A screen reader user gets the news the picture carries. - The picture is never the only sign. If the reading matters, say it in the cell beside the line (the figure, or a status with a lamp and a word), as the demo does. - The line, the dot and the ring are 3:1 or better against the panel and against glass in every finish. A lit dot is a lamp colour with the figure beside it, never a colour on its own. - In forced colours the line is the text colour and the dot is the highlight colour. Nothing moves, so reduced motion changes nothing. - It is small enough to sit in a table cell and never makes the page scroll sideways at 390px. ## How it’s built Plain SVG, drawn by one short function that scales the readings into an 80 by 24 box and writes a path, a shade, a ring and a dot. The size is in `em`, so it grows with the type it is set beside, and the ink is `--tui-ink`, so on display glass it is the display’s light without a rule of its own. There is no script to load: the markup is the part. ## Rules Put the shape of the last few readings in the margin of a table, with the last one marked and the news said in words. The full rules are in `sparkline.rules.md` in the brain, which ships with the Kit. ## Related parts - [Plot](https://tactileui.dev/parts/plot): Line charts drawn as light on glass, or as ink on a panel: gridlines faint, two traces at most, a red line for now. - [Readout](https://tactileui.dev/parts/readout): A printed label over a value: key figures, with the unit small and the change in words. - [Table](https://tactileui.dev/parts/table): Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.