Installation
Usage
import SparkChart from "@/components/ruixen/spark-chart";
export default function Revenue() {
return (
<SparkChart
data={[24, 31, 42, 55, 68, 80, 95]}
height={120}
color="hsl(160, 84%, 39%)"
formatValue={(v) => `$${v.toFixed(0)}k`}
onValueChange={(value, index) => console.log(value, index)}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | - | Array of values to plot (required) |
color | string | hsl(217, 91%, 60%) | Accent color for the active path and indicator |
height | number | 160 | Height of the chart in pixels |
formatValue | (value: number) => string | - | Format the scrub label. If omitted, label is hidden |
onValueChange | (value: number, index: number) => void | - | Callback on scrub with interpolated value |
onActiveChange | (active: boolean) => void | - | Callback when scrubbing starts or stops |
className | string | - | Additional CSS classes |