Nightingale and Radial Column

Sector-based polar series: the category defines the angular band, the value the radius.

Nightingale

The series occupies the entire category band (Nightingale rose):

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

Several series share the band (the polar counterpart of grouped bars):

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

Inverted layout: categories are rings along the radius, the value is an arc along the angle (angleField is the category, radiusField the value):

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

Options

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

Option	Type	Default	Description
angleField	string	—	data keys
radiusField	string	—	data keys
name	string	radiusField	series name
fill	ColorValue	palette	sector fill
fillOpacity	Fraction	0.85	sector fill
stroke	ColorValue	background	stroke
strokeWidth	Pixels	1	stroke
groupGap	Fraction	0.2	gap between sectors of one group (radial-column)
sectorSpacing	Pixels	1	constant-width gap between adjacent sectors

Tooltip and the grid

tooltip.renderer receives RadialTooltipRendererParams: { datum, label, value, seriesName, color } — the category the mark sits on and the value that gave it its radius.

tooltip: { renderer: ({ label, value }) => `${label}: ${String(value)}` },

The rings, the spokes and the numbers beside them are settings of their own — see Polar axes.