cnc-sparkline
A single-line trend chart with a filled area beneath it, no axes and no labels. It fills its container and is meant to sit inline — in a table cell, beside a number.
Quick start
Bind an array of numbers to values and give the element a size. Both widgets draw
in the BROWSER: the geometry comes from getBoundingClientRect() on mount and is
redrawn by a ResizeObserver. Server-side they render an empty
<svg>, so nothing appears until hydration and a chart in a container with no
height stays blank however good the data is.
1,284
sessions this week
<cnc-sparkline
class="h-12 w-48 text-primary-500"
$values="[4, 9, 6, 12, 8, 15, 11, 18, 14, 22]"
></cnc-sparkline>Usage guidance
A sparkline shows SHAPE, not values. It has no axes, no labels and no hover, so it belongs beside the number it describes rather than instead of it — the trend answers "which way, roughly how steadily", and the figure next to it answers "how much".
Set max whenever two sparklines will be seen together. Auto-scaling makes every
series fill its box, so a flat series and a steep one look the same and a reader comparing them
is misled. A shared maximum is what makes a column of them comparable.
Reach for cnc-plot once you need axes, a tooltip, several series or zooming. The
sparkline is deliberately the version with none of that.