Bubble

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

config.tsdata.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',
        yName: 'Happiness',
        name: 'Countries',
        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 },
  };
}

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.tsdata.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',
        xName: 'Reach',
        yField: 'engagement',
        yName: '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 },
  };
}

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

Какие пузырьки получают подпись

Пузырёк — часть целого: sizeField и есть его доля от суммы, поэтому он принимает те же две опции, что и сектор круговой. label.minShare оставляет мелочь без подписи, label.avoidOverlap раздаёт место сначала крупным пузырькам, а label.value.type: 'percent' читает размер как эту долю. labelField даёт пузырьку имя, которое ставится рядом:

config.tsdata.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: 'labels go to the bubbles worth naming, biggest first' },
    series: [
      {
        type: 'bubble',
        xField: 'gdp',
        xName: 'GDP per capita',
        yField: 'happiness',
        yName: 'Happiness',
        labelField: 'country',
        name: 'Countries',
        sizeField: 'population',
        sizeName: 'Population, M',
        maxSize: 36,
        label: {
          enabled: true,
          minShare: 0.04,
          avoidOverlap: true,
          category: { fontWeight: 'bold' },
          value: { type: 'percent', color: '#8a8f98' },
        },
      },
    ],
    axes: [
      { type: 'number', position: 'bottom', title: { text: 'GDP per capita, $K' } },
      { type: 'number', position: 'left', title: { text: 'Happiness Index' } },
    ],
    legend: { enabled: false },
  };
}

export function getData() {
  return [
    { country: 'Russia', gdp: 4.2, happiness: 5.9, population: 144 },
    { country: 'China', gdp: 12.6, happiness: 6.1, population: 1412 },
    { country: 'India', gdp: 2.4, happiness: 5.0, population: 1408 },
    { country: 'USA', gdp: 76.3, happiness: 6.9, population: 332 },
    { country: 'Germany', gdp: 48.7, happiness: 7.0, population: 84 },
    { country: 'Japan', gdp: 34.0, happiness: 6.5, population: 125 },
    { country: 'South Korea', gdp: 51.0, happiness: 6.4, population: 52 },
    { country: 'Brazil', gdp: 9.7, happiness: 6.3, population: 215 },
  ];
}

Сама подпись — тот же блок, что описан в Scatter: имя и значение, у каждого свой шрифт.

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

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

config.tsdata.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',
        xName: 'Effort',
        yField: 'impact',
        yName: 'Impact',
        sizeField: 'team',
        sizeName: 'Team',
        name: 'Initiatives',
        size: 8,
        maxSize: 46,
        fillOpacity: 0.55,
      },
    ],
    legend: { enabled: false },
  };
}

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`	имя в тултипе; строка показывает размер с его долей от суммы
`labelField`	`string`	—	ключ имени пузырька
`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.minShare`	`Fraction`	`0`	доля от суммы размеров, начиная с которой пузырёк достоин подписи
`label.avoidOverlap`	`boolean`	`false`	скрывать подписи без места; первыми просят крупные пузырьки
`label.fontSize`	`Pixels`	`11`	размер шрифта подписи
`label.fontWeight`	`string \| number`	`normal`	насыщенность
`label.fontFamily`	`string`	шрифт темы	гарнитура
`label.color`	`ColorValue`	foreground; внутри — автоконтраст	цвет текста

Bubble ​

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

Какие пузырьки получают подпись ​

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

Опции ​

Bubble

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

Какие пузырьки получают подпись

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

Опции