Radial Charts

Transform familiar chart types into circular layouts using polar coordinates. Radial charts wrap linear data around a center point, creating visually distinctive displays that work well for cyclical data (hours, months, compass directions) or when you want a more compact, aesthetically engaging presentation.

Radial Bar

Wrap bar charts around a circle so bars radiate outward from a central point. Radial bars create a striking visual for cyclical data like monthly metrics or hourly patterns. The circular form emphasizes the cyclical nature of the data while still allowing magnitude comparisons through bar length.

Configuration

Parameter	Type	Default	Description
type	string	-	'radial-bar'
x	string	required	Category field
y	string	required	Value field
innerRadius	number	0.3	Inner radius ratio (0-1)
padAngle	number	0.02	Gap between bars
cornerRadius	number	4	Rounded corners
colorScheme	string	'schemeTableau10'	Color palette

Basic Example

View Source

type: radial-bar
engine: d3
x: month
y: sales
title: Monthly Sales
innerRadius: 0.4
width: 450
height: 450
data:
  source: '[{"month": "Jan", "sales": 120}, {"month": "Feb", "sales": 145}, {"month": "Mar", "sales": 168}, {"month": "Apr", "sales": 155}, {"month": "May", "sales": 182}, {"month": "Jun", "sales": 195}, {"month": "Jul", "sales": 210}, {"month": "Aug", "sales": 198}, {"month": "Sep", "sales": 175}, {"month": "Oct", "sales": 162}, {"month": "Nov", "sales": 148}, {"month": "Dec", "sales": 190}]'

Styled

View Source

type: radial-bar
engine: d3
x: category
y: value
innerRadius: 0.3
cornerRadius: 6
padAngle: 0.03
colorScheme: schemeSet3
title: Category Performance
width: 450
height: 450
data:
  source: '[{"category": "Product A", "value": 85}, {"category": "Product B", "value": 72}, {"category": "Product C", "value": 93}, {"category": "Product D", "value": 68}, {"category": "Product E", "value": 78}, {"category": "Product F", "value": 88}]'

Radial Area

Plot area charts in polar coordinates to create radar-like displays. Radial area charts (often called radar or spider charts) show multiple variables as distances from a center, with the filled area revealing the overall profile. Use them to compare entities across several dimensions or show how a single entity performs across multiple criteria.

Configuration

Parameter	Type	Default	Description
type	string	-	'radial-area'
x	string	required	Angular field (category)
y	string	required	Radial field (value)
innerRadius	number	0	Inner radius
colorScheme	string	'schemeCategory10'	Color palette

Basic Example

View Source

type: radial-area
engine: d3
x: skill
y: score
title: Skill Assessment
width: 450
height: 450
data:
  source: '[{"skill": "JavaScript", "score": 85}, {"skill": "TypeScript", "score": 78}, {"skill": "React", "score": 92}, {"skill": "Node.js", "score": 75}, {"skill": "CSS", "score": 68}, {"skill": "Testing", "score": 72}]'

---

Type Aliases

Primary	Aliases
radial-bar	circular-bar, radial, radial/bar
radial-area	radar, radial/area