Sparkline

Compact inline chart for embedding trend data inside cards, tables, and stat displays.

Import

ts 
import Sparkline from '$lib/components/Sparkline.svelte';

Usage

svelte 
<script lang="ts">
  const data = [42, 55, 48, 72, 61, 85, 78, 93, 88, 104];
</script>

<Sparkline {data} />

In Stats Cards

Combine sparklines with metric values for compact KPI cards.

Revenue $12,450 +18.2%
Active Users 2,150 +12.5%
Bounce Rate 42% -8.1%
Avg Session 4.8 min +9.4%
svelte 
<div class="stat-card">
  <div class="stat-info">
    <span class="stat-label">Revenue</span>
    <span class="stat-value">$12,450</span>
    <span class="stat-delta positive">+18.2%</span>
  </div>
  <Sparkline data={revenueData} width={80} height={36} area />
</div>

With Min / Max & Value

Enable minmax and value to annotate the chart with data extremes and the latest reading.

104
215
svelte 
<Sparkline data={data} minmax value />

Custom Colors

Use the color prop to set any stroke / fill color.

svelte 
<Sparkline data={data} color="#22c55e" area />
<Sparkline data={data} color="#f43f5e" area />
<Sparkline data={data} color="#a855f7" area />

API Reference

PropTypeDefaultDescription
data number[]—Array of numeric values to plot.
width number80SVG width in pixels.
height number32SVG height in pixels.
color string—Stroke and fill color. Defaults to the accent CSS variable.
area booleantrueFill the area beneath the line with a gradient.
value booleanfalseShow the last data value as text next to the chart.
minmax booleanfalseAnnotate the minimum and maximum data points.
class string—Extra CSS classes applied to the root element.