Sparkline
Inline SVG sparkline charts with line, area, bar types, color variants, value display, and animated draw.
Line Sparkline
Preview
$1,234
+12.5%
<div class="sparkline">
<svg class="sparkline-svg" width="120" height="32" viewBox="0 0 120 32">
<defs>
<linearGradient id="sparklineGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="var(--color-primary)" stop-opacity="0.3"/>
<stop offset="100%" stop-color="var(--color-primary)" stop-opacity="0"/>
</linearGradient>
</defs>
<path class="sparkline-area" d="M0,24 L20,18 L40,22 L60,10 L80,14 L100,6 L120,8 L120,32 L0,32Z"/>
<polyline class="sparkline-line" points="0,24 20,18 40,22 60,10 80,14 100,6 120,8"/>
<circle class="sparkline-dot-last" cx="120" cy="8" r="3"/>
</svg>
<span class="sparkline-value">$1,234</span>
<span class="sparkline-change sparkline-change-positive">
<svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 2l4 5H2z"/></svg>
+12.5%
</span>
</div> Requires: ux.min.css
<div class="inline-flex items-center gap-2">
<svg class="block overflow-visible" width="120" height="32" viewBox="0 0 120 32">
<polyline fill="none" stroke="var(--color-primary)" stroke-width="2" stroke-linecap="round" points="0,24 20,18 40,22 60,10 80,14 100,6 120,8"/>
<circle fill="var(--color-primary)" stroke="var(--color-base-100)" stroke-width="2" cx="120" cy="8" r="3"/>
</svg>
<span class="text-sm font-semibold">$1,234</span>
<span class="inline-flex items-center gap-0.5 text-xs font-medium text-success">+12.5%</span>
</div> Requires: tw.min.css
// No JavaScript required for styling
// Generate SVG points from data array:
// const points = data.map((v, i) => `${i * step},${height - v * scale}`).join(' '); Bar Sparkline
Preview
847
<div class="sparkline">
<svg class="sparkline-svg" width="100" height="32" viewBox="0 0 100 32">
<rect class="sparkline-bar" x="0" y="12" width="8" height="20"/>
<rect class="sparkline-bar" x="12" y="8" width="8" height="24"/>
<rect class="sparkline-bar" x="24" y="16" width="8" height="16"/>
<rect class="sparkline-bar" x="36" y="4" width="8" height="28"/>
<rect class="sparkline-bar" x="48" y="10" width="8" height="22"/>
<rect class="sparkline-bar sparkline-bar-negative" x="60" y="20" width="8" height="12"/>
<rect class="sparkline-bar" x="72" y="6" width="8" height="26"/>
<rect class="sparkline-bar" x="84" y="2" width="8" height="30"/>
</svg>
<span class="sparkline-value">847</span>
</div> Requires: ux.min.css
<div class="inline-flex items-center gap-2">
<svg width="100" height="32" viewBox="0 0 100 32">
<rect fill="var(--color-primary)" rx="2" x="0" y="12" width="8" height="20"/>
<rect fill="var(--color-primary)" rx="2" x="12" y="8" width="8" height="24"/>
<!-- ... more bars ... -->
<rect fill="var(--color-error)" rx="2" x="60" y="20" width="8" height="12"/>
</svg>
<span class="text-sm font-semibold">847</span>
</div> Requires: tw.min.css
// No JavaScript required for styling Color Variants
Preview
+8.2%
-3.1%
0.0%
<div class="flex flex-col gap-3">
<div class="sparkline color-success">
<svg class="sparkline-svg" width="100" height="24" viewBox="0 0 100 24">
<polyline class="sparkline-line" points="0,20 20,14 40,16 60,8 80,10 100,4"/>
<circle class="sparkline-dot-last" cx="100" cy="4" r="3"/>
</svg>
<span class="sparkline-change sparkline-change-positive">+8.2%</span>
</div>
<div class="sparkline color-error">
<svg class="sparkline-svg" width="100" height="24" viewBox="0 0 100 24">
<polyline class="sparkline-line" points="0,4 20,8 40,6 60,14 80,16 100,20"/>
<circle class="sparkline-dot-last" cx="100" cy="20" r="3"/>
</svg>
<span class="sparkline-change sparkline-change-negative">-3.1%</span>
</div>
<div class="sparkline color-warning">
<svg class="sparkline-svg" width="100" height="24" viewBox="0 0 100 24">
<polyline class="sparkline-line" points="0,12 20,10 40,14 60,8 80,12 100,10"/>
<circle class="sparkline-dot-last" cx="100" cy="10" r="3"/>
</svg>
<span class="sparkline-change sparkline-change-neutral">0.0%</span>
</div>
</div> Requires: ux.min.css
<div class="flex flex-col gap-3">
<div class="inline-flex items-center gap-2">
<svg class="block overflow-visible" width="100" height="24" viewBox="0 0 100 24">
<polyline fill="none" stroke="var(--color-success)" stroke-width="2" stroke-linecap="round" points="0,20 20,14 40,16 60,8 80,10 100,4"/>
<circle fill="var(--color-success)" stroke="var(--color-base-100)" stroke-width="2" cx="100" cy="4" r="3"/>
</svg>
<span class="inline-flex items-center gap-0.5 text-xs font-medium text-success">+8.2%</span>
</div>
<div class="inline-flex items-center gap-2">
<svg class="block overflow-visible" width="100" height="24" viewBox="0 0 100 24">
<polyline fill="none" stroke="var(--color-error)" stroke-width="2" stroke-linecap="round" points="0,4 20,8 40,6 60,14 80,16 100,20"/>
<circle fill="var(--color-error)" stroke="var(--color-base-100)" stroke-width="2" cx="100" cy="20" r="3"/>
</svg>
<span class="inline-flex items-center gap-0.5 text-xs font-medium text-error">-3.1%</span>
</div>
<div class="inline-flex items-center gap-2">
<svg class="block overflow-visible" width="100" height="24" viewBox="0 0 100 24">
<polyline fill="none" stroke="var(--color-warning)" stroke-width="2" stroke-linecap="round" points="0,12 20,10 40,14 60,8 80,12 100,10"/>
<circle fill="var(--color-warning)" stroke="var(--color-base-100)" stroke-width="2" cx="100" cy="10" r="3"/>
</svg>
<span class="inline-flex items-center gap-0.5 text-xs font-medium text-base-content/50">0.0%</span>
</div>
</div> Requires: tw.min.css
// No JavaScript required With Reference Line
Preview
92.4
<div class="sparkline">
<svg class="sparkline-svg" width="120" height="32" viewBox="0 0 120 32">
<line class="sparkline-reference" x1="0" y1="16" x2="120" y2="16"/>
<polyline class="sparkline-line" points="0,22 20,18 40,12 60,20 80,8 100,14 120,6"/>
<circle class="sparkline-dot-last" cx="120" cy="6" r="3"/>
</svg>
<span class="sparkline-value">92.4</span>
</div> Requires: ux.min.css
<div class="inline-flex items-center gap-2">
<svg class="block overflow-visible" width="120" height="32" viewBox="0 0 120 32">
<line x1="0" y1="16" x2="120" y2="16" stroke="var(--color-base-300)" stroke-width="1" stroke-dasharray="4 3"/>
<polyline fill="none" stroke="var(--color-primary)" stroke-width="2" stroke-linecap="round" points="0,22 20,18 40,12 60,20 80,8 100,14 120,6"/>
<circle fill="var(--color-primary)" stroke="var(--color-base-100)" stroke-width="2" cx="120" cy="6" r="3"/>
</svg>
<span class="text-sm font-semibold">92.4</span>
</div> Requires: tw.min.css
// No JavaScript required Animated Draw
Preview
$2,450
+24.3%
<div class="sparkline sparkline-animated">
<svg class="sparkline-svg" width="150" height="32" viewBox="0 0 150 32">
<polyline class="sparkline-line" points="0,28 15,24 30,26 45,18 60,20 75,12 90,14 105,8 120,10 135,4 150,6"/>
</svg>
<span class="sparkline-value">$2,450</span>
<span class="sparkline-change sparkline-change-positive">+24.3%</span>
</div> Requires: ux.min.css
<div class="inline-flex items-center gap-2">
<svg class="block overflow-visible" width="150" height="32" viewBox="0 0 150 32">
<polyline fill="none" stroke="var(--color-primary)" stroke-width="2" stroke-linecap="round" points="0,28 15,24 30,26 45,18 60,20 75,12 90,14 105,8 120,10 135,4 150,6" style="stroke-dasharray: 300; stroke-dashoffset: 300; animation: sparkline-draw 1.5s ease-out forwards;"/>
</svg>
<span class="text-sm font-semibold">$2,450</span>
<span class="inline-flex items-center gap-0.5 text-xs font-medium text-success">+24.3%</span>
</div>
<!-- Note: sparkline-draw animation is defined in sparkline.css. Use semantic .sparkline-animated for this effect. --> Requires: tw.min.css
// No JavaScript required — CSS animation handles the draw effect