Smooth monotone line over a gradient area with a hover crosshair, dot and tooltip, and a draw-in animation.
npx shadcn@latest add https://hyperblur.dev/r/area-chart.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/area-chart.tsx.
import { AreaChart } from "@/components/hyperblur/area-chart"
<AreaChart height={220} data={[{ label: "Jan", value: 18200 }, { label: "Feb", value: 21400 }, { label: "Mar", value: 26100 }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| data | { label: string; value: number }[] | required | Points in order. Labels appear on the x axis. |
| color | string | "#2f7bff" | Line and gradient color. |
| height | number | 220 | Chart height in pixels. Width fills the parent. |
| smooth | boolean | true | Use a monotone curve instead of straight segments. |
| showDots | boolean | false | Draw a dot on every data point. |
| valueFormatter | (n: number) => string | Formats axis ticks and tooltip values. Defaults to Intl compact notation. | |
| locale | string | "en-US" | Locale for the default number formatting. |
| animate | boolean | true | Draw the line in on mount. |