# Sparklines and KPI cards

> A big number, a change badge and a small trend line in one card.

Source: https://82chart.com/en/docs/sparkline-kpi/

The default look (`skin: 'card'`) is a card: a small `eyebrow`, the title, a subtitle, a big `value`, a change badge (`delta`) top right, the chart, and a `footnote`.

```js
createChart('#chart', {
  type: 'area',
  eyebrow: 'REVENUE',
  title: 'Revenue this month',
  subtitle: 'October 1–21',
  value: 48250,
  prefix: '$',
  delta: 18.2,
  deltaLabel: 'vs last month',
  footnote: 'As of Oct 21, 2026 09:00',
  height: 140,
  data: {
    labels: ['Oct 15', 'Oct 16', 'Oct 17', 'Oct 18', 'Oct 19', 'Oct 20', 'Oct 21'],
    series: [{ name: 'Revenue', data: [2010, 2240, 2180, 2650, 2420, 2890, 3120] }],
  },
});
```

## The change badge

| Option | What it does |
| --- | --- |
| `delta` | A number is a percent (`18.2` → +18.2%); a string is shown as is |
| `deltaUpIsGood` | Default true (up is green). Set `false` for costs and errors |
| `deltaColors` | `'semantic'` (good green, bad red; default) or `'korea'` (up red ▲, down blue ▼, as in Korean stock apps) |
| `deltaLabel` | Small text after the badge, e.g. `'vs last month'` |

## Sparklines

`skin: 'sparkline'` draws just the line, without axes, grid or legend: a small trend for table cells and card corners. Its height follows the width, between 32 and 80px.

```js
createChart('#chart', {
  type: 'line',
  skin: 'sparkline',
  data: { series: [{ name: 'Visitors', data: [12, 15, 14, 18, 17, 21, 19, 24, 26, 25, 29] }] },
});
```

For the chart without the card frame, use `skin: 'plain'`.