Single series radar chart
Radar Chart styletype: "radar"Render single-series radar scorecards — one filled spider over your axes with values on the vertices — set per API call. Create radar scorecards free with Imejis.
Design JSON — “Single series” 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.25,
"showLegend": false,
"legendPosition": "bottom",
"opacity": 1,
"showValues": true
}
}
]
}Radar Chart examples
Real renders of the single series radar chart — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Employee review radar
One person rated across six competencies for a review summary card.
API overrides for this example
{
"radar.showValues": true,
"radar.showLegend": false,
"radar.fillOpacity": 0.25,
"radar.axes": [
"Delivery",
"Quality",
"Ownership",
"Collaboration",
"Communication",
"Growth"
],
"radar.series": [
{
"name": "Q3",
"values": [
82,
90,
75,
88,
70,
80
],
"color": "#6366f1"
}
],
"radar.max": 100
}Coffee tasting profile
A single-origin coffee’s flavor profile as a filled spider.
API overrides for this example
{
"radar.showValues": true,
"radar.showLegend": false,
"radar.fillOpacity": 0.25,
"radar.axes": [
"Acidity",
"Body",
"Sweetness",
"Bitterness",
"Aroma",
"Aftertaste"
],
"radar.series": [
{
"name": "Ethiopia",
"values": [
8,
5,
7,
4,
9,
6
],
"color": "#b45309"
}
],
"radar.max": 10
}When to use the single series style
- Individual skill or attribute cards
- Single-product capability snapshots
- Self-assessment / review summaries
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.25,
"radar.showLegend": false,
"radar.legendPosition": "bottom",
"radar.opacity": 1,
"radar.showValues": true
}'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.