# Sparkline

Tiny inline charts for tables, cards and lists.

Group: Charts

## Import

```tsx
import { Sparkline } from "@indoku/ui"
```

## Examples

### Basic

```tsx
const up = [10, 12, 11, 15, 14, 18, 17, 21]
const down = [21, 19, 20, 16, 17, 13, 12, 9]
const stocks = [
  { name: "AAPL", price: "$231.4", values: [10, 12, 11, 15, 14, 18, 17, 21] },
  { name: "TSLA", price: "$412.9", values: [21, 19, 20, 16, 17, 13, 12, 9] },
  { name: "NVDA", price: "$188.2", values: [8, 9, 12, 11, 15, 14, 19, 22] },
]

function SparkBasic() {
  return <Sparkline values={up} />
}
```

### Area

```tsx
const up = [10, 12, 11, 15, 14, 18, 17, 21]
const down = [21, 19, 20, 16, 17, 13, 12, 9]
const stocks = [
  { name: "AAPL", price: "$231.4", values: [10, 12, 11, 15, 14, 18, 17, 21] },
  { name: "TSLA", price: "$412.9", values: [21, 19, 20, 16, 17, 13, 12, 9] },
  { name: "NVDA", price: "$188.2", values: [8, 9, 12, 11, 15, 14, 19, 22] },
]

function SparkArea() {
  return <Sparkline values={up} area width={200} height={48} />
}
```

### Trend color

`color=trend` is green when the series ends higher, red when lower.

```tsx
const up = [10, 12, 11, 15, 14, 18, 17, 21]
const down = [21, 19, 20, 16, 17, 13, 12, 9]
const stocks = [
  { name: "AAPL", price: "$231.4", values: [10, 12, 11, 15, 14, 18, 17, 21] },
  { name: "TSLA", price: "$412.9", values: [21, 19, 20, 16, 17, 13, 12, 9] },
  { name: "NVDA", price: "$188.2", values: [8, 9, 12, 11, 15, 14, 19, 22] },
]

const down = [21, 19, 20, 16, 17, 13, 12, 9]
const stocks = [
  { name: "AAPL", price: "$231.4", values: [10, 12, 11, 15, 14, 18, 17, 21] },
  { name: "TSLA", price: "$412.9", values: [21, 19, 20, 16, 17, 13, 12, 9] },
  { name: "NVDA", price: "$188.2", values: [8, 9, 12, 11, 15, 14, 19, 22] },
]

function SparkTrend() {
  return (
    <HStack gap="6">
      <Sparkline values={up} color="trend" />
      <Sparkline values={down} color="trend" />
    </HStack>
  )
}
```

### Interaction tooltip

Hover to read a value.

```tsx
function SparkInteractive() {
  return <Sparkline values={[4, 7, 5, 9, 12, 8, 14, 11, 16]} width={260} height={64} interactive area />
}
```

### Stock composition

Sparklines inside a watchlist.

```tsx
const stocks = [
  { name: "AAPL", price: "$231.4", values: [10, 12, 11, 15, 14, 18, 17, 21] },
  { name: "TSLA", price: "$412.9", values: [21, 19, 20, 16, 17, 13, 12, 9] },
  { name: "NVDA", price: "$188.2", values: [8, 9, 12, 11, 15, 14, 19, 22] },
]

function SparkStocks() {
  return (
    <Stack maxW="sm" gap="3">
      {stocks.map((s) => {
        const change = ((s.values[s.values.length - 1] - s.values[0]) / s.values[0]) * 100
        return (
          <HStack key={s.name} justify="space-between">
            <Box>
              <Text fontWeight="medium">{s.name}</Text>
              <Text fontSize="sm" color="fg.muted">{s.price}</Text>
            </Box>
            <Sparkline values={s.values} color="trend" />
            <Badge colorPalette={change >= 0 ? "green" : "red"}>{change >= 0 ? "+" : ""}{change.toFixed(1)}%</Badge>
          </HStack>
        )
      })}
    </Stack>
  )
}
```

## Props

### Sparkline

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `values` | `number[]` |  | Data points. |
| `color` | `string` | `'blue'` | Color token, or trend. |
| `area` | `boolean` | `false` | Fill under the line. |
| `interactive` | `boolean` | `false` | Show the hovered value. |
| `width / height` | `number` | `120 / 32` | Size in px. |

`*` = required. Style props and HTML attributes are accepted too.

## See also

- Line Chart: https://ui.indoku.org/docs/line-chart