← All diagram types
MERMAID RADAR GUIDE

Mermaid Radar Chart Syntax & Examples

Use Mermaid's radar-beta syntax to compare multiple series across the same labeled axes. Copy the example below and adjust the values for your own comparison.

Open the Radar editor See the syntax

MERMAID EXAMPLE

Mermaid radar chart example

Copy the working code, replace the labels and values, then continue editing the same diagram in Mermaid Studio.

Compare product capabilities

Review team or system qualities

Present multi-dimensional evaluations

Mermaid radar chart example rendered Mermaid preview. Source code: radar-beta title Diagram tool comparison axis speed["Speed"], clarity["Clarity"], cost["Cost"] curve mermaid["Mermaid"]{5, 4, 4} curve other["Other"]{4, 5, 3} max 5
radar-beta
  title Diagram tool comparison
  axis speed["Speed"], clarity["Clarity"], cost["Cost"]
  curve mermaid["Mermaid"]{5, 4, 4}
  curve other["Other"]{4, 5, 3}
  max 5

SYNTAX

Mermaid radar chart syntax

Learn the small set of Mermaid keywords that make this chart work.

SyntaxWhat it does
radar-betaStarts a radar chart definition.
titleAdds an optional title above the chart.
axisDefines the dimensions and optional labels used by every curve.
curveAdds a named series with one value for each axis.
max / minSets the shared scale. Use max when series values must be comparable.

Radar charts use the radar-beta header in the current Mermaid syntax. Test the installed Mermaid version when sharing examples across tools.

CODE EXAMPLES

More Radar examples

Basic Mermaid radar chart

Define three axes and compare two tools on the same five-point scale.

radar-beta
  title "Tool comparison"
  axis speed["Speed"], clarity["Clarity"], cost["Cost"]
  curve mermaid["Mermaid"]{5, 4, 4}
  curve other["Other"]{4, 5, 3}
  max 5
Radar chart with keyed values

Use axis IDs when the order of values should be explicit in the source.

radar-beta
  title "Team strengths"
  axis speed["Speed"], clarity["Clarity"], cost["Cost"]
  curve team["Team"]{speed: 80, clarity: 65, cost: 45}
  max 100
Radar chart scale and grid options

Set the range and grid style when the visual needs a predictable comparison scale.

radar-beta
  title "Quarterly review"
  axis quality, speed, coverage, reliability
  curve q1{72, 60, 80, 68}
  curve q2{84, 74, 88, 82}
  min 0
  max 100
  graticule polygon
  ticks 5

TROUBLESHOOTING

Common Radar errors

Axis and curve lengths differ
Every curve must provide exactly one value for each axis.
The scale is misleading
Use the same min and max when comparing series across the same dimensions.
Labels are hard to read
Keep axis labels short and reduce the number of dimensions when the chart becomes crowded.

FAQ

Frequently asked questions

What is a radar chart good for?+

Radar charts help compare multiple options across a consistent set of dimensions when the audience needs a broad view of trade-offs.

How many dimensions should a radar chart use?+

Use enough dimensions to support the decision but avoid so many axes that the shape becomes difficult to read.

What is the Mermaid radar chart syntax?+

Start with radar-beta, define the axes with axis, add one or more curves with curve, and set max when every series shares a known scale.

Can a radar chart compare multiple series?+

Yes. Add multiple curve declarations with the same number of values as the defined axes.

RELATED GUIDES

Keep exploring Mermaid charts

Mermaid XY Chart guide

Read the guide

Tool radar template

Read the guide

Mermaid Treemap guide

Read the guide

TEMPLATES

Start from a related template

Tool capability radar

Compare diagram tools across speed, clarity, and cost.

Open template

Ready to make a Radar?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio