Sparkline 1.2.0

Das <velin-sparkline> Web Component rendert ein kleines Inline-SVG-Trenddiagramm aus einem CSV-Wertearray, animiert das Zeichnen des Strokes und stellt eine Live- update() API für tick-getriebene Dashboards bereit. English: Sparkline

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Foundation wo vermerkt.

Wann verwenden

Kompakte Inline-Trendlinien mit <velin-sparkline> neben einer Kennzahl.
Wenn ein kleiner Pfad genügt und du keine vollständige Charting-Bibliothek brauchst.

Wann nicht

Detailed analysis charts — use a dedicated charting solution or data table.
Single KPI numbers without trend — use Statistik / Counter.

Basis

<velin-sparkline
  values="3,5,4,7,6,8,7,11,9,12"
  area glow
  animate="draw"
  label="Weekly users"></velin-sparkline>

Attribute

Attribut	Typ	Hinweise
`values`	CSV-/JSON-Array	Erforderlich; numerische Datenpunkte
`width` / `height`	number	SVG-viewBox; Standards `320 × 96`
`min` / `max`	number	Clamp-Bereich; Standard aus Werten abgeleitet
`area`	boolean	Fügt eine Verlauf-Flächenfüllung unter der Linie hinzu
`glow`	boolean	Loops `velin-sparkline-glow` on the SVG
`animate`	`draw` \| `none`	Standard `draw` — once on connect
`label`	string	Sets `role="img"` + `aria-label`

JavaScript-API

const spark = document.querySelector('velin-sparkline');
spark.update([3, 5, 4, 7, 9, 12, 14]);  // morphs path + triggers value-bump
spark.values; // current values getter
spark.values = [1, 2, 3]; // setter (reflects to attribute)

Live-Tick

setInterval(() => {
  const last = spark.values.at(-1);
  const next = last + (Math.random() - 0.5) * 4;
  spark.update([...spark.values.slice(1), next]);
}, 4000);

Stelle ein label Attribut bereit, damit Screenreader den Zweck des Charts ansagen.
Under prefers-reduced-motion: reduce the draw-in is skipped and the path is shown fully drawn.
For data tables behind the chart, use a visually-hidden <table> sibling for full data exploration.