Sparklines

Miniature charts without axes and chrome — for tables and cards:

Line:

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';
import { buildSparklineOptions } from 'grafit-charts';

// the same in an app: Charts.createSparkline({ container, data, field: 'value', type: 'line' })
export function createOptions(): ChartOptions {
  return buildSparklineOptions({
    data: getData(),
    field: 'value',
    type: 'line',
    height: 56,
  }) as ChartOptions;
}

data.ts

export function getData() {
  const values = [42, 45, 43, 49, 47, 52, 50, 56, 53, 59, 62, 60, 66, 64, 71, 69, 75, 78, 74, 82];
  return values.map((value) => ({ value }));
}

Area:

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';
import { buildSparklineOptions } from 'grafit-charts';

// the same in an app: Charts.createSparkline({ container, data, field: 'value', type: 'area' })
export function createOptions(): ChartOptions {
  return buildSparklineOptions({
    data: getData(),
    field: 'value',
    type: 'area',
    height: 56,
  }) as ChartOptions;
}

data.ts

export function getData() {
  const values = [42, 45, 43, 49, 47, 52, 50, 56, 53, 59, 62, 60, 66, 64, 71, 69, 75, 78, 74, 82];
  return values.map((value) => ({ value }));
}

Bar:

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';
import { buildSparklineOptions } from 'grafit-charts';

// the same in an app: Charts.createSparkline({ container, data, field: 'value', type: 'bar' })
export function createOptions(): ChartOptions {
  return buildSparklineOptions({
    data: getData(),
    field: 'value',
    type: 'bar',
    height: 56,
  }) as ChartOptions;
}

data.ts

export function getData() {
  const values = [42, 45, 43, 49, 47, 52, 50, 56, 53, 59, 62, 60, 66, 64, 71, 69, 75, 78, 74, 82];
  return values.map((value) => ({ value }));
}

Preset

Charts.createSparkline({
  container,
  data, // [{ value: 12 }, ...]
  field: 'value',
  type: 'area', // 'line' | 'area' | 'bar'
  height: 40,
});

The preset builds regular options: a series + "bare" axes + minimal padding — the same thing can be assembled manually (see the config.ts tab above).

Options

Option	Type	Default	Description
type	'line' | 'area' | 'bar'	'line'	sparkline kind
container	data	—	container, data, and value field (categories are indices)
data	data	—	container, data, and value field (categories are indices)
field	data	—	container, data, and value field (categories are indices)
fill	ColorValue	palette	colors
stroke	ColorValue	palette	colors
width	Pixels	from container	dimensions
height	Pixels	from container	dimensions
theme	ThemeName | ThemeOptions	default	theme