# Sparkline

A 44px trend line with no axes, a dot on the current point, a hover value and the same tokens as TimeseriesChart.

Source page: https://sproutboat.com/ikada/components/sparkline

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/sparkline.json
```
Or from the package: `import { Sparkline } from "@sproutboat/ikada/charts";`
## Usage
```tsx
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
### Default
A trend with no axes and a dot on now. Hover for the value of the nearest point; formatPoint adds its time as a title.
```tsx
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`} />
```
### Colour
Any chart colour token. The same tokens colour TimeseriesChart.
```tsx
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" />
```
### Line only
Drop the fill and the current-point dot for the quietest form.
```tsx
<Sparkline aria-label="Requests, last 24 hours" data={requests} area={false} current={false} />
```
### Fixed domain and height
Pin the domain so several sparklines compare on one scale.
```tsx
<Sparkline aria-label="Requests, last 24 hours" data={requests} domain={[0, 100]} height={64} />
```
## Props
### SparklineProps

| Prop | Type | Description |
| --- | --- | --- |
| data | `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: https://github.com/baronunread/ikada/blob/main/src/charts/sparkline.tsx