Sparkline
A 44px trend line with no axes, a dot on the current point, a hover value and the same tokens as TimeseriesChart.
const requests = [12, 18, 15, 22, 28, 24, 31, 27, 35, 40, 36, 44];
<Sparkline
ariaLabel="Requests, last 24 hours"
data={requests}
/>Props
color
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/sparkline.jsonThe CLI writes components/ikada/sparkline.tsx and merges the ikada theme into your CSS. Or take it from the package: import { Sparkline } from "@sproutboat/ikada/charts";
Usage
import { Sparkline } from "@/components/ikada/sparkline";
const requests = [12, 18, 15, 22, 28, 24, 31, 27, 35, 40, 36, 44];
<Sparkline
ariaLabel="Requests, last 24 hours"
data={requests}
/>Examples
const requests = [12, 18, 15, 22, 28, 24, 31, 27, 35, 40, 36, 44];
<Sparkline aria-label="Requests, last 24 hours" data={requests} formatPoint={(i) => `${String(i * 2).padStart(2, "0")}:00`} />const errors = [3, 2, 4, 3, 9, 14, 7, 5, 4, 3, 2, 2];
<Sparkline aria-label="Errors, last 24 hours" data={errors} color="errors" /><Sparkline aria-label="Requests, last 24 hours" data={requests} area={false} current={false} /><Sparkline aria-label="Requests, last 24 hours" data={requests} domain={[0, 100]} height={64} />Props
| Prop | Type | Description |
|---|---|---|
| datarequired | readonly number[] | Values in time order, oldest first. |
| color | "grid" | "other" | "requests" | "errors" | "deploy" | "2xx" | "3xx" | "4xx" | "5xx" | "series" | Chart colour token for the line. Default `requests`. |
| height | number | Height in pixels. Default 44; the width fills the container. |
| area | boolean | Fill under the line. Defaults to true. |
| domain | readonly [number, number] | [min, max]. Defaults to the data's own range with a little air above and below, so a quiet series still shows its shape; pass [0, max] to compare several on one honest scale. |
| label | string | What the number is, shown once next to the value in the hover tooltip ("Requests 10,303"), so `formatValue` should not repeat it. Defaults to the first words of `ariaLabel` ("Requests" from "Requests, last 24 hours"). |
| formatValue | ((value: number) => string) | Formats the hover value. Default `(value: number): string => formatNumber(value)`. |
| formatPoint | ((index: number) => string) | Title for a hovered point, usually its time ("14:00"). Without it the card shows just the row ("Requests 11"): a position like "Point 3" says nothing. |
| current | boolean | A dot on the newest value, so the eye lands on "now". Defaults to true. |
| className | string | Classes merged onto the root element, after ikada's own. |
| aria-label | string | — |
| ariaLabel | string | — |
Source: src/charts/sparkline.tsx