# Sparkline
> Inline pixel sparkline with a dithered area, coloured green or red by trend unless a colour is set; hovering shows the value.
- React: `import { PxSparkline } from "@/components/lumesec/px-sparkline"`
- Collection: Pixel UI (https://elements.lumesec.ai/components/pixel-ui)
- Registry item: https://elements.lumesec.ai/r/px-sparkline.json
- Page: https://elements.lumesec.ai/components/pixel-ui/sparkline



Live preview: https://elements.lumesec.ai/view/px-sparkline

Demo source:

```tsx
import { PxSparkline } from "@/components/lumesec/px-sparkline";

const CELL = "border-b border-border px-1 py-2";
const NUMBER = "border-b border-border px-1 py-2 text-right font-mono text-[12.5px] tabular-nums";

export default function PxSparklineDemo() {
  return (
    <div className="w-full max-w-[400px] rounded-[14px] border border-border bg-card px-5 py-[18px] shadow-[0_14px_34px_-20px_rgb(0_0_0/0.4)]">
      <table className="w-[min(380px,100%)] border-collapse text-[13.5px]">
        <tbody>
          <tr>
            <td className={CELL}>Requests</td>
            <td className={CELL}>
              <PxSparkline data={[31, 35, 33, 40, 38, 44, 47, 45, 52, 58]} />
            </td>
            <td className={NUMBER}>58k</td>
          </tr>
          <tr>
            <td className={CELL}>Errors</td>
            <td className={CELL}>
              <PxSparkline data={[9, 8, 9, 7, 6, 7, 5, 4, 4, 3]} color="success" />
            </td>
            <td className={NUMBER}>0.3%</td>
          </tr>
          <tr>
            <td className={CELL}>Latency</td>
            <td className={CELL}>
              <PxSparkline data={[180, 176, 190, 184, 200, 196, 210, 205, 214, 222]} unit=" ms" />
            </td>
            <td className={NUMBER}>222 ms</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
```

## Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

## Installation

```bash
npx shadcn@latest add @lumesec/px-sparkline
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-sparkline.json
```

## Usage

React:

```tsx
import { PxSparkline } from "@/components/lumesec/px-sparkline";

export function Example() {
  return <PxSparkline data={[180, 176, 190, 184, 200, 196, 210, 205, 214, 222]} unit=" ms" label="Latency" />;
}
```

## Behaviour

An inline pixel line with a dithered area, coloured by trend unless you set a colour. Hovering shows the value under the pointer.

## API reference

### Props

Also accepts every prop of `<span>` (`React.ComponentProps<"span">`), spread onto the root element.

| Prop     | Type                                                                                       | Default                             | Description                                                                                                       |
| -------- | ------------------------------------------------------------------------------------------ | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| `data`   | `readonly number[]`                                                                        | `[4, 6, 5, 8, 7, 9, 8, 12, 10, 13]` | The series. `NaN` entries are dropped, and fewer than two values draw nothing. A change replays the draw-in.      |
| `label`  | `string`                                                                                   | `"Trend"`                           | Start of the canvas `aria-label`, followed by the first, last, lowest and highest value.                          |
| `color`  | `"accent" \| "success" \| "destructive" \| "warning" \| "info" \| "foreground" \| "muted"` | —                                   | Line colour. Without it the line is `success` when the last value is at least the first, otherwise `destructive`. |
| `unit`   | `string`                                                                                   | `""`                                | Text appended to the hover value as written; include a leading space for a spaced unit such as `" ms"`.           |
| `width`  | `number`                                                                                   | `140`                               | Width in pixels.                                                                                                  |
| `height` | `number`                                                                                   | `32`                                | Height in pixels.                                                                                                 |

### Ref

`ref` points at the root `HTMLSpanElement`.

## Accessibility

* The canvas has `role="img"` and an `aria-label` that summarises the series, for example "Trend: from 4 to 13, low 4, high 13".
* The hover value is pointer-only and is not available to keyboard or assistive technology users.
* Reduced motion: the line appears at once instead of drawing in from the left.

## Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--lumesec`, `--lumesec-shine`, `--lumesec-success`, `--destructive`, `--foreground` and `--card`.

## Notes

* The sample series `4, 6, 5, 8, 7, 9, 8, 12, 10, 13` is drawn when `data` is not set.
* It renders inline (`inline-block`, aligned to the middle), so it sits in table cells and running text.