Sparkline

Sparkline

A trend in 96×28 px. Pure SVG, no peer dependencies. Use it to garnish a stat, a row, or a header — switch to <Chart> when you need axes, legends, or interactivity.

Examples

<Sparkline data={[3, 5, 4, 6, 7, 9, 8, 10]} />
<Sparkline data={[10, 9, 8, 6, 5, 4, 3]} variant="area" />
<Sparkline data={[3, 6, 2, 7, 5, 8]} variant="bar" tone="brand" />

Inside StatCard

<StatCard label="Active sessions" value="1,284" delta="+4.2%">
  <Sparkline data={trend} variant="area" tone="auto" width={140} height={36} />
</StatCard>

Custom color

tone accepts any CSS color string in addition to helixui scale refs:

<Sparkline data={[1, 2, 1.5, 2.4, 2.8]} tone="oklch(0.66 0.16 200)" />

Install: @helixui/core

import { Sparkline } from '@helixui/core'

status: stable · since: 0.7.0

Tags: mini-chart, inline, svg, trend

Anatomy

▁▂▃▅▆▇█▇▆▅▃▂▁    ← inline tiny chart

Layout

• display — inline-block
• width — content
• height — content
• intrinsicSize — ~80×24px (tunable)
• stackable — true
• fullBleed — false

Visual

A pure-SVG mini line/area chart with no axes or labels. Renders quickly inline next to a number. Tone (success/danger) tints the line per direction.

Props

Name	Type	Default	Description
data	number[]	—	Series of y-values. Indexes are the x positions.
variant	'line' | 'area' | 'bar'	line	Render mode.
tone	'brand' | 'success' | 'warning' | 'danger' | 'neutral' | 'auto' | string	auto	Color. 'auto' picks success for upward, danger for downward, neutral for flat. Any CSS color is accepted.
strokeWidth	number	1.5	Stroke width for line / area.
width	number	96	Render width in px.
height	number	28	Render height in px.
showLast	boolean	true	Dot at the last point. Defaults true for line/area, false for bar.
min	number	auto	Force min y. Defaults auto-fit with 10% pad.
max	number	auto	Force max y. Defaults auto-fit with 10% pad.
smooth	boolean	true	Catmull-Rom smoothed curve for line/area.
ariaLabel	string	—	When set, the SVG gains role='img' and is announced.

Tokens used

color.bg.action.brand.default, color.bg.action.success.default, color.bg.action.warning.default, color.bg.action.danger.default, color.text.muted, radius.sm

Accessibility

Notes

• Decorative by default — pass ariaLabel to surface a description.
• Renders deterministically without animation; safe under prefers-reduced-motion.

Composes with

Component	Relation	Note
StatCard	child	Shown as the trend visualization in a StatCard.
List	child	Per-row trend in a list.
Chart	alternative	Use Chart for full-size data viz.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

KPI trend line

“tiny green sparkline for revenue”

<Sparkline data={[1, 2, 3, 5, 4, 6, 8]} tone="success" />

Related

• Chart
• StatCard