✨ react-sparkline-chart

Live Demo

Beautiful sparkline charts with smooth curves and gradient fills. Zero dependencies beyond React.

Features

• Smooth Catmull-Rom cubic Bezier curves
• Vertical gradient fill that fades to transparent
• Draw animation with animated prop
• Fully responsive — uses SVG viewBox scaling
• Non-scaling stroke width for consistent line thickness
• Works with React 17, 18, and 19
• Tree-shakeable ESM

Install

npm install react-sparkline-chart

Quick Start

import { Sparkline } from 'react-sparkline-chart';

function App() {
  return <Sparkline data={[5, 10, 5, 20, 8, 15]} />;
}

Examples

Custom Color

<Sparkline data={[1, 4, 2, 6, 3]} color="#10b981" />

No Fill

<Sparkline data={[1, 4, 2, 6, 3]} filled={false} />

Straight Lines

<Sparkline data={[1, 4, 2, 6, 3]} curved={false} />

Animated

<Sparkline data={[1, 4, 2, 6, 3]} animated />

Fixed Size

<Sparkline data={[1, 4, 2, 6, 3]} width={200} height={50} />

Title + Change Badge

<Sparkline data={[5, 10, 5, 20, 8, 15, 12, 18]} title="Revenue" showChange />

Props

Prop	Type	Default	Description
data	number[]	required	Array of numeric values to plot
color	string	"#3b82f6"	Stroke and fill color
width	number | string	"100%"	SVG width
height	number | string	"100%"	SVG height
strokeWidth	number	2	Stroke width in px (non-scaling)
curved	boolean	true	Use smooth cubic Bezier curves
filled	boolean	true	Show gradient fill beneath the line
fillOpacity	number	0.4	Peak opacity of the gradient fill
animated	boolean	false	Animate the line drawing on mount
title	string	—	Label displayed above the sparkline
titleSize	number	14	Title font size in px
titleColor	string	—	Title color (defaults to 50% opacity inherit)
showChange	boolean	false	Show percentage change badge above the sparkline
className	string	—	CSS class on the <svg>
style	CSSProperties	—	Inline styles on the <svg>

How It Works

The component renders a pure SVG with a fixed 300x100 viewBox and preserveAspectRatio="none" so it stretches to fill its container. Data values are normalized to SVG coordinates, then rendered as either Catmull-Rom cubic Bezier curves (smooth) or straight polylines. The gradient fill uses an SVG <linearGradient> that fades vertically from the stroke color to transparent. Stroke uses vectorEffect="non-scaling-stroke" so the line thickness stays consistent regardless of container size.

Returns null when data has fewer than 2 points.

License

MIT