# Sparkline

> Word-sized chart for KPI tiles: no axes, no legend.

Source: https://ui.jcsoftdev.com/docs/components/sparkline

Word-sized chart for KPI tiles: no axes, no legend. Hovering shows the
point's value; screen readers get a one-sentence summary (first, last,
minimum and maximum).

## Import

```ts
import { Sparkline } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/sparkline`.

## Usage

```tsx
<Sparkline
  data={salesLast14}
  label="Ventas de los últimos 14 días"
  type="line"
  height={36}
  showLast
  valueFormat="currency"
  categories={days}
  animate
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` * | `readonly (number \| null)[]` |  |  |
| `label` * | `string` |  | Accessible description, e.g. "Ventas de los últimos 14 días". |
| `type` | `"area" \| "line" \| "bar"` | `"line"` |  |
| `color` | `string` |  | CSS color; the brand tone (`accent-word`) by default. |
| `height` | `number \| "fill"` | `36` | Pixels, or "fill" to take the full height of the parent. |
| `width` | `number` |  | Fixed width; fills the container when omitted. |
| `showLast` | `boolean` | `true` | Dot on the last value (lines and areas). |
| `valueFormat` | `ValueFormat` |  | Format of the hovered value and the summary for screen readers. |
| `categories` | `readonly string[]` |  | Optional names of the points, shown next to the hovered value. |
| `highlightIndex` | `number` |  | Index of a bar drawn in full color while the others are muted (bars only). |
| `animate` | `boolean` | `true` |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-sparkline--default)
- [Area](/storybook/?path=/story/charts-sparkline--area)
- [Bars](/storybook/?path=/story/charts-sparkline--bars)
- [Falling Stock](/storybook/?path=/story/charts-sparkline--falling-stock)
- [Inside KPI tiles](/storybook/?path=/story/charts-sparkline--in-kpi-tiles)

## Source

`packages/ui/src/charts/sparkline/sparkline.tsx`