Radar

Категории распределяются по кругу (angleField), значения — по радиусу (radiusField). radar-line — контур, radar-area — контур с заливкой. Сетка — полигональная («паутина»). При наведении маркер вершины плавно увеличивается, остальные серии приглушаются — анимация как у круговых.

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Product assessment' },
    series: [
      { type: 'radar-area', angleField: 'skill', radiusField: 'target', name: 'Target' },
      {
        type: 'radar-line',
        angleField: 'skill',
        radiusField: 'current',
        name: 'Current',
        tooltip: {
          renderer: ({ label, value, seriesName, color }) => ({
            heading: label,
            rows: [{ label: seriesName, value: `${value} / 10`, color }],
          }),
        },
      },
    ],
  };
}

data.ts

export function getData() {
  return [
    { skill: 'Speed', current: 7, target: 9 },
    { skill: 'Quality', current: 8, target: 9 },
    { skill: 'Reliability', current: 6, target: 8 },
    { skill: 'Support', current: 5, target: 7 },
    { skill: 'Price', current: 8, target: 8 },
    { skill: 'Documentation', current: 4, target: 8 },
  ];
}

Radar-area

Заливка профилей с прозрачностью — удобно для сравнения двух контуров:

config.ts

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

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Radar-area: profile comparison' },
    series: [
      { type: 'radar-area', angleField: 'metric', radiusField: 'team', name: 'Us', fillOpacity: 0.3 },
      { type: 'radar-area', angleField: 'metric', radiusField: 'market', name: 'Market', fillOpacity: 0.3 },
    ],
  };
}

data.ts

export function getData() {
  return [
    { metric: 'Speed', team: 8, market: 6 },
    { metric: 'Quality', team: 7, market: 8 },
    { metric: 'Price', team: 5, market: 7 },
    { metric: 'Support', team: 9, market: 5 },
    { metric: 'Features', team: 6, market: 8 },
    { metric: 'UX', team: 8, market: 6 },
  ];
}

Опции

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

Опция	Тип	По умолчанию	Описание
angleField	string	—	ключи данных
radiusField	string	—	ключи данных
name	string	radiusField	имя серии
stroke	ColorValue	палитра	контур
strokeWidth	Pixels	2	контур
fillOpacity (radar-area)	Fraction	0.25	прозрачность заливки
tooltip.renderer	({ datum, label, value, seriesName, color }) => …	—	кастомное содержимое тултипа
marker.enabled	boolean	true	маркеры вершин
marker.shape	MarkerShape	circle	форма
marker.size	Pixels	6	размер