Installation

pnpm dlx shadcn@latest add @spell/chart

Examples

Reveal effect

Pass reveal to gray-out the line until the cursor passes over it — useful for decorative/marketing use, not for serious data viz.

Custom tooltip format

formatValue receives the value and its index, so you can pair the data with labels.

Custom color

Pass any hex string via color. The line, dot, and gradient fill all derive from it.

Without animation

Set animated={false} to make the cursor, dot, and tooltip jump to the active point instantly with no transition.

Usage

import { Chart } from "@/components/chart";

const data = [12, 18, 15, 24, 22, 30, 28, 35, 42, 38, 48, 56];

<Chart data={data} />

The chart auto-scales the Y axis to the data range. Hover snaps to the nearest data point — like recharts.

Props