Scatter

Scatter series; both axes are numeric by default (without axes, number + number axes are created).

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 },
  ];
}

Value labels

label.formatter({ value, datum }) — any datum fields can go into the label:

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 },
  ];
}

Marker shapes

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

Options

Options common to all series (name, showInLegend, tooltip.renderer, …) are covered in Common series options.

Option	Type	Default	Description
xField	string	—	numeric data keys
yField	string	—	numeric data keys
shape	MarkerShape	'circle'	marker shape
size	Pixels	8	marker size
fill	ColorValue	palette	fill
fillOpacity	Fraction	0.85	fill
stroke	ColorValue	background	stroke
strokeWidth	Pixels	1	stroke
itemStyler	(params) => style	—	per-point styles (fill/stroke/size) based on datum
label.enabled	boolean	false	show value labels
label.placement	'top' | 'bottom' | 'left' | 'right' | 'inside'	'top'	label placement
label.formatter	({ value, datum }) => string	value	label content
label.fontSize	Pixels	11	label font size
label.fontWeight	string | number	normal	font weight
label.fontFamily	string	theme font	font family
label.color	ColorValue	foreground; inside — auto contrast	text color

itemStyler receives { datum, index, highlighted, fill, stroke, size } and returns partial styles — this is how you color points conditionally without separate series.