build69
build69  /  Components  /  Charts  /  Sparkline

Sparkline

v1.0.4Updated 20 Jul 2026

Tiny SVG line chart for inline trend display. Shipped with StatCard but usable anywhere.

Preview

Live · 19 stories
AscendingOpen ↗
Why this is recommendedchartsparklinetrendsvg+1

Sparkline — ascending.

Recommended for+14
  • Inside StatCard
  • Table cell trend column
  • Header-strip mini charts
Tags+6
chartsparklinetrendsvgascending
Features+4
  • Pure SVG, no dependency
  • Tone colors (positive / negative / neutral)
  • Area-fill variant
  • Last-point dot
  • i18n: numbers/axis values format per LocaleProvider locale
Not recommended for−2
  • Full charts with axes (use a chart library)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Sparkline" })

Usage

import { Sparkline } from '@/components/data-viz/sparkline';

<Sparkline values={[2, 4, 3, 6, 8, 7, 9]} tone="positive" />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
values

Data points

number[]yes
tone

Color tone

'positive' | 'negative' | 'neutral'

Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.

Related