Sparkline
The `<pura-sparkline>` renders a compact SVG with a polyline scaled to fit its box, with optional area fill and a dot on the last value. Use it to show time-series trends in little space (KPIs, table rows, dashboards). It is agent-native: in addition to `role="img"` with an auto-generated `aria-label` (count, min, max, last), each instance exposes stable `data-pura-sparkline-count/values/min/max/last` attributes and registers itself in `window.__puraSparklines` (keyed by `data-pura-id`), letting an agent enumerate and read the data of every chart on the page without parsing the SVG.
Preview
<div style="display:flex;align-items:center;gap:12px;font-family:system-ui">
<span>Revenue (7 days)</span>
<pura-sparkline values="4,7,5,9,6,11,13" width="120" height="32" color="#16a34a" fill dot></pura-sparkline>
<strong>$13k</strong>
</div>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
values | string | "" | Comma-separated numbers, e.g. "3,7,4,9,5,8". Spaces are tolerated and non-numeric entries are discarded; empty/invalid draws nothing. |
width | number | 80 | Chart width in px. Accepts a plain number. |
height | number | 24 | Chart height in px. Accepts a plain number. |
color | string | var(--pura-fg) | Color of the line, dot, and fill. Any CSS color. |
fill | boolean | false | Draws a translucent area under the line (only with more than one value). |
dot | boolean | false | Draws a dot on the last value of the series. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/sparkline.js"></script>import "./pura/lib/sparkline.js";