Mermaid radar chart examples

Mermaid radar chart syntax

Mermaid added the radar chart in version 11.6.0 under the keyword radar-beta; the documentation also calls it a spider, star, cobweb or polar chart and a Kiviat diagram. The syntax has two building blocks. axis defines the spokes, each as an id with an optional quoted label, and several may be listed on one line separated by commas. curve defines one data series as an id, an optional quoted label and a brace list of values, either plain numbers in axis order or axisId: value pairs in any order.

The remaining keywords are options and can appear anywhere after the axes. A title line puts a heading above the chart; the same effect comes from a title: field in a YAML block at the top of the diagram.

How do you change colours and size?

Colours are theme variables. Each curve takes the next colour from the theme colour scale, cScale0 for the first curve, cScale1 for the second, up to the theme’s maximum of usually twelve. Override them under config: themeVariables with theme: base so that your values are not replaced. Styling specific to the radar, such as the axis colour, the graticule colour and opacity, the curve width and opacity, and the legend font size, goes one level deeper under themeVariables: radar.

Size and geometry are configuration rather than theme: width and height (both 600 by default), the four margins, axisScaleFactor, axisLabelFactor for pushing labels away from the spokes, and curveTension for how rounded the curves are. These go under config: radar.

Which platforms render a Mermaid radar chart?

Only renderers on Mermaid 11.6.0 or later. The type is young, and platforms embed their own copy of Mermaid: docs-md.com runs 11.16, GitLab’s Markdown documentation states the Mermaid major version it supports, and GitHub’s documentation suggests rendering the one-word info diagram to see the version it uses. The Mermaid in Markdown page shows that check and how GitHub, GitLab, Obsidian, Notion and VS Code embed diagrams.

Where the renderer is too old, readers see the code, which for a radar chart is still a readable table of axes and values. To share the drawn chart with people outside those platforms, paste the Markdown into the Docs MD editor and send the link, or convert the document to PDF.

When is a radar chart the right choice?

A radar chart compares a few items across several criteria measured on the same scale: skills, product features, review scores, health metrics. It works when the axes share one scale and there are between three and about eight of them. Set max explicitly so that two charts drawn on different days stay comparable, and keep the number of curves to three or four.

When the criteria have different units, a radar chart misleads; use a bar chart per criterion instead. When you are sorting items by just two judgements, a quadrant chart is clearer. And when the values are shares of one whole, a pie chart is enough. The hub of Mermaid examples compares every chart type Docs MD covers.

Which Mermaid version added radar charts?

Mermaid 11.6.0. The keyword is radar-beta, and in Mermaid 11.16 that is still the only accepted spelling. A platform on an older Mermaid shows the code as text or reports an unknown diagram type, so render the info diagram there first to see which version it runs.

Why does my Mermaid radar chart show a syntax error?

Check the version first: anything older than 11.6.0 cannot parse radar-beta. Then check the braces: every curve needs one value per axis, in braces, separated by commas, and a keyed curve uses the axis ids exactly as declared. Labels must be in double quotes inside square brackets, and the options max, min, ticks, graticule and showLegend must be spelled exactly like that.

How do I change the colours of a Mermaid radar chart?

Add a YAML config block at the top of the diagram with theme: base and set cScale0, cScale1 and so on under themeVariables; each curve takes the next colour in that scale. Axis, grid and legend styling go under themeVariables: radar, for example axisColor, graticuleColor and curveOpacity. The colour example on this page shows the complete block.

What is the graticule in a Mermaid radar chart?

The grid behind the curves: the concentric rings that mark the scale and the spokes that mark the axes. Mermaid’s documentation uses the word for the ring shape, which is circle by default and polygon when you write graticule polygon. The ticks keyword sets how many rings are drawn, five by default, and the radar theme variables set their colour and opacity.

Do all curves need a value for every axis?

Give every curve a value for every axis. Plain values are matched to the axes in order, so a short list leaves the remaining axes undefined; keyed values match by axis id, so a missing key leaves that axis without a point. Use the keyed form when curves come from different sources, and fill genuine gaps with the min value so the shape stays closed and readers can see the gap.