Scatter

Точечная серия; обе оси числовые по умолчанию (без axes создаются number + number).

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Height and weight' },
    series: [{ type: 'scatter', xField: 'height', xName: 'Height', yField: 'weight', name: 'Weight' }],
    axes: [
      { type: 'number', position: 'bottom', title: { text: 'Height, cm' }, nice: false },
      { type: 'number', position: 'left', title: { text: 'Weight, kg' } },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { height: 162, weight: 54 },
    { height: 168, weight: 61 },
    { height: 171, weight: 65 },
    { height: 175, weight: 71 },
    { height: 178, weight: 74 },
    { height: 180, weight: 82 },
    { height: 183, weight: 79 },
    { height: 186, weight: 88 },
    { height: 190, weight: 93 },
    { height: 167, weight: 58 },
    { height: 173, weight: 68 },
    { height: 181, weight: 77 },
  ];
}

Подписи значений

label.formatter({ value, datum }) — любые поля датума в подписи:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Scatter with labels on the right' },
    series: [
      {
        type: 'scatter',
        xField: 'x',
        yField: 'y',
        name: 'Points',
        label: {
          enabled: true,
          placement: 'right',
          formatter: ({ value, datum }) => `(${datum.x}; ${value})`,
        },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { x: 12, y: 30 },
    { x: 25, y: 48 },
    { x: 38, y: 22 },
    { x: 47, y: 61 },
    { x: 58, y: 41 },
    { x: 70, y: 72 },
    { x: 81, y: 55 },
  ];
}

Формы маркеров

shape: circle, square, diamond, triangle, cross, plus:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Marker shapes' },
    series: [
      { type: 'scatter', xField: 'x', yField: 'alpha', name: 'Group A', shape: 'circle' },
      { type: 'scatter', xField: 'x', yField: 'beta', name: 'Group B', shape: 'diamond' },
      { type: 'scatter', xField: 'x', yField: 'gamma', name: 'Group C', shape: 'triangle' },
    ],
  };
}

data.ts

export function getData() {
  const data: Array<Record<string, number>> = [];
  const groups = [
    { key: 'alpha', cx: 30, cy: 40 },
    { key: 'beta', cx: 60, cy: 70 },
    { key: 'gamma', cx: 75, cy: 30 },
  ];
  groups.forEach((g, gi) => {
    for (let i = 0; i < 14; i++) {
      data.push({
        x: g.cx + (((i * 13 + gi * 7) % 21) - 10),
        [g.key]: g.cy + (((i * 17 + gi * 11) % 19) - 9),
      });
    }
  });
  return data;
}

Опции

Общие опции всех серий (name, showInLegend, tooltip.renderer, …) — в разделе Общие опции серий.

Опция	Тип	По умолчанию	Описание
xField	string	—	числовые ключи данных
yField	string	—	числовые ключи данных
shape	MarkerShape	'circle'	форма маркера
size	Pixels	8	размер маркера
fill	ColorValue	палитра	заливка
fillOpacity	Fraction	0.85	заливка
stroke	ColorValue	фон	обводка
strokeWidth	Pixels	1	обводка
itemStyler	(params) => style	—	пер-точечные стили (fill/stroke/size) по datum
label.enabled	boolean	false	показать подписи значений
label.placement	'top' | 'bottom' | 'left' | 'right' | 'inside'	'top'	позиция подписи
label.formatter	({ value, datum }) => string	значение	содержимое подписи
label.fontSize	Pixels	11	размер шрифта подписи
label.fontWeight	string | number	normal	насыщенность
label.fontFamily	string	шрифт темы	гарнитура
label.color	ColorValue	foreground; внутри — автоконтраст	цвет текста

itemStyler получает { datum, index, highlighted, fill, stroke, size } и возвращает частичные стили — так раскрашивают точки по условию без отдельных серий.