Introduction to radar charts
A radar chart is a simple way to plot low-dimensional data in a circular format.
Radar charts are also called spider charts, star charts, web charts, or polar charts.
Applications
Radar charts are especially useful for developers, data scientists, and engineers who need to represent data in a clear and concise circular format.
They are commonly used to graphically summarize and compare the performance of multiple entities across multiple dimensions.
Syntax
Copy
Embed
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
Example
Copy
Embed
---
title: "Grades"
---
radar-beta
axis m["Math"], s["Chinese"], e["English"]
axis h["History"], g["Geography"], a["Art"]
curve a["Alice"]{85, 90, 80, 70, 75, 90}
curve b["Bob"]{70, 75, 85, 80, 90, 85}
max 100
min 0
Syntax details
Title
title: rendered at the top of the radar chart.
Copy
Embed
radar-beta
title Title of the Radar Diagram
...
Axis
axis: the axis syntax is used to define the axes of a radar chart.
Each axis is represented by an ID and an optional label.
Multiple axes can be defined on one line.
Copy
Embed
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Curve
curve: the curve syntax is used to define the data points of the curves in a radar chart.
Each curve is represented by an ID, an optional label, and a list of values.
Values can be defined by a list of numbers or a list of key-value pairs. If key-value pairs are used, the key represents the axis ID and the value represents the data point.
Multiple curves can be defined on one line.
Copy
Embed
radar-beta
axis axis1, axis2, axis3
curve id1["Label1"]{1, 2, 3}
curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}
curve id4{ axis3: 30, axis1: 20, axis2: 10 }
...
Options
- showLegend: the showLegend syntax is used to show or hide the legend in a radar chart; it is shown by default.
- max: the maximum value of the radar chart, used to scale the radar chart. If not provided, the maximum value is calculated from the data points.
- min: the minimum value of the radar chart, used to scale the radar chart. If not provided, the minimum value is 0.
- graticule: the graticule syntax is used to define the type of graticule lines to render in the radar chart. The graticule lines can be circle or polygon. If not provided, the default is circle.
- ticks: the ticks syntax is used to define the number of ticks on the graticule lines. It is the number of concentric circles or polygons drawn, used to indicate the scale of the radar chart. If not provided, the default number of ticks is 5.
Copy
Embed
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Configuration
| Parameter | Description | Default value |
|---|---|---|
| width | The width of the radar chart | 600 |
| height | The height of the radar chart | 600 |
| marginTop | The top margin of the radar chart | 50 |
| marginBottom | The bottom margin of the radar chart | 50 |
| marginLeft | The left margin of the radar chart | 50 |
| marginRight | The right margin of the radar chart | 50 |
| axisScaleFactor | The scale factor of the coordinate axes | 1 |
| axisLabelFactor | A factor for adjusting the position of the axis labels | 1.05 |
| curveTension | The tension of rounded curves | 0.17 |
Theme variables
Global theme variables
The default values of these variables depend on the theme being used. To override the defaults, set the desired values in the themeVariables section of the configuration: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
Radar charts support the color scale cScale${i}, where i is a number from 0 to the maximum number of colors in the theme color scale. Usually, the maximum number of colors is 12.
| Property | Description |
|---|---|
| fontSize | The font size of the title |
| titleColor | Title color |
| cScale$ | The color scale of the i-th curve |
Radar style options
The radar-specific variables are located inside the radar key. To set radar style options, use the following syntax. config: themeVariables: radar: axisColor: "#FF0000"
| Property | Description | Default value |
|---|---|---|
| axisColor | The color of the axis line | black |
| axisStrokeWidth | The width of the axis line | 1 |
| axisLabelFontSize | The font size of the axis labels | 12px |
| curveOpacity | Curve opacity | 0.7 |
| curveStrokeWidth | Curve width | 2 |
| graticuleColor | Graticule line color | black |
| graticuleOpacity | Graticule line opacity | 0.5 |
| graticuleStrokeWidth | Graticule line width | 1 |
| legendBoxSize | The size of the legend box | 10 |
| legendFontSize | The font size of the legend | 14px |
Configuration and theme example
Copy
Embed
---
config:
radar:
axisScaleFactor: 0.25
curveTension: 0.1
theme: base
themeVariables:
cScale0: "#FF0000"
cScale1: "#00FF00"
cScale2: "#0000FF"
radar:
curveOpacity: 0
---
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
curve c3{3,3,3,3,3}
