Sparkline
Compact inline trend chart without visible axis chrome.
Embed a quick trend glyph beside text, inside table cells, or on dashboard stat cards when precise axis labels are not needed.
- KPI cards with a small trend beside the headline number.
- Table cells where a 24–32px sparkline replaces a full chart.
- Dense dashboards that cannot afford axis labels on every metric.
- Pass a numeric
dataslice, or bind aDatasetwithvalue_field. - Set fixed
y_axis.min/y_axis.maxwhen comparing multiple sparklines side by side. - Opt into
show_tooltipandshow_highlightonly when the embed has room for hover UI. - Leave
skip_animationunset to honor reduced-motion preferences. - Wrap the sparkline in a native element with
data-testidfor E2E hooks.
Line sparkline
Minimal line trend from a numeric slice. No axis chrome keeps the glyph compact — the y domain is inferred from data with light padding.
Bar sparkline
Discrete bar sparkline for bucketed counts.
Fixed y-range comparison
Two sparklines normalized to 0–100 for magnitude comparison.
Stat card embed pattern
Sparkline beside a KPI value in a card-sized layout.
Weekly throughput
842
Item tooltip on hover
Opt-in item tooltip for compact trend glyphs (taller height for tooltip visibility).
Highlight fade on hover
Bar sparkline with global fade when hovering individual marks.