Sparkline

Ready

Tiny inline charts for tables, cards, and KPI displays. Perfect for showing trends at a glance.

KPI Cards

Sparklines integrated with key performance indicators

Monthly Revenue
$9,100+7%
New Users
350+9%
Conversion Rate
4.3%+72%
Page Views
2,800+133%

Variants

Line and area visualization types

Line (Default)

Area

Colors

Different color options for various contexts

Teal (Success)

Indigo (Primary)

Rose (Error)

Amber (Warning)

End Dot Indicator

Optional dot to highlight the current value

Without End Dot

With End Dot

Features

Key capabilities of the sparkline component

Automatic Normalization

Data is automatically normalized to fit the available height, regardless of value range.

Responsive Sizing

Set custom width and height to fit any container or layout requirement.

SVG Based

Pure SVG rendering for crisp visuals at any resolution and screen density.

Smooth Curves

Uses smooth line interpolation for visually appealing trend visualization.

Usage

How to use the Sparkline component

import { Sparkline } from '@/components/ui/sparkline'

// Basic sparkline
<Sparkline
  data={[10, 20, 15, 30, 25, 40]}
  color="rgb(99, 102, 241)"
  width={200}
  height={48}
/>

// With area fill
<Sparkline
  data={[10, 20, 15, 30, 25, 40]}
  color="rgb(20, 184, 166)"
  width={200}
  height={48}
  showArea
  areaOpacity={0.2}
/>

// With end dot indicator
<Sparkline
  data={[10, 20, 15, 30, 25, 40]}
  color="rgb(99, 102, 241)"
  width={200}
  height={48}
  showEndDot
/>

// In a KPI card
<div className="p-6 border rounded-xl">
  <div className="text-xs text-slate-500 dark:text-slate-400">Revenue</div>
  <div className="text-2xl font-bold">$9,100</div>
  <Sparkline
    data={revenueData}
    color="rgb(20, 184, 166)"
    width={200}
    height={48}
  />
</div>

API Reference

Props

data-number[] - Array of numeric values to visualize (required)
color-string - Line/area color (default: "rgb(99, 102, 241)")
width-number - Chart width in pixels (default: 100)
height-number - Chart height in pixels (default: 32)
showArea-boolean - Show filled area under line (default: false)
areaOpacity-number - Opacity of area fill 0-1 (default: 0.1)
showEndDot-boolean - Show dot at end of line (default: false)
strokeWidth-number - Line stroke width (default: 2)

Features

  • Line and area visualization types
  • Automatic data normalization
  • Optional end dot indicator
  • Customizable colors and opacity
  • SVG-based for crisp rendering
  • Smooth curve interpolation