Line
Add data-bs-toggle="sparkline" and a comma-separated data-bs-values list.
Area with spot
Use data-bs-fill="auto" for a tinted area and data-bs-spot to mark the last, min or max value.
Bars
Set data-bs-type="bar". Tune the gap and rounding with data-bs-bar-gap and data-bs-bar-radius.
Signed bars
Negative values hang below a zero line in --tblr-sparkline-negative, red by default; the line uses --tblr-sparkline-zero.
Win/loss
Set data-bs-type="tristate": every value is a full bar up, down or a tick on the zero line, whatever its size.
Threshold
Set data-bs-threshold to draw a guide line at a value. Bars below it take the negative color.
Circle
Use data-bs-type="circle" with a single value as a share of data-bs-max, sparkline-square for a round box and data-bs-label="auto" for the percentage in the middle.
Disabled
Add sparkline-disabled to grey out a chart, for a series that is off or data that is stale.
Colors
The chart uses currentColor, so any text-{color} utility themes it.
Fixed range
Set data-bs-min and data-bs-max so several charts share the same scale.
Sizes
Add sparkline-sm or sparkline-lg; for a custom box override --tblr-sparkline-width and --tblr-sparkline-height.
Stroke width
Change --tblr-sparkline-stroke-width and --tblr-sparkline-spot-size in SVG units.
Update from JavaScript
Call update(values) on the instance. It writes data-bs-values back, tweens the chart for data-bs-animation milliseconds and fires updated.bs.sparkline.
In a table
A sparkline sits inline with text, so it works in table cells and stat rows.
| Metric | Value | Trend |
|---|---|---|
| Revenue | $12.4k | |
| Orders | 1,352 | |
| Errors | 31 | |
| CPU usage | 72% |