# Mini Chart
Source: https://ui.spencerwueste.com/docs/components/mini-chart
Markdown: https://ui.spencerwueste.com/llm/components/mini-chart.md

> Dependency-free sparkline, bar chart, and stat tile for usage dashboards and inline metrics.

> Live preview: https://ui.spencerwueste.com/docs/components/mini-chart (demo source: `src/demos/mini-chart-demo.tsx`)

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/mini-chart.json
```

Registry JSON: https://ui.spencerwueste.com/r/mini-chart.json

## Usage

```tsx
import { BarChart, Sparkline, StatTile } from "@/components/pandacoderz-ui/mini-chart";
```

```tsx
<StatTile label="Requests" value="4.8k" delta="+12%" deltaTone="up" chart={<Sparkline data={series} />} />
<BarChart data={[{ label: "Opus", value: 31 }, { label: "Sonnet", value: 64 }]} height={80} />
```

Colors come from `currentColor`, so `className="text-chart-2"` recolors a sparkline. These are deliberately small; move to a charting library once you need axes or tooltips.

## API Reference

### Sparkline

| Prop | Type | Description |
| --- | --- | --- |
| `data` | `number[]` | Series. |
| `area` | `boolean` | Gradient fill under the line. Default `true`. |
| `dot` | `boolean` | Mark the last point. Default `true`. |

### BarChart

| Prop | Type | Description |
| --- | --- | --- |
| `data` | `{ label, value, color? }[]` | Bars. |
| `height` | `number` | Px. Default `120`. |
| `showValues` | `boolean` | Reveal values on hover. |

### StatTile

| Prop | Type | Description |
| --- | --- | --- |
| `label` / `value` | `ReactNode` | Headline pair. |
| `delta` / `deltaTone` | `ReactNode` / `"up" \| "down" \| "neutral"` | Trailing change text. |
| `chart` | `ReactNode` | Rendered under the value. |