Playground
A small inline chart drawn as a stepped pixel line with a soft area underneath. Give it a JSON values array, or use push mode: the starting value is the first point, and every time the value attribute changes, a point is appended. The chart is always sized for length points, so its height is fixed from the start: fewer points spread across the width, and once it's full the line scrolls. Point value at a signal, and the line follows it as the signal ticks, from the client or from the server.
Examples
Push mode
data-on-interval changes a signal every 400 ms. data-attr pushes each new value into the chart.
<div data-signals:_alt="50" data-on-interval__duration.400ms="$_alt = Math.max(0, Math.min(100, $_alt + (Math.random() * 20 - 9)))">
<sb-sparkline data-attr:value="$_alt" data-preserve-attr="value" show-value tone="accent" length="48" style="--sb-sparkline-width: 20rem"></sb-sparkline>
</div>
Static data
<sb-sparkline values="[3,5,4,8,6,9,12,10,14,13,17]" tone="ok" show-value></sb-sparkline>
<sb-sparkline values="[90,82,85,70,72,60,48,52,40,33,21]" tone="danger" show-value unit="%"></sb-sparkline>
<sb-sparkline values="[40,60,40,60,40,60,40,60]" scale="fixed" min="0" max="100" tone="brand"></sb-sparkline>
Live from the server
The server pushes $_tm.alt four times a second. Push mode turns every update into a new point.
<div data-signals="{_tm: {alt: 0}}" data-init="@get('/demo/telemetry')">
<sb-sparkline data-attr:value="$_tm.alt" data-preserve-attr="value" length="80" show-value unit=" km" tone="accent" style="--sb-sparkline-width: 22rem"></sb-sparkline>
</div>
From JavaScript
el.push(n) appends a point, and el.data returns a copy of the buffer.
Accessibility
The canvas is role="img", and its label summarises the data (point count, latest, low and high). Use show-value when the latest number matters.
Installation
Add Datastar with Rocket and the Starbase autoloader once per page, then use the tag. The autoloader imports each component the first time its tag appears, including tags added later by a Datastar morph.
<!-- Once per page: Datastar with Rocket, and the Starbase autoloader.
It loads every <sb-…> component the first time its tag appears. -->
<script type="importmap">
{ "imports": { "datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar-rocket.js" } }
</script>
<script type="module" src="https://rocket.libretto.ch/c/autoloader.js"></script>
<!-- Optional, no flash of undefined elements: class="sb-cloak" on <html>, and -->
<style>.sb-cloak :not(:defined) { visibility: hidden }</style>
<sb-sparkline values="[12,18,15,22,30,26,34,41,38,47,52,49,58,64,61,70]" length="16" tone="ok" show-value unit="%" style="--sb-sparkline-width: 12rem"></sb-sparkline>
<!-- Or skip the autoloader and load just this component: -->
<!-- <script type="module" src="https://rocket.libretto.ch/c/sparkline/sparkline.js"></script> -->API reference
Props
| Attribute | Type | Default | Description |
|---|---|---|---|
values | array | [] | Initial data points, as a JSON array. |
value | number | 0 | Push mode: every change appends a point. |
length | number | 40 | Points kept (older ones scroll off). |
scale | "auto" | "fixed" | "auto" | auto fits the data; fixed uses min and max. |
min | number | 0 | Bottom of the fixed scale. |
max | number | 100 | Top of the fixed scale. |
tone | "brand" | "ok" | "warn" | "danger" | "accent" | "brand" | Line colour (theme token). |
show-value | boolean | false | Show the latest value next to the line. |
unit | string | "" | Unit after the shown value. |
decimals | number | 0 | Decimals of the shown value. |