Data

Sparkline

semantic HTML

Small trend visualization for KPI cards and dense dashboards.

stablefreeSince 0.1.5

Live example

Weekly signups: 153

<div data-standard-component="sparkline" label="Weekly signups" height="8rem" data='{"labels":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],"values":[12,18,15,24,21,29,34]}'><p>Weekly signups: 153</p></div>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.1.5`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

ECharts SVG visualization with an accessible SSR data-table fallback.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->