Nightingale и Radial Column

Секторные полярные серии: категория задаёт угловой бэнд, значение — радиус.

Nightingale

Серия занимает весь бэнд категории (роза Найтингейл):

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Incidents by month' },
    series: [{ type: 'nightingale', angleField: 'month', radiusField: 'incidents', name: 'Incidents', fillOpacity: 0.7 }],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { month: 'Jan', incidents: 14 },
    { month: 'Feb', incidents: 11 },
    { month: 'Mar', incidents: 17 },
    { month: 'Apr', incidents: 9 },
    { month: 'May', incidents: 13 },
    { month: 'Jun', incidents: 21 },
    { month: 'Jul', incidents: 18 },
    { month: 'Aug', incidents: 12 },
  ];
}

Radial Column

Несколько серий делят бэнд (полярный аналог сгруппированных баров):

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Sales by quarter' },
    series: [
      { type: 'radial-column', angleField: 'quarter', radiusField: 'online', name: 'Online' },
      { type: 'radial-column', angleField: 'quarter', radiusField: 'offline', name: 'Offline' },
    ],
  };
}

data.ts

export function getData() {
  return [
    { quarter: 'Q1', online: 42, offline: 31 },
    { quarter: 'Q2', online: 51, offline: 28 },
    { quarter: 'Q3', online: 47, offline: 25 },
    { quarter: 'Q4', online: 63, offline: 33 },
  ];
}

Radial Bar

Инверсная раскладка: категории — кольца по радиусу, значение — дуга по углу (angleField — категория, radiusField — значение):

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Team scores' },
    series: [{ type: 'radial-bar', angleField: 'team', radiusField: 'score', name: 'Score' }],
    legend: { enabled: false },
  };
}

data.ts

export function getData() {
  return [
    { team: 'Search', score: 86 },
    { team: 'Maps', score: 72 },
    { team: 'Cloud', score: 64 },
    { team: 'Ads', score: 55 },
    { team: 'Music', score: 43 },
  ];
}

Опции

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

Опция	Тип	По умолчанию	Описание
angleField	string	—	ключи данных
radiusField	string	—	ключи данных
name	string	radiusField	имя серии
fill	ColorValue	палитра	заливка секторов
fillOpacity	Fraction	0.85	заливка секторов
stroke	ColorValue	фон	обводка
strokeWidth	Pixels	1	обводка