---
title: "Sparkline"
description: "A metric’s recent shape beside its figure, without axes or tooltip. An outcome color tells good news from bad."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Sparkline

## Beside a figure

```tsx
import { Sparkline } from '@arbol-ai/ui/charts';

<div className="grid max-w-xl gap-4 sm:grid-cols-2">
  <div className="rounded-card border p-4">
    <p className="text-muted-foreground text-xs">Contacts reached</p>
    <p className="font-heading text-2xl font-semibold tabular-nums">2,674</p>
    <Sparkline
      aria-label="Contacts reached, last 14 days"
      className="mt-2"
      values={[182, 205, 197, 240, 228, 96, 74, 210, 236, 251, 244, 262, 118, 131]}
    />
  </div>
  <div className="rounded-card border p-4">
    <p className="text-muted-foreground text-xs">Failed calls</p>
    <p className="font-heading text-2xl font-semibold tabular-nums">38</p>
    <Sparkline
      aria-label="Failed calls, last 14 days"
      className="mt-2"
      color="chart-negative"
      values={[2, 4, 1, 3, 5, 2, 1, 4, 3, null, 2, 6, 2, 3]}
    />
  </div>
</div>
```

## Source

The examples above are [`src/charts/sparkline.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/charts/sparkline.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/charts/sparkline/index.mdx