Docs › Chart types

Sparklines and KPI cards

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

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.

Live example

Code for this example

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.

Live example

Code for this example

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'.