Sparkline
Tiny responsive SVG line/area chart with gradient fill, last-point dot and up/down trend colors.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
SparklineProps
Also accepts all props of Omit<React.ComponentProps<"div">, "children">
| Prop | Type | Default | Description |
|---|---|---|---|
| data* required | number[] | — | — |
| trend | "auto" | "up" | "down" | "primary" | "auto" | "auto" colours by first-vs-last value; "primary" uses the theme primary colour |
| area | boolean | true | Draw the gradient area under the line |
| showDot | boolean | true | Draw a dot on the last point |
| strokeWidth | number | 2 | — |
| label | string | — | Accessible description; defaults to an automatic summary |
Install
$ npx shadcn@latest add https://chromotion.dev/r/sparkline.json