A dependency-free interactive line chart drawn with a single SVG path. The line and fill live in a fixed 640×220 viewBox and scale to the container; the cursor, dot, and tooltip are HTML overlays positioned by percentage, so they track the data while staying a constant on-screen size. Hovering (or dragging on touch) snaps to the nearest data point, and the Y axis auto-scales to the data range.

Installation

{
  "registries": {
    "@ikui": "https://ik-ui.pages.dev/r/{name}.json"
  }
}

pnpm dlx shadcn@latest add @ikui/spark-chart

Usage

import { SparkChart } from "@/components/spark-chart";

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

<SparkChart data={data} />

Examples

Reveal effect

Color the line only up to the cursor — grey before it, the series color after — by setting reveal.

Custom tooltip format

formatValue receives the value and its index, so the tooltip can render currency, units, or any custom node.

Custom color

Pass any CSS color to color; the line, dot, and tooltip swatch follow it.

Without animation

Set animated={false} to snap the cursor, dot, and tooltip instantly instead of easing between points.

Props