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