logoImejis.io

Radar Chart component

Datatype: "radar"

A radar / spider chart — one polygon per data series over shared radial axes, for comparing profiles across 3–8 dimensions at a glance.

Edit it — this is the actual editor panel
Design JSON
{
  "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
      }
    }
  ]
}

Like what you built? The full editor — canvas, templates and the render API — is free to start.

Open the editor

Radar Chart examples

Real renders of the radar chart — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Product comparison

Two products rated across six capabilities on a fixed 0–100 scale.

API overrides for this example
{
  "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
}

Skill profile

A single player’s attributes as one filled spider, with values on the vertices.

API overrides for this example
{
  "radar.axes": [
    "Pace",
    "Shooting",
    "Passing",
    "Dribbling",
    "Defense",
    "Physical"
  ],
  "radar.series": [
    {
      "name": "Player",
      "values": [
        88,
        74,
        82,
        91,
        55,
        79
      ]
    }
  ],
  "radar.max": 100,
  "radar.showValues": true,
  "radar.showLegend": false
}

All radar chart styles

Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.

Single seriesOne filled polygon — a clean scorecard for a single subject.
ComparisonTwo or three overlaid series — you vs competitor vs benchmark.
DarkA vivid radar on a dark card for social and dashboards.

Use cases

What developers typically build with the radar chart component.

  • Product / feature comparison scorecards
  • Team or player skill profiles for sports & games
  • Candidate or vendor evaluations across criteria
  • Performance-vs-benchmark snapshots for reviews

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 the sample design'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.

Property reference

Every property the radar chart component accepts — in the editor, in design JSON, and as API overrides.

PropertyTypeEdits asDefaultDescription
axesstring[]text[]Axis labels (the spokes), clockwise from the top.
seriesobject[]text[]One entry per dataset: [{ name, values, color }] — values align to axes.
maxnumber00Value mapped to the outer ring (0 = auto from the data).
ringsnumber44Number of concentric grid rings.
colorscolor[]text[]Series palette (cycled) when a series has no color.
fillOpacitynumber0.20.2Fill opacity of each series polygon.
gridColorcolor#e2e8f0"#e2e8f0"Grid rings & spokes color.
axisLabelColorcolor#475569"#475569"Axis label & legend text color.
strokeWidthnumber22Series outline width (px).
showDotsbooleantruetrueDraw a dot at each value vertex.
showValuesbooleanfalsefalsePrint the value beside each vertex (best with one series).
valueFormat'number' | 'compact' | 'percent' | 'currency'numbercompactpercentcurrency"number"How printed values are formatted (80 / 1.2K / 80% / $80).
currencySymbolstringtext"$"Symbol used with the 'currency' format.
showLegendbooleantruetrueShow the series legend (named series only).
legendPosition'top' | 'right' | 'bottom'toprightbottom"bottom"Where the legend is placed.
opacitynumber11Overall component opacity from 0 (transparent) to 1 (opaque).
borderWidthnumber00Border thickness in pixels around the component.
borderColorcolortransparent"transparent"Border color (any CSS color).
borderStyle'solid' | 'dashed' | 'dotted' | 'double' | 'none'soliddasheddotteddoublenone"solid"Border line style.
borderRadiusnumber00Corner radius in pixels.
boxShadowstringtext—CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)".

Frequently Asked Questions

Set '<key>.axes' to the spoke labels and '<key>.series' to an array of { name, values } — each series' values line up with the axes in order.

Yes — add more entries to series; each draws its own colored polygon with a legend, ideal for "you vs competitor vs benchmark" comparisons.

Set a fixed max (e.g. 100) so every render uses the same outer-ring scale; leave it at 0 to auto-fit each chart to its own data.

Enable showValues (best with a single series) to print each value beside its vertex; valueFormat controls the number style.