Sparkline
A miniature chart for displaying trends.
Sparkline creates an inline, text-based chart using block-drawing characters ( ▂▃▄▅▆▇█). It is perfect for displaying CPU usage, memory consumption, or historical metrics within a compact space.
Usage
import { Sparkline } from 'caret-tui';
// Values should be between 0 and 100
const cpuHistory = [10, 20, 15, 60, 90, 80, 40, 30, 10];
const App = () => (
<Sparkline
label="CPU Load"
values={cpuHistory}
width={15}
variant="warning"
/>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
values | number[] | - | An array of numeric values from 0 to 100. |
width | number | 20 | The character width of the chart (shows the last N values). |
variant | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'primary' | The color variant. |
label | string | - | Optional label displayed above the chart. |