Comparison radar chart
Radar Chart styletype: "radar"Overlay multiple datasets on one radar chart — you vs competitor vs benchmark — with a legend, set per API call. Generate comparison spider charts free.
Design JSON — “Comparison” variant
{
"title": "Radar chart sample",
"description": "A multi-series capability comparison",
"dimensions": {
"width": 800,
"height": 460
},
"background": {
"color": "#ffffff"
},
"components": [
{
"id": "sample-radar",
"key": "radar",
"type": "radar",
"position": {
"x": 240,
"y": 40
},
"rotation": 0,
"size": {
"width": 320,
"height": 380
},
"dynamic": true,
"properties": {
"axes": [
"Speed",
"Power",
"Range",
"Accuracy",
"Defense",
"Cost"
],
"series": [
{
"name": "Model A",
"values": [
80,
65,
90,
70,
85,
60
]
},
{
"name": "Model B",
"values": [
60,
85,
70,
90,
65,
80
]
}
],
"max": 100,
"fillOpacity": 0.2,
"showLegend": true,
"legendPosition": "bottom",
"opacity": 1
}
}
]
}Radar Chart examples
Real renders of the comparison radar chart — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Us vs competitor
Two products across five buying criteria with a bottom legend.
API overrides for this example
{
"radar.showLegend": true,
"radar.legendPosition": "bottom",
"radar.axes": [
"Price",
"Features",
"Support",
"Ease of use",
"Performance"
],
"radar.series": [
{
"name": "Us",
"values": [
70,
90,
85,
80,
88
],
"color": "#6366f1"
},
{
"name": "Competitor",
"values": [
85,
65,
60,
75,
70
],
"color": "#ec4899"
}
],
"radar.max": 100
}Team vs league average
A squad’s profile against the league mean across six metrics.
API overrides for this example
{
"radar.showLegend": true,
"radar.legendPosition": "bottom",
"radar.axes": [
"Attack",
"Defense",
"Possession",
"Pressing",
"Set pieces",
"Fitness"
],
"radar.series": [
{
"name": "Our team",
"values": [
88,
72,
84,
90,
60,
80
],
"color": "#22c55e"
},
{
"name": "League avg",
"values": [
70,
70,
70,
70,
70,
70
],
"color": "#94a3b8"
}
],
"radar.max": 100
}When to use the comparison style
- Competitor feature comparisons
- Before / after performance profiles
- Team vs league-average stat cards
Use it dynamically via the API
Push fresh datasets per render with '<key>.series' (or just '<key>') as [{ name, values }]; '<key>.axes' updates the spokes too.
Full API request with this variant's current values — the playground above sends only the properties you change
curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
"radar.axes": [
"Speed",
"Power",
"Range",
"Accuracy",
"Defense",
"Cost"
],
"radar.series": [
{
"name": "Model A",
"values": [
80,
65,
90,
70,
85,
60
]
},
{
"name": "Model B",
"values": [
60,
85,
70,
90,
65,
80
]
}
],
"radar.max": 100,
"radar.fillOpacity": 0.2,
"radar.showLegend": true,
"radar.legendPosition": "bottom",
"radar.opacity": 1
}'Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.
Other radar chart styles
See the radar chart component page for the full property reference and FAQs.