Sparklines

Миниатюрные чарты без осей и хрома — для таблиц и карточек:

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 }));
}

Пресет

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

Пресет строит обычные options: серия + «голые» оси + минимальный padding — то же самое можно собрать вручную (см. вкладку config.ts выше).

Опции

Опция	Тип	По умолчанию	Описание
type	'line' | 'area' | 'bar'	'line'	вид спарклайна
container	данные	—	контейнер, данные и поле значения (категории — индексы)
data	данные	—	контейнер, данные и поле значения (категории — индексы)
field	данные	—	контейнер, данные и поле значения (категории — индексы)
fill	ColorValue	палитра	цвета
stroke	ColorValue	палитра	цвета
width	Pixels	по контейнеру	размеры
height	Pixels	по контейнеру	размеры
theme	ThemeName | ThemeOptions	default	тема