Skip to main content
Radar diagrams (also known as radar charts, spider charts, star charts, cobweb charts, polar charts, or Kiviat diagrams) provide a simple way to plot low-dimensional data in a circular format. They are commonly used to graphically summarize and compare the performance of multiple entities across multiple dimensions.
Radar diagrams are available in Mermaid v11.6.0+. Use the radar-beta keyword.

​
When to use radar charts

Radar charts are particularly useful for:
  • Comparing multiple entities across several dimensions
  • Displaying performance metrics
  • Showing skill assessments
  • Visualizing survey results
  • Comparing product features
  • Analyzing competitive positioning

​
Basic radar chart

This example compares student grades across multiple subjects:

​
Syntax overview

​
Basic structure

radar-beta
  axis A, B, C, D, E
  curve c1{1,2,3,4,5}
  curve c2{5,4,3,2,1}

​
Title

Add a title using the title keyword: 
radar-beta
  title Title of the Radar Diagram
  ...

​
Defining axes

Axes represent the dimensions being measured. Each axis needs an ID and optional label:

​
Single axis per line

radar-beta
  axis id1["Label1"]
  axis id2["Label2"]

​
Multiple axes per line

radar-beta
  axis id1["Label1"], id2["Label2"], id3["Label3"]
Example:

​
Defining curves

Curves represent the data for each entity being compared:

​
Positional values

Values correspond to axes in the order they were defined: 
radar-beta
  axis axis1, axis2, axis3
  curve id1["Label1"]{1, 2, 3}
  curve id2["Label2"]{4, 5, 6}

​
Key-value pairs

Explicitly map values to specific axes: 
radar-beta
  axis axis1, axis2, axis3
  curve id4{ axis3: 30, axis1: 20, axis2: 10 }

​
Multiple curves per line

radar-beta
  axis A, B, C
  curve id1{1, 2, 3}, id2{3, 2, 1}

​
Configuration options

​
Show legend

radar-beta
  ...
  showLegend true
The legend is shown by default.

​
Min and max values

radar-beta
  ...
  max 100
  min 0
If not provided, max is calculated from data and min defaults to 0.

​
Graticule type

radar-beta
  ...
  graticule polygon
Options: circle (default) or polygon

​
Ticks

radar-beta
  ...
  ticks 5
Number of concentric circles/polygons. Default is 5.

​
Complete examples

​
Restaurant comparison

​
Skills assessment

​
Product features

​
Advanced configuration

ParameterDescriptionDefault
widthWidth of the radar diagram600
heightHeight of the radar diagram600
marginTopTop margin50
marginBottomBottom margin50
marginLeftLeft margin50
marginRightRight margin50
axisScaleFactorScale factor for the axis1
axisLabelFactorAxis label position adjustment1.05
curveTensionTension for rounded curves0.17
Configure using frontmatter:
---
config:
  radar:
    axisScaleFactor: 0.25
    curveTension: 0.1
---

​
Theme customization

​
Global variables

---
config:
  themeVariables:
    cScale0: "#FF0000"
    cScale1: "#00FF00"
    cScale2: "#0000FF"
---
Radar charts support cScale${i} where i is 0 to max colors (usually 12).

​
Radar-specific variables

---
config:
  themeVariables:
    radar:
      axisColor: "#FF0000"
      curveOpacity: 0.5
---
PropertyDescriptionDefault
axisColorColor of axis linesblack
axisStrokeWidthWidth of axis lines1
axisLabelFontSizeFont size of axis labels12px
curveOpacityOpacity of curves0.7
curveStrokeWidthWidth of curves2
graticuleColorColor of graticuleblack
graticuleOpacityOpacity of graticule0.5
graticuleStrokeWidthWidth of graticule1
legendBoxSizeSize of legend box10
legendFontSizeFont size of legend14px

​
Styled example

​
Best practices

For effective radar charts:
  • Use 3-8 axes (too few or too many reduces clarity)
  • Keep scales consistent across axes
  • Use polygon graticule for angular data
  • Limit to 3-5 curves for readability
  • Ensure all values are non-negative
  • Order axes logically (related dimensions together)

​
Common use cases

​
Performance reviews

​
Market analysis

Radar charts are most effective when comparing entities with similar characteristics across the same set of dimensions. They work best with normalized or similarly-scaled data.

Build docs developers (and LLMs) love

Get started for freeTalk to us