← All diagram types

Mermaid radar chart syntax: axes, curves and scale with examples

Mermaid radar-beta syntax with rendered examples: shared axes with labels, multiple curves, key-value values, the scale range and the graticule.

A radar chart compares several things across the same set of measures: three vendors on five criteria, two releases on latency, accuracy and cost. Each option is a closed polygon, so a shape that encloses more area is ahead across more axes.

Everything on this page is rendered by makesPDF's own Mermaid renderer, so a ```mermaid block produces exactly this in the PDF.

Axes and curves

axis declares the measures in the order they appear around the circle — the first one points straight up, the rest follow clockwise. Each may carry a display label in ["…"]. A curve is a series, with one value per axis in that same order:

mermaid
radar-beta
  title Restaurant comparison
  axis food["Food"], service["Service"], price["Price"]
  axis ambiance["Ambiance"]
  curve a["Restaurant A"]{4, 3, 2, 4}
  curve b["Restaurant B"]{3, 4, 3, 3}
Render this to PDF →How diagram blocks work

Axes accumulate across axis lines, so they can be declared a few at a time; what matters is the final order, because a curve's values are positional.

Key-value curves

When the values are easier to read named, write them as axisId: value pairs inside the braces. Axes left out take the scale minimum:

mermaid
radar-beta
  title Candidate comparison
  axis comms["Comms"], depth["Depth"]
  axis ownership["Ownership"], pace["Pace"]
  curve a["Candidate A"]{ comms: 4, depth: 5, ownership: 4, pace: 3 }
  curve b["Candidate B"]{ comms: 5, depth: 3, ownership: 3, pace: 5 }
Render this to PDF →How diagram blocks work

The axis id is what the key refers to — the bracketed label is display only.

The scale

By default the domain runs from 0 to the largest value in the data. max, min and ticks pin it down, which matters when two charts are meant to be compared side by side:

mermaid
radar-beta
  title Support quality
  axis speed["Speed"], clarity["Clarity"]
  axis fixes["Fix rate"], tone["Tone"]
  curve now["This quarter"]{3, 4, 3, 5}
  curve before["Last quarter"]{2, 3, 2, 4}
  min 0
  max 5
  ticks 5
Render this to PDF →How diagram blocks work

ticks is the target number of ring levels — clamped to 1–12 and rounded to round values — and each ring is labelled with its value.

Graticule and legend

The rings under the curves are drawn as circles by default; graticule polygon matches them to the shape of the chart, so the grid lines up with the axes:

mermaid
radar-beta
  title Cloud provider scores
  axis cost["Cost"], support["Support"], speed["Speed"]
  axis regions["Regions"], tooling["Tooling"]
  curve a["Provider A"]{4, 3, 5, 3, 4}
  curve b["Provider B"]{3, 5, 3, 4, 3}
  graticule polygon
  showLegend true
Render this to PDF →How diagram blocks work

showLegend false hides the curve legend when the chart sits next to a caption that names the series.

Not supported in makesPDF yet: curve colours are assigned from a fixed palette in source order — there is no per-curve colour option. %%{init}%% radar configuration is ignored, and a curve with fewer values than there are axes is padded with the minimum rather than interpolated. The room beside the circle is fixed, so an axis label at the left or right compass point is clipped once it is longer than about ten characters — Delivery pace loses its first letter and Technical depth its last. Labels at the top and bottom are centred and can be longer. Keep side labels short for now.