cnc-sparkbar
The bar counterpart to cnc-sparkline: fixed-width bars, no axes, no labels. Bars
keep their width whatever the container does, so a narrow box shows FEWER bars rather than
thinner ones — and it drops the oldest.
Quick start
Bind an array of numbers to values and give the element a size. Like its sparkline
sibling it draws in the BROWSER from measured geometry, so it renders empty server-side and
stays blank in a container with no height.
312
builds this month
<cnc-sparkbar
class="h-12 w-48 text-primary-500"
$values="[4, 9, 6, 12, 8, 15, 11, 18, 14, 22]"
></cnc-sparkbar>Usage guidance
Choose bars over a line when the values are DISCRETE and countable — builds per day, errors per hour. A line implies a continuous quantity sampled over time, and reads as a trend; bars read as a tally.
Check that your series actually fits. Bars are a fixed width, so a container narrower than
values.length × (bar-width + padding)
shows only the most recent ones and gives no sign that the rest were dropped. Either size the
box for the data or shrink
bar-width
until it fits.
Set max whenever several sparkbars are read together, for the same reason as the
sparkline: auto-scaling makes every series fill its box, so unequal series look equal.