✨ react-sparkline-chart

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