A responsive line graph that draws its path when it scrolls into view, with gradient area fill, gridlines, a pulsing end point and a crosshair tooltip you can drive with the pointer or the arrow keys.
npx shadcn@latest add https://hyperblur.dev/r/chart-line-graph.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/chart-line-graph.tsx.
import { ChartLineGraph } from "@/components/hyperblur/chart-line-graph"
<ChartLineGraph data={[{ label: "Mon", value: 12 }, { label: "Tue", value: 18 }, { label: "Wed", value: 15 }]} format={(v) => `${v} orders`} />| Prop | Type | Default | Description |
|---|---|---|---|
| data | { label: string; value: number }[] | 12 weeks of sample data | Points to plot, left to right. Labels appear on the x axis and in the tooltip. |
| format | (value: number) => string | v => v.toLocaleString("en-US") | Formats values in the tooltip and the slider text. |
| axisFormat | (value: number) => string | compact, for example 1.5k | Formats the y axis labels. |
| height | number | 240 | Plot height in pixels. The width follows the container. |
| accent | string | "#2f7bff" | Line, area, crosshair and end point color. |
| curve | boolean | true | Smooth the line with a monotone curve. When false the points are joined by straight segments. |
| sweep | boolean | false | Move the crosshair along the data on its own until the pointer or keyboard takes over. Meant for previews. |
| aria-label | string | "Line graph" | Accessible name of the focusable plot. Use the left and right arrow keys, Home and End to move between points, Escape to clear. |