Installation
pnpm dlx shadcn@latest add @spell/chartExamples
Reveal effect
Custom tooltip format
Custom color
Without animation
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.
Props
| Prop | Type | Default |
|---|---|---|
data | number[] | - |
labels | string[] | - |
name | string | - |
color | string | "#0090FD" |
width | number | 640 |
formatValue | (value: number, index: number) => React.ReactNode | v => v.toLocaleString() |
defaultIndex | number | data.length - 1 |
showXAxis | boolean | true |
tickCount | number | 6 |
reveal | boolean | false |
showFill | boolean | true |
showDot | boolean | true |
animated | boolean | true |
className | string | - |