Bubble

Scatter с третьим измерением: sizeField управляет диаметром маркера в диапазоне size…maxSize.

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'GDP vs Happiness Index' },
    subtitle: { text: 'bubble size — population, millions' },
    series: [
      {
        type: 'bubble',
        xField: 'gdp',
        xName: 'GDP per capita',
        yField: 'happiness',
        name: 'Happiness Index',
        sizeField: 'population',
        sizeName: 'Population, M',
        maxSize: 36,
      },
    ],
    axes: [
      { type: 'number', position: 'bottom', title: { text: 'GDP per capita, $K' } },
      { type: 'number', position: 'left', title: { text: 'Happiness Index' }, nice: false },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { gdp: 4.2, happiness: 5.9, population: 144 },
    { gdp: 12.6, happiness: 6.1, population: 1412 },
    { gdp: 2.4, happiness: 4.3, population: 1408 },
    { gdp: 76.3, happiness: 6.9, population: 332 },
    { gdp: 48.7, happiness: 7.0, population: 84 },
    { gdp: 34.0, happiness: 6.5, population: 125 },
    { gdp: 51.0, happiness: 6.4, population: 52 },
    { gdp: 9.7, happiness: 6.3, population: 215 },
  ];
}

Подписи внутри пузырьков

К позициям line добавляется placement: 'inside' — текст в центре пузырька с автоконтрастным цветом и ореолом цвета маркера:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Bubble with Inside Labels' },
    subtitle: { text: "placement: 'inside' — auto contrast and bubble-colored halo" },
    series: [
      {
        type: 'bubble',
        xField: 'reach',
        yField: 'engagement',
        sizeField: 'budget',
        sizeName: 'Budget',
        name: 'Channels',
        size: 22,
        maxSize: 58,
        fillOpacity: 0.8,
        label: {
          enabled: true,
          placement: 'inside',
          formatter: ({ datum }) => String(datum.channel),
        },
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { reach: 20, engagement: 65, budget: 45, channel: 'TV' },
    { reach: 45, engagement: 40, budget: 28, channel: 'Radio' },
    { reach: 60, engagement: 72, budget: 64, channel: 'Social' },
    { reach: 75, engagement: 30, budget: 18, channel: 'Print' },
    { reach: 85, engagement: 58, budget: 38, channel: 'Search' },
  ];
}

Диапазон размеров

size/maxSize задают диаметры для минимального и максимального значения sizeField:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Bubble Size Range' },
    subtitle: { text: 'size 8 → maxSize 46, translucent fill' },
    series: [
      {
        type: 'bubble',
        xField: 'effort',
        yField: 'impact',
        sizeField: 'team',
        sizeName: 'Team',
        name: 'Initiatives',
        size: 8,
        maxSize: 46,
        fillOpacity: 0.55,
      },
    ],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { effort: 2, impact: 8, team: 6 },
    { effort: 4, impact: 6, team: 14 },
    { effort: 5, impact: 9, team: 22 },
    { effort: 7, impact: 4, team: 9 },
    { effort: 8, impact: 7, team: 30 },
    { effort: 3, impact: 3, team: 4 },
    { effort: 6, impact: 8, team: 18 },
    { effort: 9, impact: 9, team: 12 },
  ];
}

Опции

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

Все опции scatter, плюс:

Опция	Тип	По умолчанию	Описание
sizeField	string	—	ключ значения размера (обязателен)
sizeName	string	sizeField	имя в тултипе
size	Pixels	8	диаметр минимального значения
maxSize	Pixels	28	диаметр максимального значения
shape	MarkerShape	circle	форма маркера
fill	стили	палитра	заливка
fillOpacity	стили	0.85	заливка
stroke	стили	фон	обводка маркера
strokeWidth	стили	1	обводка маркера
itemStyler	(params) => MarkerItemStyle	—	стили отдельных точек
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; внутри — автоконтраст	цвет текста